A. vue项目创建和部署使用
这周花了两天时间简单研究了下目前非常流行和应用广泛的前端js框架 vue ，作为一个基础的了解。 vue 的作者是国人尤雨溪。官网描述 vue 是一套用于构建用户界面的渐进式框架，可以自底向上逐层应用，它核心只关注视图层，易于上手和便于整合。同时，其可以与现代化的工具链和各种类库结合，用以创建复杂的单页应用。其特点主要有以下几点：
基于 vue 的流行度，日常项目前端有在使用，遂记录这篇文章，主要讲从环境搭建到使用样例。在学习中，体验和完成了一个功能稍微丰富的例子，为简洁起见，本期只展示官方默认例子。鉴于本地也没搜清有nodeJs环境，所以直接从环境搭建开始。
配置淘宝源，注意 -g 是全局安装
完成之后将使用 cnpm 替换 npm ，验证 cnpm :
之后的依赖安装就可以使用 cnpm install <package> 或简写 cnpm i <package> 进行。没有代理的情况下，相比npm国内要快很多，也不容易失败。注意可以使用 -g -D --save 等参数设置安装范围。
安装 vue-cli
vue-cli 是官方提供的项目脚手架（可以看做类似服务端开发的maven用于构建的部分），用来进行项目构建等操作，后面我们会继续介绍。它还提供了一个图形界面，用来执行和进行相关配置，对于新手等只关心结果的人，减少了很多的学习成本。
安装命令
验证安装
之后我们看到一个 hello-world 的文件夹，里边包括默认生成的一些配置和 App.vue , main.js 等程序文件，如下镇漏辩是支持 vue-router 路由 （控制页面切换等操作） 的一个 main.js 具体内容
注意使用路由时，不要忘记在主模板里添加 <router-view>御缺</router-view> 标签，表示路由切换的位置，否则路由页面无法正常展示。
先保持默认的demo内容不变，运行如下命令启动一个本地服务来运行
之后会启动对应的服务，通过地址和端口访问，就能看到默认的页面。
既然提到了部署，默认的部署使用 npm/cnpm 进行，如下命令，输出内容在 /dist 目录。
可以使用参数来设置，得到符合不同需要的编译结果。之后即可以将打包的文件部署到服务器上。
这里说下 vue-cli 脚手架所带的图形界面编译打包管理，可使用如下命令开启，然后按照提示，加入需要的项目，可以查看仪表盘展示，进行插件管理，依赖管理，编译配置，以及项目构建的操作，十分方便。
启动 vue-cli 图形界面
然后按照提示访问即可。
以上就是本期的内容，主要是一些初期的准备工作。目前整体了解了vue相关，如渲染，组件化，路由等。总体来说依托 vue 提供的丰富文档和比较好用的工具，以及本身非常高的流行度，在尝试稍微复杂的功能或者遇到问题时，容易找到相关满意的解决方式，总体来说还是比较适合入门的。后续看时间能多熟悉些实际项目，真正用于搭配后端做个可用的项目。
1. Vue.js介绍
2. Vue CLi脚手架
B. Vue项目启动过程以及配置
我们点击 npm run dev 的时候，这就是启动 Vue 工程项目，那么它启动过程是什么样的呢？ Vue 项目启动过程，本文简要介绍皮宽。
在执行 npm run dev 的时候，会在当前目录中寻找 package.json 文件，燃敏亮包含项目拿郑的 名称版本 、 项目依赖 等相关信息。
从下图中可以看到， 启动 npm run dev 命令后，会加载 build/webpack.dev.conf.js 配置并启动 webpack-dev-server 。
webpack.dev.conf.js 中引入了很多模块的内容，其中就包括 config 目录下服务器环境的配置文件。
可以看到，在 index.js 文件中包含服务器 host 和 port 以及入口文件的相关配置，默认启动端口是 8080 ，这里可以进行修改。
index.html 的内容很简单，主要是提供一个 div 给 vue 挂载。
main.js 中， 引入了 vue 、 App 和 router 模块， 创建了一个 Vue 对象，并把 App.vue 模板的内容挂载到 index.html 的 id 为 app 的 div 标签下， 并绑定了一个路由配置。
上面 main.js 把 App.vue 模板的内容，放置在了 index.html 的 div 标签下面。查看 App.vue 的内容我们看到，这个页面的内容由一个 logo 和一个待放置内容的 router-view ， router-view 的内容将由 router 配置决定。
查看 route 目录下的 index.js ，我们发现这里配置了一个路由， 在访问路径 / 的时候， 会把 HelloWorld 模板的内容放置到上面的 router-view 中。
HelloWorld 中主要是一些 Vue 介绍显示内容。
所以，页面关系组成是 index.html 包含 App.vue，App.vue 包含 HelloWorld.vue 。
到这，我们开始安装 router 、 vuex 。
Ctrl+C 退出启动，继续执行 vue-cli ，脚手架安装插件 router 和 vuex 开始。
输入一个大写Y，按下Enter
vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。
Vuex 主要有五部分：
① 安装 vuex
接下来我们在 src目录 下创建一个 vuex 文件夹
并在 vuex文件夹 下创建一个 store.js 文件
文件夹目录 长得是这个样子
在保证我们处于我们项目下，在命令行输入下面命令，然后，安装 vuex 。
② vuex 的关系图
③ 开始使用，在 mian.js 中，引入 vuex
④然后告知 vue 开始使用 vuex (Vue.use(Vuex))
在 store.js 文件中，引入 vuex 并且使用 vuex ，这里注意我的变量名是大写 Vue 和 Vuex
⑤接下来，在main.js中引入store
到这里算是，以及完成了。
我们再重新看一下此时的项目结构，多了router.js和store.js，其它相关的文件也被修改
C. vue项目怎么在原来的项目上打开
在vscode里新打开一个命袜袭令行终端，在终端窗口里使用vue对应的脚手架命令启动项目即可。
1、用本地git客户端将vue项目从github克隆到本地，用vscode打开，完成编辑。
2、在vscode里新打竖燃开一个命令行终端，在终端窗口里使用vue对应的脚手架命令启动项目。余好虚