Vue项目快速构建工具（cli2/cli3）使用详解

1. 什么是cli?

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

2. cli目前有哪些版本？

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

3. cli如何使用？

（1）cli的安装

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

安装yarn ：

npm i yarn -g

使用国内镜像加速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和cnpm安装cli3版本

yarn安装

   $ yarn add @vue/cli global

cnpm安装

$ cnpm i  @vue/cli -g

如果我们还想使用cli2的脚手架，那么我们可以在安装一个包，利用yarn和cnpm安装cli2版本

yarn安装

$ yarn add vue-cli global

cnpm安装

$ cnpm i vue-cli -g

但是一个电脑只能装一个，所以若是，我们同时想使用 cli2 和 cli3 怎么办呢？可以按下面安装，装完之后就可以使用cli2了。

$ yarn add @vue/cli-init global

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

（3） 创建项目

cli3版本创建

（1）命令创建 【 推荐 】

$ vue create 项目名称

（2）图形界面创建

 $ vue ui

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

cli2版本创建

（1）标准版

$ vue init webpack 项目名称

（2）简易版

$ vue init webpack-simple 项目名称

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

1. default 默认配置
2. 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.cli版本的目录分析

cli3–目录结构

node_modules 项目的依赖包

cli3webpack配置放在node_modules中

public 静态资源目录（ 生产环境 ）【 这个目录下的静态资源不会被webpack 编译
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 浏览器版本的支持

标签：npm,Vue,cli2,cli,cnpm,yarn,vue,cli3
来源： https://blog.csdn.net/weixin_45014444/article/details/100064912