doc
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>
参考
https://github.com/FranckFreiburger/http-vue-loader/issues/20
