webpack中使用vue

一、插件的安装

项目打包时用到的vue相关插件devdependencies：

"vue-loader": "^13.7.2",

"vue-template-compiler": "^2.6.12",

项目运行时的依赖dependencies：

"vue": "^2.6.12",

"vue-router": "^3.5.2"

注意

1、"vue-template-compiler": "^2.6.12",和"vue": "^2.6.12",的版本必须是一致的，不然会出现错误情况；

2、vue-loader 的版本过高也可能出现错误，此时可以对loader插件进行降级处理 

二、webpack.config.js的一些基础属性的配置

语法与node中的语法一致

配置vue loader组件 主要是两点

1、配置vue-loader的模版规则 利用正则表达式  test:/\.vue$/ 筛选出以vue结尾的文件 

然后该范围内的文件使用 vue-loader插件

2、import vue from ‘vue’ 默认vue中的package.json 中的 main 属性默认是dist/vue.runtime.common.js （不全的，不满足我们的要求）我们需要的是 vue.js

图中的alias对象就是解决方法之一（配置vue结尾的包文件入口文件为vue/dist/vue.js）

还有另外两种解决方法一个是直接修改vue package.json中的默认main属性为“  vue.js  ”

另一个是修改import语句的路径直接指向 node_modules/vue/dist/vue.js

三、配置路由（路径及相关组件）并导出

1、利用npm 安装vue-router插件

通过import VueRouter from 'vue-router' 导入VueRouter 构造函数（需要向构造函数中传入routes）

routes（对象数组）中配置 相关的路径以及该路径path下需要渲染的组件component

component组件也需要通过包引入（  以vue结尾的相关文件  ）

配置完成之后再通过exports default router 暴露出该对象供其他需要的文件引入使用。

四、在主文件中引入插件 路由

import VueRouter from 'vue-router' 在router文件和main.js文件中都要用到

Vue.use(VueRouter)将VueRouter注册为vue插件使用

大致就是这样的一个流程

es6的语法浏览器并不能直接解析 这是我们就要利用webpack进行打包转化成浏览器可以识别的语法 可以利用webpack相关的插件webpack-dev-server等插件执行。