vue项目的快速构建工具 cli 【脚手架】

什么是cli?

cli是vue提供的一个用来快速构建项目环境的一个工具，底层使用的是webpack

cli目前有哪些版本？

cli2 cli3

cli3对电脑的配置有一定要求

cli如何使用？

cli的安装
npm/cnpm/yarn 都可以使用【 yarn 配置国内镜像】

使用国内镜像加速npm和yarn

npm config set registry=https://registry.npm.taobao.org
yarn config set registry https://registry.npm.taobao.org
下载cnpm：npm install -g cnpm –registry=https://registry.npm.taobao.org

$ yarn add @vue/cli global 这个是cli3的版本
如果我们还想使用cli2的脚手架，那么我们可以在安装一个包

cli3 @vue/cli

cli2 vue-cli

所以一个电脑只能装一个

问题：如果我们同时想使用 cli2 和 cli3 怎么办呢？

$ yarn add @vue/cli-init global

那么你可以使用cnpm继续安装 @vue/cli @vue/cli-init

$ cnpm i @vue/cli -g 这个是cli3的版本
如果我们还想使用cli2的脚手架，那么我们可以在安装一个包
$ cnpm i @vue/cli-init -g

$ cnpm i vue-cli -g

验证是否安装成功
命令行输入： $ vue 看是否有东西输出，如果输出命令提示，证明安装成功

创建项目

cli3版本创建

命令创建

$ vue create project

手动选择配置
如果安装node-sass出问题，如何解决：
先切换成npm源 nrm use npm
使用cnpm 安装 cnpm i node-sass sass-loader -D
图形界面创建

$ vue ui

cli3两种形式创建的结果是一样的

cli2版本创建

标准版

$ vue init webpack project

简易版

$ vue init webpack-simple project

please pick a preset( user arrow keys ) 使用键盘上下键来选择一个配置

default 默认配置

Manually select features 手动选择配置

配置指的是配置webpack

babel 优雅降级 es6 —> es5

eslint js语法检测

CSS Pre-processors css 预处理语言 less sass/scss stylus

Linter / Formatter eslint / jslint

Unit Testing 单元测试

E2E Testing 端到端的测试

In dedicated config files 将所选的每一个选项用一个文件来保存（配置）

PWA (web app ) 在浏览器中使用的app

Save this as a preset for future projects? 将上面所选的配置保存下来，以备将来的项目使用

4.分析几个版本的目录

cli3

node_modules 项目的依赖包
cli3webpack配置放在node_modules中
public 静态资源目录（生产环境）【这个目录下的静态资源不会被webpack 编译】
img
js
css
favicon.ico 项目标题的logo
index.html 根实例组件的模板，也是整个项目的容器
src 源代码开发目录（也是开发者主要开发的目录文件夹）
assets 开发环境的静态资源目录（这个目录中的资源会被webpack编译）
assets中如果图片的大小 > 4k 我们就原样拷贝到dist目录
assets中如果图片的小小 < 4K 我们就将这个图片转化成 base64
base64它是我们前端处理图片的一种形式，将图片路径进行编码，它可以减少一次ajax请求，达到前端性能优化的一个方案，但是base64有一个弊端，这个弊端就是会污染html结构
components 组件存储目录
xxx.vue文件单文件组件一个vue文件就是一个组件
组成部分
template模板（必须写的）
script脚本（可写可不写）
style样式（可写可不写）
scoped 作用是可以减少命名冲突，规定一个样式的作用域
.gitignore git上传忽略文件配置
babel.config.js 优雅降级配置文件用来将es6 --> es5
package.json 整个项目的依赖配置文件
README.md 整个项目启动的说明性文件
yarn.lock 真个项目的依赖性文件的信息
postcss.config.js 项目css预处理的配置
.browserslistrc 浏览器版本的支持