webpack下使用vue进行项目构建

首先，安装Vue包文件，导入包文件(import Vue from ‘vue’)，创建Vue实例；

这其中存在一个问题，即使用import导入的Vue构造函数功能不完整，只提供了runtime-only版本；了解runtime-only_https://www.jianshu.com/p/466510d84e36

这个问题有两种解决思路，导入正确的Vue文件，继续使用runtime-only文件，添加loader解析vue的组件文件；

一、更换vue文件

第一种方式，直接使用import从正确的路径下导入vue文件；

第二种方式，在webpack.config.js文件中添加配置项，修改导入vue包的路径；

这也是第一种方式导入文件的正确路径；

二、继续使用runtime-only版本文件

先说一下vue组件文件的模板代码块吧！组件文件分为三块，如下图所示：

从图中的标签名就可以看出模板文件的中代码块的作用，template标签内定义html模板代码，script标签内则定义渲染模板所需要的数据方法，最后style则定义模板文件的样式，添加scoped即表示样式只会应用于当前组件，lang属性可以指定书写css代码的方式，即可以书写原生css，也可以使用less/scss；

当我们将组件构建完毕之后，便可以将其导入其他文件进行使用，但是导入组件后webpack是无法进行打包的，这就需要添加loader帮我们将组件文件进行编译；

npm安装vue-loader,因为vue-loader内部依赖vue-template-compiler,所以也需要对其进行安装；

安装完毕后进入配置阶段，即在webpack.config.js的规则集rules中添加对vue文件的处理方式；

配置完毕后会发现webpack打包依旧失败了，因为还需要借助VueLoaderPlugin插件，所以需要使用npm安装后在webpack配置文件中进行配置；

首先，导入插件；

然后需要在plugins内创建插件实例；

一系列做下来，即使采用runtime-only版本进行项目开发需要借助的工具介绍；

Vuex的配置

当项目进行到商城购物车环节的时候，需要实现商城中的商品添加数量需要与购物车做到一致，如果直接实现同步的话，设计到复杂的组件之间的传值，所以我们引入了公共数据管理工具Vuex,下面就来介绍一下Vuex的使用方式；

一、导入注册

使用npm进行安装后，使用import将vuex导入口文件进行注册；

二、创建实例

三、挂载至Vue实例

图片中采用ES6语法，即store：store；

以上三步完成，项目已具有了全局仓储；下面来讲解一下Vuex到底怎么使用；

Vuex的使用

一、state

在state内定义及全局共享的数据，在组件中获取数据的方式：this.$store.state.数据名

二、mutations

mutations内定义对数据进行操作的函数，不建议对数据直接进行修改，而是通过函数对数据进行间接操作；

函数的第一个参数为state，所以在函数中访问公共仓库中的共享数据的方式：state.数据名；

在组件内使用mutations内的方法对数据进行操作，调用mutations内函数的方式：this.$store.commit(方法名，参数)

注意，参数项最多只能传入两个参数，如果传递数据过多，可考虑传递对象或者数组；

三、getters

getters内用于定义获取数据的函数，更确切的说是对数据进行包装然后返回给调用者，引用getters内的函数，当函数内数据发生变化时，会触发重新计算，使数据能够实时更新；引用getters内函数的方式：$store.getters.函数名；还有一点，函数的第一个参数仍是仓储的state属性；