Vue的cli3 && cli2 脚手架的安装 && yarn包管理工具的使用@stage3---week2--dat4-2

本文链接：https://blog.csdn.net/weixin_45549481/article/details/101527778

cli

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

什么是cli?

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

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

yarn

yarn 是什么？
- yarn 是类似于npm的一个包管理器，它是facebook出品
yarn 使用的好处？
- 安全
- yarn 可以保证我们项目中以来的版本的一致性
yarn 安装
安装: $ npm i yarn -g
配置国内镜像源： $ yarn config set registry https://registry.npm.taobao.org
yarn使用命令
- 安装 yarn add 第三方包的名称 -S/-D
- -S 生产环境可以不写，也就是yarn add 第三方模块默认生产环境安装
- -D 开发环境
- yarn init 生成package.json文件
- yarn add xxx
- yarn remove xxx
- yarn 通过package.json来安装项目依赖包

vue的命令

 * create [options] <app-name>                create a new project powered by vue-cli-service
 * add [options] <plugin> [pluginOptions]     install a plugin and invoke its generator in an already created project
 * invoke [options] <plugin> [pluginOptions]  invoke the generator of a plugin in an already created project
 * inspect [options] [paths...]               inspect the webpack config in a project with vue-cli-service
 * serve [options] [entry]                    serve a .js or .vue file in development mode with zero config
 * build [options] [entry]                    build a .js or .vue file in production mode with zero config
 * ui [options]                               start and open the vue-cli ui
 * init [options] <template> <app-name>       generate a project from a remote template (legacy API, requires @vue/cli-init)
 * config [options] [value]                   inspect and modify the config
 * upgrade [semverLevel]                      upgrade vue cli service / plugins (default semverLevel: minor)
 * info                                       print debugging information about your environment

vue create 项目名称使用cli3创建一个项目
vue add 插件名称 vue自动配置插件
vue ui 使用GUI进行vue项目的安装， GUI指的是图形化界面
vue init 模板名称项目名称使用cli2创建一个项目

cli3的安装

cli3-repl的安装

$ vue create 项目名

cli3-gui 的安装

$ vue ui

cli2 的安装

cli2-standard

$ vue init webpack 项目名

cli2-simple

$ vue init webpack-simple 项目名

cli如何使用？
1. cli的安装【推荐使用yarn 】
  - yarn 安装和配置
    - 安装: $ npm i yarn -g
    - 配置国内镜像源： $ yarn config set registry https://registry.npm.taobao.org
2. 验证是否安装成功
  - 命令行输入： $ vue 看是否有东西输出，如果输出命令提示，证明安装成功
3. 创建项目
  - cli3版本创建
    - 命令创建【推荐】
      - $ vue create 项目名称
        手动选择配置
        如果安装node-sass出问题，如何解决：
        先切换成npm源 nrm use npm
        使用cnpm 安装 cnpm i node-sass sass-loader -D
    - 图形界面创建
      - $ vue ui
      - 创建完成的结果和使用命令创建时一样的
    - cli3版本配置介绍
      - please pick a preset( user arrow keys ) 使用键盘上下键来选择一个配置
        default 默认配置
        Manually select features 手动选择配置
        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? 将上面所选的配置保存下来，以备将来的项目使用
  - cli2版本创建
    - 标准版
      - $ vue init webpack project
    - 简易版
      - $ vue init webpack-simple project
分析几个版本的目录
- cli3
  - node_modules 项目的依赖包
    - cli3 webpack配置放在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 浏览器版本的支持
- cli2 标准版
  - build webpack配置
  - config webpack配置
  - node_modules
  - src
    - static 静态资源配置
    - .babelrc 优雅降级配置文件
    - .postcssrc css预处理配置文件
    - .editorconfig 编辑器配置文件
- cli2 简易版
  - src 源代码开发目录
  - webpack.config.js webpack配置文件
学习cli使用
- 读懂项目结构
- 学会创建单文件组件
  - 创建
  - 导出
  - 导入
cli 它是 webpack + es6模块化来集中实现的

es6模块化
- 模块的定义
  const obj = {}
  const fn = function(){}
- 模块的导出
  // 模块的导出有两种形式
  export default //默认导出一个
```
//export // 批量导出，导出多个
```
- 模块的引入
  // 如果是export default 导出
  import xxx from ‘…/xxx.xx’
```
// 如果是export 导出

improt  { xx } from '../xx.xx'  || import * as xx from '../xx.xx'
```

特殊说明

cli3 将webpack配置放在 node_modules,所以Vue并不希望大家去修改这部分webpack配置如果我们将来需要更改webpack配置，那么我们需要在项目根目录下创建一个 vue.config.js文件

单文件组件
- 一个vue文件就是一个组件，有三部分构成
  - template 模板
  - script 选项
  - style 样式
    - scoped
      - 加表示样式只会作用在当前组件 + 自组件
      - 不加那么样式会变成全局样式
- 要求会组件的使用
  - 会创建组件，就是创建vue文件，文件名大写
  - 会导入组件
  - 会注册一个组件