Vue快速构建项目环境工具---cli

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

2. cli目前有哪些版本？
   cli2 cli3
   cli3对电脑的配置有一定要求

3. cli如何使用？

   cli的安装
   npm/cnpm/yarn 都可以使用

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

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

   如果还有问题：
   那么你就不要使用cli3了，你可以单独安装cli2
   $ cnpm i vue-cli -g

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

如果想同时使用cli2和cli3 必须安装一个调节工具包
cnmp i @vue/cli-init -g

3. 创建项目
   cli3版本创建

   1.命令创建 【 推荐 】
   $ vue create project
   有的可能会出现让你切换淘宝镜像源 输入y就可以了

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

   1.default 默认配置

    babel 优雅降级 es6 --->es5         eslint js语法检测
   

   2.Manually select features 手动选择配置

   选择手动配置，回车

   Press to select, to toggle all, to invert selection 空格是选择 a是全选 i是反选

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

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

   Unit Testing 单元测试

   E2E Testing 端到端的测试

选择Babel和CSS Pre-processors css，回车

选择一种css预处理器：node-sass

然后出现：你是否想要将刚才的配置放在一个单独的文件中还是放在package.json文件中 （使用上下箭头）选择第一种
In dedicated config files 将所选的每一个选项用一个文件来保存（ 配置 ）

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

save preset as:1903 将现在的配置命名

然后出现：Pick the package manager to use when installing dependencies: (Use arrow keys)选择一个包管理器，选择yarn就好了

我们cli3 使用的包管理器器建议 是 yarn 大家一定要记得配置国内镜像源

这个过程也就是安装node_modules的过程

安装成功

输入命令：cd cli3_shell_demo/进入这个文件夹，通过package.json可以得知如何启动项目

“serve”: “vue-cli-service serve”,
开发环境启动 项目不可以使用
“build”: “vue-cli-service build”
生产环境启动 项目可以直接使用

启动项目：$yarn serve

App running at: app运行在下面的端口上，点击连接

• Local: http://localhost:8081/

• Network: http://10.31.161.69:8081/

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

2.图形界面创建
$ vue ui

然后弹出一个页面

点击create创建一个新项目
写入文件名，选择yarn包管理器，点击下一步

选择一套预设，选择手动配置项目，点击下一步

选择babel和CSS预处理器，点击下一步

然后选择stylus,点击创建项目

保存为新预设，选择不保存预设,按回车就可以了，这时一个图形化界面就会出现了

cli2 版本创建

标准版
$ vue init webpack project

简易版
$ vue init webpack-simple project

3.分析几个版本的目录

cli3

目录

• node_modules 项目的依赖包
  cli3webpack配置放在node_modules中

---

• public 静态资源目录（ 生产环境 ）【 这个目录下的静态资源不会被webpack 编译 】
  img
  js
  css
  favicon.ico 项目标题的logo
  index.html 根实例组件的模板，也是整个项目的容器

---

• src 源代码开发目录（ 也是开发者主要开发的目录文件夹 ）

  assets 开发环境的静态资源目录 （ 这个目录中的资源会被webpack编译）

  1.assets中如果图片的大小 > 4k 我们就原样拷贝到dist目录
  2.assets中如果图片的小小 < 4K 我们就将这个图片转化成 base64
  3.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 浏览器版本的支持

cli2 标准版

build webpack配置
config webpack配置
node_modulessrcstatic 静态资源配置
js
css
img
.babelrc 优雅降级配置文件
.postcssrc css预处理配置文件
.editorconfig 编辑器配置文件

cli2简易版

src 源代码开发目录webpack.config.js webpack配置文件