概述:
vue-cli作用有哪些:
1.快速生成本地目录结构
2.本地开发调试
3.代码部署
4.热加载，方便测试
5.单元测试
安装
1.安装node环境
- 官网下载可执行文件，按照一般软件安装*
node-v //查看版本信息
2.安装npm 环境(一般会随着node安装，自带)
*npm : node包管理器(Node Package Manager) *
npm install npm -g //安装
npm -v //查看版本信息
作用：
允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用
3.安装vue-cli 环境
安装
vue-cli 2版本安装方式
npm install -g vue-cli查看版本信息
vue --version
vue -V查看常用功能
vue查看模板类型
vue list
模板名称(官方5种模板)：
- webpack-一个全面的webpack+vue-loader的模板，功能包括热加载，linting,检测和CSS扩展。
- webpack-simple-一个简单webpack+vue-loader的模板，不包含其他功能，让你快速的搭建vue的开发环境。
- browserify-一个全面的Browserify+vueify 的模板，功能包括热加载，linting,单元检测。
- browserify-simple-一个简单Browserify+vueify的模板，不包含其他功能，让你快速的搭建vue的开发环境。
- simple-一个最简单的单页应用模板。
4.在目标文件夹，初始化项目
语法:
例：初始化项目 使用webpack模板 创建项目文件夹
vue init webpack <项目文件夹名称>
如果版本为3.0以上，需要使用2.0命令的话，会报错
Command vue init requires a global addon be installed.
需要 全局安装一个桥接工具
npm install -g @vue/cli-init and try again
详细格式：
vue init <模板名称> <项目名称>
初始化后，配置信息
- Project name :
项目名称 ，不能使用占用字，如：webpack - Project description:
项目描述，默认为A Vue.js project,直接回车，不用编写。 - Author：
作者，如果你有配置git的作者，他会读取 - 构建模式：
Runtime+Compiler - Install vue-router?
是否安装vue的路由插件 - Use ESLint to lint your code?
是否用ESLint来限制你的代码错误和风格 - setup unit tests with ?
是否需要安装单元测试工具。 - Setup e2e tests with Nightwatch?
是否安装e2e来进行用户行为模拟测试。 - 安装模块方式
手动安装
完成后会提示(to get started:)
cd 项目名称
npm run dev
通过命令行中输入，完成跳转文件，开启服务器 (ctrl+C退出服务器)
vue-cli 2与 vue-cli3的区别
说明：
vue-cli 2 与 vue-cli 3 是vue2.x的不同版本的脚手架工具
vue-cli 3是 vue-cli 2的升级版本
Vue-cli3 目录结构与配置方式、运行，不同于vue-cli2
安装：
npm install @vue/cli -g
如果全局安装了vue-cli2则需要先卸载，再安装vue-cli3
npm uninstall vue-cli -g
npm install @vue/cli -g
通过 vue -V 查看是否安装3.0版本成功
创建项目：
vue create project-name
按提示选择基本配置
根据提示信息配置：
选择预制
1.默认 (Babel+ESLint) 的设置
2.手动选择功能 ( Manually select features )
手动选择功能列表：
（通过上下键切换，空格确认/取消）
- Babel : 将ES6编译成ES5
- TypeScript: javascript类型的超集
- Progressive Web App (PWA) Support: 支持渐进式的网页应用程序
- Router:vue-router
- Vuex: 状态管理
- CSS Pre-processors: CSS预处理
- Linter / Formatter: 开发规范
- Unit Testing: 单元测试
- E2E Testing: 端到端测试
启动项目
npm run serve
手动创建 vue.config.js
区别于cli2环境变量通过（NODE_ENV）区分开发、测试、生产
cli3环境变量都在独立文件中（.env.test 、.env.development、.env.production）
在 package.json 的 scripts 命令中添加对应的 mode
'serve':'vue-cli-service serve --mode development',
'build':'vue-cli-service build --mode production',
'lint':'vue-cli-service lint --mode test'
