这周花了两天时间简单研究了下目前非常流行和应用广泛的前端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脚手架
我们一般创建vue项目都是通过vue-cli脚手架去创建，这次我尝试了通过文档完成所有项目配置包括webpack、ant-design-vue、vue-router、vuex等项目源码： https://github.com/wzp123321/myVueJSProByMySelf.git
1.新建项目
2.使用vscode打开项目
3.初始化
4.安装基本的 npm 包
5.创建文件夹以及文件
6.配置webpack.config.js
在这之前先安装一些依赖
模板解析依赖：
样式依赖:
css-loader: https://webpack.docschina.org/loaders/css-loader/
文件加载依赖
解析es6语法依赖: https://github.com/babel/babel-loader
这是一个webpack插件，可简化HTML文件的创建以服务您的webpack捆绑软件
现在就可以配置webpack.config.js，如果有什么不清楚的可以参考官网 https://webpack.docschina.org/configuration/
7.安装解析依赖 https://github.com/webpack/webpack-dev-server
8.修改package.json文件
9.配置babel,创建.babelrc文件
修改webpack.config.js
如果编译时报错的话可能是因为你没有安装依赖:
10.主要文件：
app.vue：
index.js:
html文件：
Vue项目文件夹大致参考
1.混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
mixins文件夹下可以写各种调用ajax请求方法的方法，然后在需要调用这些方法请求数据的文件中：
这里的getCourseList文件中有请求需要的参数以及请求完成之后获取的数据 直接在文件类似this.getAllDemoClass()就能调用方法
2.components通用组件存放文件夹：
在这个文件夹下封装了项目需要的组件 然后在components下的index.js中向外暴露即可 然后在使用组件的文件中引用components即可
后续：
1.引入ant-design-vue：
具体引入操作可见官网 https://vue.ant.design/docs/vue/introduce-cn/
2.引入Vue Router https://router.vuejs.org/zh/installation.html
路由配置文件：router/index.js
3.引入vuex
新建store/index.js
news/index.vue
4.页面顶部进度条插件Nprogress
使用：
安装好nodejs之后，对npm安装的全局模块所在路径以及缓存所在路径，进行环境配置。npm install express [-g]（后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppDataRoaming\npm】路径中，占C盘空间。所以我们可以运行下面两个命令更换全局安装路径：
如下图，我们再来关注一下npm的本地仓库，输入命令npm list -global
基于nodejs，利用淘宝npm镜像安装相关依赖。由于国外使用npm会很慢，这里推荐使用淘宝nmp镜像
输入命令npm config list 显示所有配置信息，我们关注一个配置文件
检查一下镜像站命令行不行：
注意，此时默认的模块E:\workspace\npm\nodejs\node_modules, 目录将会改变为E:\workspace\npm\nodejs\node_global\node_modules 目录，
如果直接运行npm install等命令会报错的。
我们需要做1件事情：
增加环境变量NODE_PATH 内容是：E:\workspace\npm\nodejs\node_global\node_modules（参考jdk配置）,注意，以下操作需要重新打开CMD让上面的环境变量生效
命令：
对path环境变量添加E:\workspace\npm\nodejs\node_global (这个路径应该是包含vue.cmd的那个目录)
重新打开CMD，并且测试vue是否使用正常
