cli配置和分析目录

cli

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

​ 底层 webpack

​ React 第一天

​ Vue中我们注重应用

在市场上
cli2 【 扩展 】
cli3 【 大纲 】

1. 什么是cli?

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

2. cli目前有哪些版本？

   cli2 cli3

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

3. cli如何使用？

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

      $ cnpm 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
      

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

         cli3 @vue/cli

         cli2 vue-cli 【 不要安装 】

         所以一个电脑只能装一个

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

      2. $ yarn add @vue/cli-init global

      如果有的同学安装3失败了，
      那么你可以使用cnpm继续安装 @vue/cli @vue/cli-init

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

      如果还有问题：
      那么你就不要使用cli3了，你可以单独安装cli2 【 先卸载cli3,重启电脑 】

       `$ cnpm i vue-cli -g`
      

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

   3. 创建项目

      cli3版本创建

      1. 命令创建 【 推荐 】
         $ vue create project

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

      2. 图形界面创建
         $ vue ui

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

      cli2版本创建

      1. 标准版
         $ vue init webpack project
      2. 简易版
         $ vue init webpack-simple project

   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? 将上面所选的配置保存下来，以备将来的项目使用

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

**分析几个版本的目录**

**cli3**

**目录**

- node_modules  项目的依赖包
  - **cli3 webpack配置放在node_modules中**
- public  静态资源目录（ 生产环境 ）【 这个目录下的静态资源不会被webpack 编译 】   //里面的文件会被原样打包到dist文件下，与index.html同级
  - 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  浏览器版本的支持

​	

**cli2 标准版**

​	build  webpack配置

​	config  webpack配置

​	node_modules

​	src

​	static 静态资源配置

​		js

​		css

​		img

​	.babelrc  优雅降级配置文件

​	.postcssrc  css预处理配置文件

​	.editorconfig  编辑器配置文件



​	

**cli2 简易版**

​	src 源代码开发目录

​	webpack.config.js webpack配置文件