背景
年前写了一个管理系统，由于本人以前是做服务端的，已经十几年不写前端了，再加上项目工期比较赶，就先用传统的方式实现了系统。现在空闲了研究一下前后端分离的技术，经过查看资料最终选择使用小巧灵活的Vue来做前端技术。下面就跟我一起来搭建Vue的开发环境，踩过的坑也会一一跟大家分享。
概述
- vue依赖node.js，所以先安装node.js，我是安装的最新版本
- node安装需要做一些配置
- 安装vue和脚手架，这里会讲一下不同版本的区别
- 以最新版本脚手架来创建一个vue工程
node.js安装
- 如何选择版本，我的是win10系统，选择的是当前发布的最新版本，大家也可以选择长期稳定版本。
- 长期支持版本：版本号为偶数，更新没有那么频繁稳定，适合生产环境或者跟新版本受限制的环境。
- 当前发布版：版本号为奇数，更新迭代频繁，稳定之后合并到长期支持版，可以当作开发测试版。
- 奇偶看大版本，前者是14，后者是15。大家别看小版本号。
- 安装过程可以选择安装路径，后面的一路next到底。下图的附加工具可以选择不安装，安装的话需要3GB的磁盘空间，耗时比较大，我没有安装。
- 安装完成后，执行node -v和npm -v命令查看安装版本
- node的配置：node默认的配置在C盘当前用户的目录下的.npmrc
- 进入到我们安装的node的目录下新建node_cache，node_global两个文件夹，在node_global中新建node_modules，用户存放安装的工具。开始里面都是空的，我这里面做了工具安装，所以有东西。
- 配置环境变量，系统变量中配置NODE_PATH和path中添加node_global。
- 修改用户变量中npm，指向node安装目录中的node_global。
- 设置global和cache：这样我们安装的工具就会放到指定位置。
- 安装npm的国内淘宝镜像cnpm，解决npm国外资源访问受限问题。
npm install -g cnpm --registry=registry.npm.taobao.org
安装Vue及相关工具
- 安装vue全局包：cnpm install -g vue
- 安装webpack：cnpm install -g webpack
- 安装express：cnpm install -g express
- 安装vue脚手架cli：cnpm install @vue/cli -g(这是安装3.X以上版本)，cnpm install vue-cli -g(这是安装2.X版本)
创建Hello-world工程
- 2.X脚手架使用
- 创建工程：vue init webpack demo
- 启动工程：npm install // 安装基础模块，npm run dev // 运行
- 3.X以后版本使用
- 创建工程：vue create demo
- 启动工程：npm install，npm run serve
- 下面是我选择配置创建的一个demo，做完如下选择就创建了一个基本的vue工程了。
- 工程目录如下：
