Vue CLI

一、什么是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` 的运行效果将会跟 `[email protected]` 相同

2、初始化

官网:https://cli.vuejs.org

• 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