本文主要介绍如何搭建 Vue 的开发环境，最优化的工具实践等。
1. 基础SDK
- 开发语言： 与常规的前端开发语言一样： html/CSS/JS等
- 环境依赖： NodeJS npm cnpm等
- 开发工具： VSCode
2. 搭建开发环境
2.1 Node.js的安装
略过Node.js的安装过程
2.2 安装VSCode
略过安装过程
2.3 安装cnpm
第一步：使用VSCode打开文件夹，使用快捷键Ctrl+ `来打开编辑器自带的终端。
第二步：输入命令，安装cnpm的淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
第三步：之后就可以在环境中直接使用cnpm代替npm命令
2.4 安装vue
输入命令安装稳定版本的vue
cnpm install vue
2.5 安装vue-cli
vue-cli是vue开发的脚手架，帮助开发者快速搭建一个模板化的vue工程。其结构所代表的意义网上介绍较多，不再赘述。
安装脚手架的意义
- 脚手架通过webpack搭建开发环境
- 使用ES6语法
- 打包和压缩JS为一个文件
- 项目文件在环境中编译，而不是浏览器
- 页面自动刷新
安装过程直接执行命令
cnpm install --global vue-cli
vue-cli的安装
3. 初始化一个Vue项目
使用脚手架可以方便的创建vue工程。从起步开始，可以快捷的进行vue工程的创建。
第一步： 执行命令，创建一个vue模板工程。
vue init webpack my-project
创建之前会不断在终端发出配置的询问，按照提示输入自己的配置即可简单定制。
Vue项目的配置过程
第二步： 执行命令，启动项目
cd my-project
npm run dev
此时访问浏览器的http://localhost:8080即可预览模板工程视图。
说明
- vue-cli帮我们建立的模板工程文件结构明晰，主要操作的部分是src下面的组件部分。
- 自带了一个helloworld的实例组件
4. Vue文件该怎么看？
使用VSCode打开hello.vue文件的时候，会提示让你安装Vetur插件，安装插件后，能够很好地适配Vue的开发。
每个Vue文件可以分为三个功能部分。主要是：
- 模板：html部分
- 行为：逻辑的处理(script代码)
- 样式：CSS部分
项目中文件的生效顺序
index.html → main.js → App.vue
