一、概念
1、什么是Vue CLI
如果你只是简单写几个Vue的Demo程序,那么你不需要Vue CLI
如果你在开发大型项目,那么你需要,并且必然需要使用Vue CLI
使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。
如果每个项目都要手动完成这些工作,那无疑效率比较低效,所以通常我们会使用一些脚手架工具来帮助完成
这些事情。
2、CLI是什么意思?
CLI是Command-Line Interface,翻译为命令行界面,但是俗称脚手架.
Vue CLI是-一个官方发布vue.js项目脚手架
使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置.
3、脚手架长什么样子?
可以借助建筑学的脚手架图来做比喻
脚手架.png
二、安装（Vue CLI2）
1、Vue CLI使用前提- Webpack
Vue.js官方脚手架工具就使用了webpack模板
对所有的资源会压缩等优化操作
它在开发过程中提供了一套完整的功能,能够使得我们开发过程中变得高效。
Webpack的全局安装：
npm install webpack -g
2、安装Vue脚手架
//脚手架3的安装方式（cli3）
npm install -g @vue/cli
注意:上面安装的是Vue CL3的版本,如果需要想按照Vue CLI2的方式初始化项目时不可以的。
如果想要使用脚手架2（CLI2）则直接拉取脚手架2（CLI2）的模版即可
npm install -g @vue/cli-init
三、使用脚手架创建项目（CLI2）
1、 创建项目
vue init webpack 项目名称
每一步的解释
1、创建工程
使用cli2创建项目此时会根据这个名称创建一个文件夹存放之后项目的内容该名称也会做为默认的项目名称，但是不包含大些字母
vue init webpack vuecl2test
2、设置工程名称
项目名称不能包含大写字母 （敲回车 默认会使用第一步的文件夹名称）
设置工程名称.png
3、设置工程描述
在此可以设置工程的一些描述
工程描述.png
4、作者信息
在此可以设置作者的一些信息 ! 默认会 从git中读取信息，也可以随便更改
作者信息.png
5、选择构建项目的类型
一般情况选择 Runtime-only 因为 Runtime-only 比 Runtime + Compiler 效率高且代码量少 详细解析 见下 Runtime-only 与 Runtime + Compiler的区别
550CD41BBE0EA0985F4068EE256931E1.png
6、是否使用路由
一般选择是
C000AD337ABFA5E7A2CA9D6C5718E4F3.png
7、是否开启ESLint 检查代码规范
视自己喜好来选择 开启之后如果代码写的不规范 编辑就无法通过
4FACB955EE2A1963B7DF57CE07A2C283.png
8、ESLint 检查代码规范 标准
一般选择第一个
856D31F024C486D5E5A17A3A5AC42381.png
9、是否需要单元测试
单元测试只有极少数公司要求单元测试 一般选择否
6EFD137CF388ED45AE968D7FB97708AD.png
10、e2e测试
一般选择否
CC2AC499B2A9476D9E8E2C1B8312E271.png
11、选择工具
一般选择npm 看个人喜好
5C32B505E965F803414355B0A1ED6B93.png
整体流程图.png
到此为止，cli2 创建项目结束
网友评论