使用Vue-Cli创建项目模板

Vue-Cli 3创建（版本3与版本2不同）

安装

两种方式，使用npm或者yarn，注意是全局安装

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装之后，可以检查是否安装成功，使用命令vue --version或者vue

创建一个项目

有两种方式，一种是命令行，一种是图形界面创建

命令行操作

选择一个地方（一般用桌面）来创建你的项目

vue create vue-demo

接下来需要你选择是默认的配置还是自己手动选择想要的配置，方向键操作，不赘述。

问答题做完后便是自动下载安装，需要耐心等待。

项目目录

使用图形界面创建

vue ui

会自动打开浏览器进入如下界面

进入主页，选择合适的路径比如桌面创建你的项目

过程与用命令行创建是一致，只不过更加方便直观了

这个来选择配置比用命令行方便了不少，不容易出错。

选好后就耐心等待咯。

用这个开发是什么感觉呢？一个字：舒服！

可以花点时间多点一点，瞧一瞧。

Vue-Cli 2版本

$ npm install -g vue-cli
$ vue init webpack my-project

得到的目录结构会与新版有一些不同，更为繁冗。

项目结构比如：

|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- utils.js                     // 构建工具相关
|   |-- vue-loader.conf.js           // webpack loader配置
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置,构建开发本地服务器
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|   |-- test.env.js                  // 测试脚本的配置
|-- src                              // 源码目录
|   |-- components                   // vue所有组件
|   |-- router                       // vue的路由管理
|   |-- App.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件，加载各种公共组件
|-- static                           // 静态文件，比如一些图片，json数据等
|-- test                             // 测试文件
|   |-- e2e                          // e2e 测试
|   |-- unit                         // 单元测试
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .eslintignore                    // eslint检测代码忽略的文件（夹）
|-- .eslintrc.js                     // 定义eslint的plugins,extends,rules
|-- .gitignore                       // git上传需要忽略的文件格式
|-- .postcsssrc                      // postcss配置文件
|-- README.md                        // 项目说明，markdown文档
|-- index.html                       // 访问的页面
|-- package.json                     // 项目基本信息,包依赖信息等

所以，我选择Vue-Cli 3