Vue全家桶以及常用知识点
一、介绍:VUE是什么
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
二、VUE全家桶及项目架构
Vue有著名的全家桶系列，包含了vue-router（http://router.vuejs.org），vuex（http://vuex.vuejs.org）， vue-resource（https://github.com/pagekit/vue-resource）。再加上构建工具vue-cli，就是一个完整的vue项目的核心构成。
对于大多数单页面应用，都推荐使用官方支持的 vue-router 库。更多细节可以移步 vue-router 文档。
推荐使用npm工具来安装vue-router
npm install vue-router
通过import导入并定义Vue模块、vue-router模块和需要使用的组件，在本例中，分别是Goods、Ratings和Seller组件。最后，如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能。
import Vue from’vue’
importRouter from’vue-router’
import Goods from ‘@/components/goods/goods’;
import Ratings from ‘@/components/ratings/ratings’;
import Seller from ‘@/components/seller/seller’;
Vue.use(Router); // 需要import Vue和Router，不然会报错undefined
通过const router= new VueRouter（）来定义一个路由，并传入对应的配置，包括路径path和组件components。最后，在使用newVue来创建和挂载vue根实例的时候，记得要通过 router配置参数注入路由，即在router中export出来的路由对象，从而让整个应用都有路由功能。
Vuex是Vue.js应用程序的状态管理模式+库。它充当应用程序中所有组件的集中存储，其规则确保状态只能以可预测的方式进行更改。它还与Vue的官方devtools扩展集成，以提供高级功能，例如零配置时间旅行调试和状态快照导出/导入。
State：vuex中的数据源，我们需要保存的数据就保存在这里，可以在页面通过 this.$store.state来获取我们定义的数据；
Getters：Getter相当于vue中的computed计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，这里我们可以通过定义vuex的Getter来获取，Getters 可以用于监听、state中的值的变化，返回计算后的结果。
Mutations：数据我们在页面是获取到了，但是如果我们需要修改count值怎么办？如果需要修改store中的值唯一的方法就是提交mutation来修改，我们现在Hello World.vue文件中添加两个按钮，一个加1，一个减1；这里我们点击按钮调用addFun（执行加的方法）和reductionFun（执行减法的方法），然后在里面直接提交mutations中的方法修改值。
Actions：我们看到，当点击三次后值从2变成了-1；页面上的值是改变了；我们达到了修改store中状态值的目的，但是，官方并不介意我们这样直接去修改store里面的值，而是让我们去提交一个actions，在actions中提交mutation再去修改状态值，接下来我们修改index.js文件，先定义actions提交mutation的函数。
mapState、mapGetters、mapActions：如果我们不喜欢这种在页面上使用“this.$stroe.state.count”和“this.$store.dispatch('funName')”这种很长的写法，那么我们可以使用mapState、mapGetters、mapActions就不会这么麻烦了；
Vue-resource有体积小，支持IE9以上的浏览器，支持promise特性的特点。同样推荐使用npm来安装Vue-resource。
$ npm install vue-resource
在安装并引入vue-resource后，可以基于全局的Vue对象使用http，也可以基于某个Vue实例使用http。
在发送请求后，使用then方法来处理响应结果，then方法有两个参数，第一个参数是响应成功时的回调函数，第二个参数是响应失败时的回调函数。
vue-resource的请求API是按照REST风格设计的，它提供了7种请求API：
· get(url,[options])
· head(url,[options])
· delete(url,[options])
· jsonp(url,[options])
· post(url,[body], [options])
· put(url, [body],[options])
· patch(url,[body], [options])
在一个 Vue CLI 项目中，@vue/cli-service 安装了一个名为 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令。
-
.安装vue-cli
① 使用npm（需要安装node环境）全局安装webpack，打开命令行工具输入：
npm install webpack -g或者（npm install -g webpack），安装完成之后输入webpack -v，如下图，如果出现相应的版本号，则说明安装成功。 -
用vue-cli来构建项目
① 我首先在D盘新建一个文件夹（dxl_vue）作为项目存放地，然后使用命令行cd进入到项目目录输入：
vue init webpack baogebaoge是自定义的项目名称，命令执行之后，会在当前目录生成一个以该名称命名的项目文件夹。
输入命令后，会跳出几个选项让你回答：
- Project name (baoge)： -----项目名称，直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters），阮一峰老师博客为什么文件名要小写 ，可以参考一下。
- Project description (A Vue.js project)： ----项目描述，也可直接点击回车，使用默认名字
- Author ()： ----作者，输入你的大名
接下来会让用户选择： - Runtime + Compiler: recommended for most users 运行加编译，既然已经说了推荐，就选它了
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 仅运行时，已经有推荐了就选择第一个了 - Install vue-router? (Y/n) 是否安装vue-router，这是官方的路由，大多数情况下都使用，这里就输入“y”后回车即可。
- Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，一般项目中都会使用。
接下来也是选择题Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设，编写vue项目时的代码风格，直接y回车 - Setup unit tests with Karma + Mocha? (Y/n) 是否安装单元测试，我选择安装y回车
- Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试 ，我选择安装y回车
- npm install ：安装所有的模块，如果是安装具体的哪个个模块，在install 后面输入模块的名字即可。而只输入install就会按照项目的根目录下的package.json文件中依赖的模块安装（这个文件里面是不允许有任何注释的），每个使用npm管理的项目都有这个文件，是npm操作的入口文件。因为是初始项目，还没有任何模块，所以我用npm install 安装所有的模块。安装完成后，目录中会多出来一个node_modules文件夹，这里放的就是所有依赖的模块。
-
启动项目
npm run dev如果浏览器打开之后，没有加载出页面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config里的index.js，如果本地调试项目时，建议将build 里的
assetsPublicPath的路径前缀修改为 ' ./ '（开始是 ' / '），因为打包之后，外部引入 js 和 css 文件时，如果路径以 ' / ' 开头，在本地是无法找到对应文件的（服务器上没问题）。所以如果需要在本地打开打包后的文件，就得修改文件路径。 - 注意：在进行vue页面调试时，一定要去谷歌商店下载一个vue-tool扩展程序。
-
vue-cli的webpack配置分析
-
- 从
package.json可以看到开发和生产环境的入口。 - 可以看到dev中的设置，build/webpack.dev.conf.js，该文件是开发环境中webpack的配置入口
- 在webpack.dev.conf.js中出现webpack.base.conf.js，这个文件是开发环境和生产环境，甚至测试环境，这些环境的公共webpack配置。可以说，这个文件相当重要。
- 还有config/index.js 、build/utils.js 、build/build.js等，具体请看这篇介绍：https://segmentfault.com/a/1190000008644830
- 从
7. 自己的项目文件都需要放到 src 文件夹下。在项目开发完成之后，可以输入 npm run build 来进行打包工作。npm run build
save 安装包信息将加入到dependencies（生产阶段的依赖） save-dev 安装包信息将加入到devDependencies（开发阶段的依赖），所以开发阶段一般使用它
打包完成后，会生成 dist 文件夹，如果已经修改了文件路径，可以直接打开本地文件查看。
项目上线时，只需要将 dist 文件夹放到服务器就行了。
三、vue工程目录结构
下图是一个简单的vue项目的大概结构，下面简要介绍一下每个文件夹中一般都会存放哪些内容。
|
components/文件夹用来存放Vue 组件。个人建议，把每一个组件中使用到的image图片放置到对应的组件子文件目录下，便于统一的管理
|
 |
|
