webpack中如何使用vue

1.安装vue包,cnpm i vue -s 生产环境


2.由于webpack中,使用.vue组件模板文件定义组件,需要安装能解析这种文件的loader

cnpm i vue-loader vue-template-complier -D 开发环境

cnpm i vue-loader-plugin -S  vue-loader@15版本之后必须配置依赖插件


3.webpack.config.js中进行配置:
const VueLoaderPlugin = require('vue-loader/lib/plugin')
plugins:[   
           new VueLoaderPlugin()
],
module:{  
  rules:[  
           { test:/.vue$/,  use:'vue-loader'}  
         ]


4.在main.js中导入Vue模块 import Vue from 'vue'  只提供了runtime-only 的方式


5.定义一个.vue组件,三部分组成:template script style


6.导入组件 import login from './login.vue'


7.创建VM实例 var vm = new Vue({el:'#app},render:c=>c(login))


8.在index.html页面中创建一个id为app 的div容器,作为vm实例要控制的区域


标签: webpack 自动化构建工具

演示站
  • 版权声明:本站部分文章收集整理来源网络,仅供学习与参考,不代表本站支持其观点,如有内容侵权请及时联系本站客服,本站将会及时处理,于2020-08-08,由常州橙光网络发表,共 1074个字。
  • 转载请注明:webpack中如何使用vue
上一篇:npm i -D 与 npm i -S代表什么意思?
下一篇:常州市溧阳市微信公众号开发公司如何选择?溧阳本地微信公众号开发公司

发表评论