Vue环境安装并初始化一个测试项目用例

1.首先安装node，因为开发的时候需要node.js的环境（比如需要使用node的包管理npm），在官网根据自己操作系统的版本进行选择安装：https://nodejs.org/zh-cn/download/

2.安装git，这一步不是必须的，笔者习惯用git管理自己的代码。git的下载也可以在官网根据版本选择下载：https://git-scm.com/downloads。关于不熟悉git的读者，可以移步去看廖雪峰老师的git教程：https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000

3.安装vue的脚手架工具（vue-cli），运行命令npm install --global vue-cli 进行全局安装。（脚手架可以简单理解为：输入简单的命令就可以帮你快速搭建项目的运行环境并做一些初始化工作，你只需要关注业务逻辑即可）

4.做好上面步骤之后，进入工作目录，运行命令：vue init webpack Test 。这时候可能会出现如下几个选择信息：

1. Project Name 书写项目的名称（小写）
2. Project description 书写项目的描述信息
3. Author 书写作者
4. 选择编译方式（Runtime+Complier运行时和普通情况下编译，Runtime-only运行时编译）建议选择第一种
5. Install vue-router 是否安装路由（建议安装）
6. Use ESLint to lint your code 是否使用eslint对代码工整度进行检测（建议使用），并选择Standard规范
7. Set up unit tests 是否安装单元测试
8. Setup e2e tests with Nightwatch 是否安装e2e测试
9. Should we run " npm install " for you after the project has been created 选择包管理工具（NPM和Yarn）

5.做好第四步的选择之后，脚手架工具就会自动地去下载依赖构建项目，当项目安装完成之后，进入Test目录，运行npm run dev即可运行项目，通过访问http://localhost:8080可以访问项目

6.简单介绍一下脚手架安装的项目目录结构：

1. package.json    项目的依赖包信息
2. package-lock.json    确定依赖包的版本，用于团队编程的统一
3. index.html    项目首页文件
4. .eslintrc.js     配置代码规范
5. .eslintignore    写在这个文件中的文件会被规范检测忽略
6. .editorconfig    编辑器的配置
7. .postcssrc.js  postcss的配置项
8. static    存放静态资源
9. node_modules    存放依赖的包
10. src    存放项目的源代码
    1. main.js     项目的入口文件
    2. App.vue        项目的根组件
    3. router    存放路由文件
    4. components    存放项目使用的组件
    5. assets    存放资源
11. config    项目的配置文件
    1. index.js     基础的配置信息
    2. dev.env.js     开发环境的配置信息
    3. prod.env.js     生产环境的配置信息
12.     build   项目打包的配置内容