vue cli3项目搭建流程

一、关于vue cli3和vue cli2 以及vue2.x vue3.x

vue cli是安装vue的脚手架工具，也就是官方命令行工具，可以用命令快速创建项目。

注意，vue cli3是vue cli2的升级版，并不是vue3.x

二、旧版(vue cli2)安装及创建项目

2.1 搭建vue的开发环境，安装脚手架工具

$ npm install --global vue-cli

2.2  创建项目 (cd到对应项目内部)

2.2.1 创建项目 (完整结构)

$ vue init webpack projectName

2.2.2 创建项目(simple)

$ vue init webpack-simple projectName

2.3 运行项目

$ cd  projectName 

$ npm install

$ npm run dev

三、vue cli3安装及创建项目

3.1 搭建vue的开发环境，安装脚手架工具

$ npm install -g @vue/cli

或者：

$ yarn global add @vue/cli

3.2 创建项目

$ vue create projectName 

3.3 运行项目

$ npm run serve

3.4 编译项目

$ npm run build

3.5 vue cli3 图形化界面创建项目

$ vue ui

四、项目目录结构分析

4.1 vue cli2目录结构

|-- 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                  // 生产环境变量

|-- src                              // 源码目录

|  |-- components                  // vue公共组件

|  |-- router                      // vue的路由管理

|  |-- App.vue                      // 页面入口文件

|  |-- main.js                      // 程序入口文件，加载各种公共组件

|-- static                          // 静态文件，比如一些图片，json数据等

|-- .babelrc                        // ES6语法编译配置

|-- .editorconfig                    // 定义代码格式

|-- .gitignore                      // git上传需要忽略的文件格式

|-- .postcsssrc                      // postcss配置文件

|-- README.md                        // 项目说明

|-- index.html                      // 入口页面

|-- package.json                    // 项目基本信息,包依赖信息等

4.2 vue cli3 项目目录结构

3.0的目录比2.0简洁了很多，没了build和config等目录。若需要其他配置则需要自己手动配置

|-- src                              // 源码目录

|  |-- components                  // vue公共组件

|  |-- router                      // vue的路由管理

|  |-- App.vue                      // 页面入口文件

|  |-- main.js                      // 程序入口文件，加载各种公共组件

|-- public                          // 静态文件，比如一些图片，json数据等

|  |-- favicon.ico                      // 图标文件

|  |-- index.html                      // 入口页面

|-- vue.config.js                          // 是一个可选的配置文件，包含了大部分的vue项目配置

|-- .babelrc                        // ES6语法编译配置

|-- .editorconfig                    // 定义代码格式

|-- .gitignore                      // git上传需要忽略的文件格式

|-- .postcsssrc                      // postcss配置文件

|-- README.md                        // 项目说明

|-- package.json                    // 项目基本信息,包依赖信息等