纯静态引入.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的语法。

这个课程,只能说不贵,也不是视频教程,该讲的内容都讲到了,因为不是视频,文字表达会毕竟精炼,还是值得学习的。

课程地址

上一篇:webpack之loader与plugin


下一篇:webpack 生产/开发环境配置文件分离