在最早之前,我做过纯静态的项目引入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的语法。
这个课程,只能说不贵,也不是视频教程,该讲的内容都讲到了,因为不是视频,文字表达会毕竟精炼,还是值得学习的。