什么是vue-cli
vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目以及更改对相应的webpack配置
安装vue
全局安装
npm install vue -g
局部安装
npm install vue
我这里采用的是全局安装
安装vue-cli脚手架构建工具
脚手架2.x以上
npm install vue-cli -g
脚手架3.x以上
npm install -g @vue/cli
如果在这里你已经安装完 vue-cli3.x，那么你就不能使用 vue-cli2.x 版本
因为vue-cli3.x 和旧版使用了相同的vue命令，所以 vue-cli2.x 被覆盖了就不能使用2.x版本中的有些命令
但是如果你仍然想使用旧版本的vue init功能，那么此时就需要全局安装一个桥接工具
npm install -g @vue/cli-init
到这一步之后就可以通过已经安装好的脚手架搭建项目了
vue-cli2.x 创建项目
首先创建一个文件夹，来保存我们的项目
cd desktop
mkdir vue-cli
cd vue-cli
初始化项目
vue init webpack 项目名称
我这里创建的项目
vue init webpack test2
如果出现这个不要慌张，这个是因为电脑没有全局配置git造成的，忽略就好
此时会依次出现下面的内容
项目名称
? Project name (vue)
项目描述
? Project description (A Vue.js project)
源码解析准备
? Vue build
- Runtime+Compiler
- Runtime Only
是否安装路由
? Install vue-router?
检验你的代码是否符合规范
? Use ESLint to lint your code?
项目单元测试
? Set up unit tests (Y/n)
自动化测试
? Setup e2e tests with Nightwatch?
使用npm还是yarn
? Should we run `npm install` for you after the project has been created? (recommended)
- Yes, use NPM
- Yes, use Yarn
- No, I will handle that myself
我的配置
切换到项目中
cd test2
目录结构如下
执行启动命令
npm run dev
查看结果： http://localhost:8080
目录解析
webpack相关的配置
- build
- config
依赖的node相关模块
- node_modules
写代码的地方
- src
es代码相关转化配置
- .babelrc
项目文本相关配置
- .editorconfig
- .gitgnore
css相关转化配置
- postcsssrc
模块（项目）的描述文件
- package.json
记录当前状态下实际安装的各个npm package的具体来源和版本号。
- package-lock.json
