一、关于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 // 项目基本信息,包依赖信息等
网友评论