纯静态引入.vue文件之http-vue-loader.js
纯静态引入.vue文件之http-vue-loader.js
在最早之前，我做过纯静态的项目引入vue当作模板引擎，就是那种没有任何打包压缩的项目，就是单纯的引入css、js、html的项目。现在应该是很少有这样的项目了，很少不代表没有，起码我现在在撸jq的项目（现在jq贼溜）。
如果习惯了.vue文件去开发，有人就会想要直接用.vue文件当作组件。虽然我很不明白为什么，既然不是用webpack的项目，真的没必要用.vue文件，用js，直接注册组件就行，vue都提供了函数。然而，还是有这样的插件提供了用.vue文件注册组件的，那就是http-vue-loader.js。
使用很简单，npm直接就提供了demo：
https://www.npmjs.com/package/http-vue-loader
要注意的是，如果用编辑权生成模板（我都是直接新建的时候就生成模板），export default{}要改成module.exports = {}，style那边用less、stylus还是sass什么的，声明也要去掉。
因为这个插件，我还知道了elementUI也可以直接引入在html直接使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>coding个人笔记</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<demo></demo>
<el-button @click="visible = true">Button</el-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>Try Element</p>
</el-dialog>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
components: {
'demo': httpVueLoader('./demo.vue')
},
data: function() {
return { visible: false }
}
});
</script>
</body>
</html>
在我的思维里面，要用什么UI库，如果不是可以打包的项目，都是找jq的UI库，你能用到的各种框架UI库，jq版本的几乎也能找到，就是风格样式会没那么好看。
所以，http-vue-loader.js这玩意儿，我觉得用来做做测试是最好的选择，如果有个.vue文件的组件有点问题，别人又不想发整个项目给你，你又不太想直接放到你的项目，那就可以用最快的方法运行（想不出更好的用处了，直接新建一个项目也用不了多长时间）。
最后，分享个vue3的课程，vue3加ts是个必然的趋势，虽然现在ts也没学好，不妨碍学习vue3，如果不管源码的新特性，单纯学习vue3的语法，还是很快就能入门的，最好别用着vue3，结果写着vue2的语法。
这个课程，只能说不贵，也不是视频教程，该讲的内容都讲到了，因为不是视频，文字表达会毕竟精炼，还是值得学习的。