一、什么是CLI
-
CLI是Command-Line Interface，翻译过来就是命令行，俗称脚手架。 -
Vue CLI是官方发布vue.js项目脚手架。
二、为什么要用脚手架
- 使用
Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。 - 如果外面每个项目都要手动完成这些工作，那无疑效率比较低效，所以通常我们会使用一些脚手架工具来帮助我们完成这些工作。
三、Vue CLI使用前提
1、安装NodeJS
可以通过官网直接下载- http://nodejs.cn/download/
2、检测安装版本
- 默认情况下安装了
Node和NPM -
Node环境要求8.9以上或者更高版本
图片.png
- cnpm安装
由于国内直接使用npm的官方镜像非常慢，这里推荐使用淘宝npm镜像。
这里可以使用淘宝定制的cnpm（gzip压缩支持）命令行工具代替默认的npm：
npm install -g --registry=https://registry.npm.taobao.org
这样就可以使用cnpm命令来安装模块了：
cnpm install xxx
3、webpack安装
-
webpack全局安装
npm install webpack -g
-
wabpack作用
1、对所有资源会进行压缩等优化操作
2、在开发的过程中会提供一套完整的功能，能够使我们的开发工程变的更加的高效
四、Vue CLI的使用
1、安装Vue脚手架
npm install -g @vue/cli
图片.png
注意：如果需要按照Vue CLI的方式初始化项目则需要进行如下操作
npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
2、初始化
- Vue CLI2初始化项目
vue init webpack 项目名称 - Vue CLI3初始化项目
vue create 项目名称
五Vue CLI2详解
图片.png
-
Project name xxx:项目名称，不能包含大写 -
Project description:项目描述信息 -
Author:作者信息，默认会从git中提取 -
Vue build:选择默认的；这里暂时不做介绍，后面补充上来 -
Install vue-router:这里暂时选择no，后面需要的话再自行安装 -
Use ESLint to lint your code?:ESLint检查代码规范，看自己情况选择是否安装 -
Pick an ESLint preset:选择一种代码规范，这里选择的是默认 -
Set up unit tests:单元测试，看自己选择，我们这里选择的是no -
Set e2e tests with Nightwatch?:e2e测试，end-to-end；安装Nightwatch;是一个利用selenium或webdriver或phantomjs等进行自动化测试的框架 -
Should we run ...,选择哪种管理工具，这里我们选择的是npm
图片.png
网友评论