webpack中如何使用vue

常州橙光网络2020-08-08网站建设441 浏览

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实例要控制的区域

版权声明：本站部分文章收集整理来源网络，仅供学习与参考，不代表本站支持其观点，如有内容侵权请及时联系本站客服，本站将会及时处理，于2020-08-08，由常州橙光网络发表，共 1074个字。
转载请注明：webpack中如何使用vue