js：http-vue-loader从浏览器直接引入vue文件
doc
github: https://github.com/FranckFreiburger/http-vue-loader
index.html
<!doctype html>
<html lang="en">
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
components: {
'my-component': httpVueLoader('my-component.vue')
}
});
</script>
</body>
</html>
my-component.vue
<template>
<div class="hello">
Hello {{who}}
</div>
</template>
<script>
// 不支持 import
module.exports = {
data: function () {
return {
who: 'world',
};
},
components: {},
};
</script>
<style>
.hello {
background-color: #ffe;
}
</style>
使用 sass
<!-- 可选，使用sass -->
<script src="https://cdn.bootcdn.net/ajax/libs/sass.js/0.9.9/sass.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/sass.js/0.9.9/sass.worker.min.js"></script>
<script type="text/javascript">
// 可选, 使用scss
httpVueLoader.langProcessor.scss = function (scssText) {
return new Promise(function (resolve, reject) {
Sass.compile(scssText, function (result) {
if (result.status === 0)
resolve(result.text)
else
reject(result)
});
});
}
</script>
使用 less
<!-- 使用 less -->
<script src="https://cdn.jsdelivr.net/npm/less@4.1.1/dist/less.min.js"></script>
<script type="text/javascript">
httpVueLoader.langProcessor.less = function (lessText) {
return new Promise(function (resolve, reject) {
less.render(lessText, {}, function (err, css) {
if (err) {
reject(err)
} else {
resolve(css.css);
}
})
})
}
</script>
