Vue--工具--@vue/cli

桃扇骨 2022-11-21 11:56 371阅读 0赞

原文网址：[Vue--工具--@vue/cli\_IT利刃出鞘的博客-CSDN博客][Vue--_--_vue_cli_IT_-CSDN]

# **其他网址** #

[Vue官网][Vue]

# **简介** #

**概述**

> Vue CLI 3.0后的包名称由 vue-cli 改成了 @vue/cli。
> 
> Vue-cli是Vue官方提供的用于初始化Vue项目的脚手架工具。使用Vue-cli有以下几大优势
> 
> 1.  Vue-cli是一套成熟的vue项目架构设计，会跟着Vue版本的更迭而更新
> 2.  Vue-cli提供了一套本地的热加载的测试服务器
> 3.  Vue-cli集成了一套打包上线的方案，可使用webpack或Browserify等构建工具

**参数**

> 下边这些参数，命令都是vue xxx，而不是vue-cli
> 
> <table> 
>  <tbody> 
>   <tr> 
>    <td style="width:140px;"><strong>参数</strong></td> 
>    <td style="width:509px;"><strong>作用</strong></td> 
>   </tr> 
>   <tr> 
>    <td style="width:140px;">build</td> 
>    <td style="width:509px;">制作一个项目原型（不常用）</td> 
>   </tr> 
>   <tr> 
>    <td style="width:140px;">-h/--help</td> 
>    <td style="width:509px;">查看命令用法</td> 
>   </tr> 
>   <tr> 
>    <td style="width:140px;">list</td> 
>    <td style="width:509px;">列出可用的官方模板</td> 
>   </tr> 
>   <tr> 
>    <td style="width:140px;">-V/--version</td> 
>    <td style="width:509px;">查看vue-cli版本</td> 
>   </tr> 
>  </tbody> 
> </table>

**详述**

> 这份文档是对应@vue/cli。老版本的 vue-cli 文档请移步[这里][Link 1]。
> 
> Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：
> 
>  *  通过 @vue/cli 实现的交互式的项目脚手架。
>  *  通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
>  *  一个运行时依赖 (@vue/cli-service)，该依赖：
>     
>      *  可升级；
>      *  基于 webpack 构建，并带有合理的默认配置；
>      *  可以通过项目内的配置文件进行配置；
>      *  可以通过插件进行扩展。
>  *  一个丰富的官方插件集合，集成了前端生态中最好的工具。
>  *  一套完全图形化的创建和管理 Vue.js 项目的用户界面。
> 
> Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

**该系统的组件**

> Vue CLI 有几个独立的部分——如果你看到了我们的[源代码][Link 2]，你会发现这个仓库里同时管理了多个单独发布的包。
> 
> **[\#][Link 3]CLI**
> 
> CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目，或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。我们会在接下来的指南中逐章节深入介绍。
> 
> **[\#][Link 4]CLI 服务**
> 
> CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包，局部安装在每个 @vue/cli 创建的项目中。
> 
> CLI 服务是构建于 [webpack][] 和 [webpack-dev-server][] 之上的。它包含了：
> 
>  *  加载其它 CLI 插件的核心服务；
>  *  一个针对绝大部分应用优化过的内部的 webpack 配置；
>  *  项目内部的 vue-cli-service 命令，提供 serve、build 和 inspect 命令。
> 
> 如果你熟悉 [create-react-app][] 的话，@vue/cli-service 实际上大致等价于 react-scripts，尽管功能集合不一样。
> 
> [CLI 服务][CLI]章节涵盖了它的具体用法。
> 
> **[\#][Link 5]CLI 插件**
> 
> CLI 插件是向你的 Vue 项目提供可选功能的 npm 包，例如 Babel/TypeScript 转译、ESLint 集成、单元测试和 end-to-end 测试等。Vue CLI 插件的名，@vue/cli-service 实际上大致等价于 react-scripts，字以 @vue/cli-plugin- (内建插件) 或 vue-cli-plugin- (社区插件) 开头，非常容易使用。
> 
> 当你在项目内部运行 vue-cli-service 命令时，它会自动解析并加载 package.json 中列出的所有 CLI 插件。
> 
> 插件可以作为项目创建过程的一部分，或在后期加入到项目中。它们也可以被归成一组可复用的 preset。我们会在[插件和 preset][preset] 章节进行深入讨论。

# vue-cli2 #

**其他网址**

> [Vue命令行工具vue-cli - 小火柴的蓝色理想 - 博客园][Vue_vue-cli - _ -]

**安装**

> npm install -g vue-cli
> 
>  *  一定要在全局模式下安装vue-cli，否则无法使用vue命令
>  *  上边命令默认安装最新版vue-cli，可自行指定版本：npm install -g vue-cli@版本号
> 
> 安装完之后，可以验证是否安装成功：
> 
>  *  vue //会打印Vue-Cli帮助信息
>  *  vue -V //打印Vue-Cli版本

**创建项目**

> vue init webpack my-project
> 
> 进入工程目录安装依赖：npm install
> 
> 目录结构：
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70][]

**运行项目**

> npm run dev
> 
> 此时会自动打开网页：localhost:8080

**项目部署**

> npm run build
> 
> 生成的dist目录，就是打包构建后的项目目录

# @vue/cli3 #

**其他网址**

> [一份超级详细的Vue-cli3.0使用教程\[赶紧来试试！\]][Vue-cli3.0]

## **VueCli2和@vue/cli3的区别** ##

> 1.  **命令**
>     
>     1.  **创建项目**
>         
>          *  3.0：vue create project\_name
>          *  2.0：vue init webpack project\_name
>     2.  **启动项目**
>         
>         1.  3.0：npm run serve
>         2.  2.0：npm run dev
> 2.  **项目配置**
>     
>     1.  3.0：设计原则是 “0配置”。
>         
>         1.  移除根目录下的build和config目录。
>         2.  提供vue ui 命令，提供了可视化配置，更加人性化。
>         3.  可在根目录下创建 vue.config.js 文件进行配置。
>     2.  2.0：使用配置文件配置
>         
>         1.  根目录下的build和config目录下的文件进行webpack、多环境和打包等配置。
> 3.  静态文件的位置
>     
>     1.  3.0：移除 static 文件夹，新增public文件夹，且index.html移动到public中
>     2.  2.0：在static文件夹中
> 4.  router路径
>     
>     1.  3.0：有router.js单独文件
>     2.  2.0：在router文件夹下
> 5.  webpack版本
>     
>     1.  3.0：基于 webpack 4
>     2.  2.0：基于 webpack 3

## 命令 ##

跟下边的“@vue/cli4”相同

## 配置文件 ##

跟下边的“@vue/cli4”相同

## 创建项目（命令行） ##

**1. 创建工程**

>     vue create hello-cli3
> 
>  *  hello-cli3是文件夹名字，若不存在会**自动创建**，若存在会安装到那个文件夹中。
>  *  项目名不允许含有大写字母
>  *  vue-cli2.x需要自己手动创建一个文件夹。

**2. 选择模板**

>  *  一开始只有两个选项: default(默认配置)和Manually select features(手动配置)
>     
>      *  默认配置只有babel和eslint其他的都要自己另外再配置，所以我们选第二项手动配置。
>  *  在每次选择手动配置之后，会询问你是否保存配置，也就是图片中的koro选项，这样以后我们在进行创建项目的时候**只需使用原先的配置**就可以了，而不用再进行配置。
> 
> ![493386922fe7a9b192266297e62c11ab.png][]

**3. 选择配置**

>  *  根据你的项目需要来选择配置，空格键是选中与取消，A键是全选
>     
>         ? Check the features needed for your project:
>                (Press <space> to select, <a> to toggle all, <i> to invert selection) 
>           // 检查项目所需的功能:(按<space>选择，<a>切换所有，<i>反转选择）
>           >( ) TypeScript                                 // 支持使用 TypeScript 书写源码
>            ( ) Progressive Web App (PWA) Support          // PWA 支持
>            ( ) Router                                     // 支持 vue-router
>            ( ) Vuex                                       // 支持 vuex
>            ( ) CSS Pre-processors                         // 支持 CSS 预处理器。
>            ( ) Linter / Formatter                         // 支持代码风格检查和格式化。
>            ( ) Unit Testing                               // 支持单元测试。
>            ( ) E2E Testing

**4. 选择css预处理器**

>  *  如果你选择了Css预处理器选项，会让你选择这个
>     
>         ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
>           // 选择CSS预处理器（默认支持PostCSS，Autoprefixer和CSS模块）：
>           > SCSS/SASS
>             LESS
>             Stylus

**5. 是否使用路由的history模式（若选history：页面路由不使用 \#）**

>  *  这里我建议选No，这样打包出来丢到服务器上可以直接使用了，后期要用的话，也可以自己再开起来。
>  *  选yes的话需要服务器那边再进行设置。
>     
>         Use history mode for router? (Requires proper server setup for index fallback in production) 
>           // 路由使用history模式?(在生产环境中需要适当的服务器设置以备索引)

**6. 选择Eslint代码验证规则**

>     > ESLint with error prevention only
>       ESLint + Airbnb config
>       ESLint + Standard config
>       ESLint + Prettier
> 
> 可选择ESLint + Standartd

**7. 选择什么时候进行代码规则检测**

>  *  建议选保存就检测，等到commit的时候，问题可能都已经积累很多了。
>  *  之前写了篇[VsCode保存时自动修复Eslint错误][VsCode_Eslint]推荐一下。
>     
>         ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>           >( ) Lint on save // 保存时检测
>            ( ) Lint and fix on commit // commit时检测和修复

**8. 选择e2e测试**

>     ? Pick a E2E testing solution: (Use arrow keys)
>     ❯ Cypress (Chrome only) 
>       Nightwatch (Selenium-based)

**9. 把babel,postcss,eslint等配置文件放哪**

>     ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
>       > In dedicated config files // 独立文件放置
>         In package.json           // 放package.json里
> 
> 通常我们会选择独立放置，让package.json干净些

**10. 是否保存配置**

>     // 是否保存以便下次继续使用这套配置
>     Save this as a preset for future projects? (Y/n) 
>     // 若选保存，则会让你写一个配置的名字：
>     Save preset as:  name

**11. 下载依赖**

**12. webpack配置的目录不见了**

>  *  **在自定义一下webpack的配置**，我们需要在**根目录新建一个`vue.config.js`文件**，文件中应该导出一个对象，然后进行配置，详情查阅[官方文档][Link 6]
>     
>         // vue.config.js
>           module.exports = {
>             // 选项...
>           }
>  *  ![7fc7a30b4ababd47eeb73368942bf2a6.png][]

**13.启动项目**

>  *  启动项目：npm run serve // **不是之前的 npm run dev**
>  *  打开[http://localhost:8080：][http_localhost_8080]
>     
>     ![f8f90e8d969bdcd214a57a9a947c8525.png][]

## 图形化界面 ##

**简介**

> 图形化配置之后，配置会保存到：/node\_modules/@vue/cli-service/lib/webpack.config.js

**启动图形化界面**

>     vue ui
> 
>  *  这是个全局的命令 在哪个文件夹都可以打开
>  *  界面(下图)，重要的项目可以收藏起来(置顶)：
>     
>     ![37cbc9c211aa3b88436d3518a03b750d.png][]

**创建项目和导入项目**

> 1.  目录选中之后，导入项目点击下面的导入就可以了。
>     
>     ![efde62f6221a69f5c49f9d2f6f6e4640.png][]
> 2.  创建项目，填一个文件夹名字：
>     
>     ![6c1480bca5bb1c7291cdbbfc4fed155b.png][]
> 3.  然后选一下预先保存好的设置就可以了，非常方便，建议采用图形界面来创建项目
>     
>     ![0a1f46c81c2b6e19767cbc993923fc50.png][]

**项目管理**

> 当我们点击hello -cli3项目，就会进入项目管理的界面
> 
> **1. 仪表盘**
> 
>  *  这个仪表盘，主要是为了我们操作方便而设置的
>  *  可以点击右上角的按钮，来添加/移动这些功能选项。
>     
>     ![2ce1606494bc0b5d44c73167b28351bf.png][]
> 
> **2. vue-cli3.x插件**
> 
>  *  vue-cli3的插件功能，详情了解[官方文档][Link 7]
>     
>     ![eb09b45b3f46071b847973191f3d59f5.png][]
>  *  cli3插件安装的过程：
>     
>     ![cli3插件安装的过程][cli3]
> 
> **3. 项目依赖**
> 
>  *  直接在图形界面管理依赖很舒服了！
>  *  安装依赖的时候，要记得选择开发依赖/运行依赖！
>     
>     ![7b6cdcee57cefdf7f8f355f206880ac2.png][]
> 
> **4. 项目配置**
> 
>  *  可以对cli进行一些配置、Eslint规则修改：
>     
>     ![52194ffe6c9c0145c855fd0d7ab6282a.png][]
> 
> **5. 任务**
> 
>  *  serve 运行项目，点击直接运行，再也不用输入命令了！
>  *  可以清楚的看到各个模块用了多久，方便我们**针对性的进行优化**：
>     
>     ![8e3177c428b6143f40c3574343235d60.png][]
>  *  build 打包项目：这里**主要展示了图表的功能**，比以前2.x生成报告更加直观，超级棒！
>     
>     ![99dd958ae36e48e30e51f530cb5a9992.png][]
> 
> **6. 其他**
> 
>  *  夜间风格界面
>  *  直接打开编辑器，很棒了！
>  *  还有一些乱七八糟的按钮
>     
>     ![7a7562224504dd3a26b44f98ee5f22f6.png][]

# @vue/cli4 #

**其他网址**

> [vue cli3 和 vue cli4 - 苏小米 - 博客园][vue cli3 _ vue cli4 - _ -]
> 
> [Vue 学习笔记（4）Vue-cli4 -CSDN博客\_vuecli4目录结构][Vue _4_Vue-cli4 -CSDN_vuecli4]

## @vue/cli4与@vue/cli3的区别 ##

**1.目录结构**

> 左侧是@vue/cli3，右侧是@vue/cli4
> 
> ![2c6b64b41e2e86f8bd84c0fff901318e.png][]
> 
> components：是小组件，可被引用在 components或views 中
> 
> views： 是页面级组件，一般 views 组件不被复用；

**2.babel.config.js文件**

> babel 的预设由@vue/app 改成了@vue/cli-plugin-babel/preset
> 
> ![fc7a2e9703ab3d364a641a0016bc2a85.png][]

**3.依赖版本**

> 1.  @vue/cli-plugin-babel", "@vue/cli-plugin-eslint", "@vue/cli-service"由 v3 的版本升级到了 v4
> 2.  ass-loader由 v7 的版本升级到了 v8
> 3.  ore-js由 v2 的版本升级到了 v3
> 4.  ebpack-chain由 v4 的版本升级到了 v6
> 5.  ss-loader由 v1 的版本升级到了 v3
> 6.  rl-loader由 v1 的版本升级到了 v2
> 7.  ile-loader由 v3 的版本升级到了 v4
> 8.  opy-webpack-plugin由 v4 的版本升级到了 v5
> 9.  erser-webpack-plugin由 v1 的版本升级到了 v2
> 10. @vue/cli-plugin-pwa由 v3 的版本升级到了 v4
> 11. 新增插件 vue add vuex vue add router
> 12. pug-plain已重命名为pug-plain-loader
>     
>     1.  由于兼容性原因，仍支持 router＆routerHistoryMode 选项 preset.json
>     2.  但是现在建议使用它来 plugins: \{ '@vue/cli-plugin-router': \{ historyMode: true \} \}获得更好的一致性
> 13. api.hasPlugin('vue-router')不再受支持，现在 api.hasPlugin('router')
> 14. lintOnSave 选项的默认值（未指定时）从 true 更改为 default
> 15. 废弃vue-cli-service test:e2e
> 16. @vue/cli-plugin-e2e-nightwatch Nightwatch.js已从0.9升级到1.x
> 17. @vue/cli-plugin-unit-mocha 升级到Mocha 6
> 18. @vue/cli-plugin-unit-jest jest由 v23 升级到v24
> 19. @vue/cli-plugin-typescript 更好的ts(x)支持 ，胜过js(x)

## 命令 ##

**安装**

> npm install -g @vue/cli
> 
>  *  一定要在全局模式下安装vue-cli，否则无法使用vue命令
>  *  上边命令默认安装最新版vue-cli，可自行指定版本：npm install -g @vue/cli@版本号
> 
> 安装完之后，可以验证是否安装成功：
> 
>  *  vue //会打印Vue-Cli帮助信息
>  *  vue -V //打印Vue-Cli版本

**启动/打包**

> 这是个很棒的功能，用于开发一个库、组件，做一些小demo等都是非常适合的！
> 
> **安装扩展**
> 
>  *  npm install -g @vue/cli-service-global
> 
> 随便找个文件夹建一个.vue文件，然后跑起来
> 
>  *  vue serve App.vue // 启动服务
>     
>      *  服务启动时生成一个node\_modules包，服务支持ES6语法和热更新
>  *  vue build App.vue // 打包出生产环境的包并用来部署
>     
>      *  打包时会生成一个dist文件夹。(新建一个test.vue文件也只有一个node\_modules/dist文件夹)

## 配置文件 ##

**其他网址**

> [官方文档][Link 6]

**简介**

> 可以在项目根目录下新建vue.config.js文件进行配置。
> 
> vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。
> 
> 如果使用vue ui命令进行图形化配置，最终配置的保存路径为：/node\_modules/@vue/cli-service/lib/webpack.config.js

**示例配置**

>     module.exports = {
>         //  基本路径
>         publicPath: "./",
>     
>         //  构建时的输出目录
>         outputDir: "dist",
>         
>         //  放置静态资源的目录
>         assetsDir: "static",
>     
>         //  html 的输出路径
>         indexPath: "index.html",
>     
>         //文件名哈希
>         filenameHashing: true,
>     
>         //用于多页配置，默认是 undefined
>         pages: {
>             index: {
>                 // page 的入口文件
>                 entry: 'src/index/main.js',
>     
>                 // 模板文件
>                 template: 'public/index.html',
>     
>                 // 在 dist/index.html 的输出文件
>                 filename: 'index.html',
>     
>                 // 当使用页面 title 选项时，
>                 // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
>                 title: 'Index Page',
>     
>                 // 在这个页面中包含的块，默认情况下会包含
>                 // 提取出来的通用 chunk 和 vendor chunk。
>                 chunks: ['chunk-vendors', 'chunk-common', 'index']
>             },
>     
>             // 当使用只有入口的字符串格式时，
>             // 模板文件默认是 `public/subpage.html`
>             // 如果不存在，就回退到 `public/index.html`。
>             // 输出文件默认是 `subpage.html`。
>             subpage: 'src/subpage/main.js'
>         },
>     
>         //  是否在保存的时候使用 `eslint-loader` 进行检查。
>         lintOnSave: true,
>     
>         //  是否使用带有浏览器内编译器的完整构建版本
>         runtimeCompiler: false,
>     
>         //  babel-loader 默认会跳过 node_modules 依赖。
>         transpileDependencies: [ /* string or regex */ ],
>     
>         //  是否为生产环境构建生成 source map？
>         productionSourceMap: true,
>     
>         //  设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。
>         crossorigin: "",
>     
>         //  在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)。
>         integrity: false,
>     
>         //  调整内部的 webpack 配置
>         configureWebpack: () => {}, //(Object | Function)
>         chainWebpack: () => {},
>     
>         // 配置 webpack-dev-server 行为。
>         devServer: {
>             open: process.platform === 'darwin',
>     
>             host: 'localhost',
>             port: 8080,
>             https: false,
>             hotOnly: false,
>     
>             // 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/cli-service.md#配置代理
>     
>             proxy: {
>                 '/api': {
>                     target: "http://app.ly.com",
>                     changeOrigin: true,
>                     secure: false,
>                     pathRewrite: {
>                         "^/api": ""
>                     }
>     
>                 },
>     
>                 '/foo': {
>                     target: '<other_url>'
>                 }
>     
>             }, // string | Object
>             
>             before: app => {}
>         },
>     
>         // CSS 相关选项
>         css: {
>             // 将组件内的 CSS 提取到一个单独的 CSS 文件 (只用在生产环境中)
>             // 也可以是一个传递给 `extract-text-webpack-plugin` 的选项对象
>             extract: true,
>     
>             // 是否开启 CSS source map？
>     
>             sourceMap: false,
>     
>             // 为预处理器的 loader 传递自定义选项。比如传递给
>             // Css-loader 时，使用 `{ Css: { ... } }`。
>     
>             loaderOptions: {
>                 css: {
>                     // 这里的选项会传递给 css-loader
>                 },
>     
>                 postcss: {
>                     // 这里的选项会传递给 postcss-loader
>                 }
>             },
>     
>             // 为所有的 CSS 及其预处理文件开启 CSS Modules。
>             // 这个选项不会影响 `*.vue` 文件。
>             modules: false
>     
>         },
>     
>         // 在生产环境下为 Babel 和 TypeScript 使用 `thread-loader`
>         // 在多核机器下会默认开启。
>         parallel: require('os').cpus().length > 1,
>     
>         // PWA 插件的选项。
>         // 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli-plugin-pwa/README.md
>     
>         pwa: {},
>     
>         // 三方插件的选项
>         pluginOptions: {
>             // ...
>     
>         }
>     
>     }

## 创建项目（命令行） ##

**1. 创建工程**

> vue create demo\_cli4
> 
>  *  demo\_cli4是文件夹名字也是项目名，若不存在会自动创建，若存在会安装到那个文件夹中。
>  *  项目名不允许含有大写字母
>  *  vue-cli2.x需要自己手动创建一个文件夹。

**2.选择模板**

> 选择：Manually select features
> 
>  *  默认配置只有babel和eslint，其他的要自己再配置，所以选手动配置。
> 
>     ? Please pick a preset: (Use arrow keys)
>     > Default ([Vue 2] babel, eslint)
>       Default (Vue 3) ([Vue 3] babel, eslint)
>       Manually select features

**3.选择组件**

> 默认选项：
> 
>     ? Please pick a preset: Manually select features
>     ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>     >(*) Choose Vue version
>      (*) Babel
>      ( ) TypeScript
>      ( ) Progressive Web App (PWA) Support
>      ( ) Router
>      ( ) Vuex
>      ( ) CSS Pre-processors
>      (*) Linter / Formatter
>      ( ) Unit Testing
>      ( ) E2E Testing
> 
> 选这几项即可：
> 
>     ? Please pick a preset: Manually select features
>     ? Check the features needed for your project:
>      (*) Choose Vue version
>      (*) Babel
>      ( ) TypeScript
>      ( ) Progressive Web App (PWA) Support
>      (*) Router
>      (*) Vuex
>      ( ) CSS Pre-processors
>     >(*) Linter / Formatter
>      ( ) Unit Testing
>      ( ) E2E Testing
> 
> Linter / Formatter这个，若本处选中了，后边要关闭的话，有两种办法：
> 
> 1.  删除依赖及插件（本方法可运行起来，而且可以消除红色波浪线）
>     
>     1.  删除package.json中的eslint依赖和插件（所有带有eslint字样的项）
>     2.  删除根目录下的.eslintrc.js文件
> 2.  修改配置文件（本方法可运行起来，但无法消除红色波浪线）
>     
>     1.  根目录下新建vue.config.js文件，添加如下内容：
>         
>         1.      module.exports = {
>                     lintOnSave: false
>                 };

**4.vue版本**

> 上边用空格选完之后回车，会到下边界面。本处我选较为成熟的2.x
> 
>     ? Please pick a preset: Manually select features
>     ? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, Linter
>     ? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
>     > 2.x
>       3.x

**5.是否使用history模式（若选history：页面路由不使用 \#）**

>  *  建议选No，这样打包出来丢到服务器上可以直接使用了，后期要用的话，也可以自己再开起来。
>  *  选yes的话需要服务器那边再进行设置。
> 
>     ? Please pick a preset: Manually select features
>     ? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, Linter
>     ? Choose a version of Vue.js that you want to start the project with 2.x
>     ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

**6. 语法检测级别**

> 一般选择：ESLint + Standard config
> 
>     ? Please pick a preset: Manually select features
>     ? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, Linter
>     ? Choose a version of Vue.js that you want to start the project with 2.x
>     ? Use history mode for router? (Requires proper server setup for index fallback in production) No
>     ? Pick a linter / formatter config: (Use arrow keys)
>     > ESLint with error prevention only  //只检测错误
>       ESLint + Airbnb config             //不严谨的检测
>       ESLint + Standard config           //标准配置：自动纠正、自动格式化
>       ESLint + Prettier                  //严格模式：使用Prettier进行风格统一

**7.何时进行语法检测**

> 一般选：Lint on save // 保存时检测。
> 
> 等到commit的时候，问题可能都已经积累很多了
> 
>     ? Please pick a preset: Manually select features
>     ? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, Linter
>     ? Choose a version of Vue.js that you want to start the project with 2.x
>     ? Use history mode for router? (Requires proper server setup for index fallback in production) No
>     ? Pick a linter / formatter config: Standard
>     ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>     >(*) Lint on save   // 保存时检测
>      ( ) Lint and fix on commit  // commit时检测和修复

**8.把babel,postcss,eslint等配置文件放到哪里**

> 一般选择：In dedicated config files //独立放置
> 
> 这样可以让package.json干净些
> 
>     ? Please pick a preset: Manually select features
>     ? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, Linter
>     ? Choose a version of Vue.js that you want to start the project with 2.x
>     ? Use history mode for router? (Requires proper server setup for index fallback in production) No
>     ? Pick a linter / formatter config: Standard
>     ? Pick additional lint features: Lint on save
>     ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
>     > In dedicated config files  // 独立文件放置
>       In package.json            // 放package.json里

**9.是否保存预设值**

> 是否保存以便下次继续使用这套配置
> 
> 如果选y，则会让你写一个配置的名字：Save preset as: name
> 
>     ? Please pick a preset: Manually select features
>     ? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, Linter
>     ? Choose a version of Vue.js that you want to start the project with 2.x
>     ? Use history mode for router? (Requires proper server setup for index fallback in production) No
>     ? Pick a linter / formatter config: Standard
>     ? Pick additional lint features: Lint on save
>     ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
>     ? Save this as a preset for future projects? (y/N)

**创建后的结果**

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 1][]

## 图形化界面 ##

### 简介 ###

**功能**

> 可以创建工程、配置已有的工程等。
> 
> **用一次图形化界面，保证你再也不想用命令行了！**

**对比命令行的优势**

> 1.  使用简单
> 2.  可以退到上一步

**配置的保存位置**

> 图形化配置后，会保存到：/node\_modules/@vue/cli-service/lib/webpack.config.js

**启动图形化界面**

> 命令：vue ui
> 
>  *  这是个全局的命令，在哪个文件夹都可以运行它
>  *  界面如下图（重要的项目可以收藏起来(置顶)）
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 2][]

### 创建项目 ###

**点击创建**

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 3][]
> 
> 点击“在此创建新项目”

**设置项目名，选择包管理工具等**

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 4][]
> 
> 点击“下一步”

**选择预设项**

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 5][]

> 默认配置只有babel和eslint，其他的要自己再配置，所以选“手动”。

**选择组件**

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 6][]
> 
> 作用跟上边“创建项目（命令行）”一样，本处不再重复。

> 本处我的选择为：
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 7][]
> 
> 点击“下一步”

**选择vue版本、是否使用history模式、代码检测**

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 8][]

> 本处我的选择为：
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 9][]

**是否保存预设**

> 如果选择是，则后边项目可以直接使用此配置。本处不保存，即：选择“创建项目，不保存预设”。

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 10][]

> 正在创建项目（最下边会打印目前正在干什么）
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 11][]

**创建后的项目结构**

> 跟用命令行创建结果是一样的。

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 12][]
> 
>  *  node\_modules：用于存放我们项目的各种依赖；
>  *  public：用于存放静态资源（不会变动的）；
>     
>      *  public/index.html：模板文件，作用是生成项目的入口文件。
>      *  浏览器访问项目时默认打开的是生成好的 index.html。
>  *  src：是存放各种 .vue 文件的地方。
>     
>      *  src/assets：用于存放着各种静态文件（可能会变动），比如图片。
>      *  src/components：存放公共组件（可复用），比如 header.vue、footer.vue 等。
>      *  src/router/index.js：vue-router 路由文件。
>         
>          *  需要引入 src/views 文件夹下的 .vue，配置 path、name、component。
>      *  src/store/index.js：是 vuex 的文件，主要用于项目里边的一些状态保存。
>         
>          *  比如 state、mutations、actions、getters、modules。
>      *  src/views，存放页面组件（不可复用），比如 Login.vue，Home.vue。
>      *  src/App.vue：App.vue 是项目的主组件；
>  *  App.vue：根组件，使用 router-link 引入其他模块，所有页面都在 App.vue 下切换。
>  *  src/main.js：入口文件，主要作用是初始化 vue 实例，同时可以在此文件中引用某些组件库或者全局挂载一些变量。
>  *  .gitignore：配置 git 上传想要忽略的文件格式。
>  *  babel.config.js：一个工具链，主要用于在当前和较旧的浏览器或环境中将 ES6 的代码转换向后兼容（低版本ES）。
>  *  package.json：模块基本信息项目开发所需要的模块，版本，项目名称。
>  *  package-lock.json：是在 npm install 时候生成的一份文件，用于记录当前状态下实际安装的各个 npm package 的具体来源和版本号。

### 导入项目 ###

导入项目的文件夹即可，例如：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 13][]

### 项目管理 ###

创建完项目会自动进入项目管理界面，或者可以从主页点击项目进入。

**仪表盘**

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 14][]

**插件**

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 15][]

**依赖**

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 16][]

**配置**

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 17][]

**任务**

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 18][]

## @vue/cli3升级为@vue/cli4 ##

**其他网址**

> [vue cli 3 升级到 vue cli 4 方法步骤及升级点总结\_xiaofei-CSDN博客][vue cli 3 _ vue cli 4 _xiaofei-CSDN]

[Vue--_--_vue_cli_IT_-CSDN]: https://knife.blog.csdn.net/article/details/109435944
[Vue]: https://cli.vuejs.org/zh/guide/
[Link 1]: https://github.com/vuejs/vue-cli/tree/v2#vue-cli--
[Link 2]: https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue
[Link 3]: https://cli.vuejs.org/zh/guide/#cli
[Link 4]: https://cli.vuejs.org/zh/guide/#cli-%E6%9C%8D%E5%8A%A1
[webpack]: http://webpack.js.org/
[webpack-dev-server]: https://github.com/webpack/webpack-dev-server
[create-react-app]: https://github.com/facebookincubator/create-react-app
[CLI]: https://cli.vuejs.org/zh/guide/cli-service.html
[Link 5]: https://cli.vuejs.org/zh/guide/#cli-%E6%8F%92%E4%BB%B6
[preset]: https://cli.vuejs.org/zh/guide/plugins-and-presets.html
[Vue_vue-cli - _ -]: https://www.cnblogs.com/xiaohuochai/p/7277771.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70]: /images/20221120/8243735f11a740baa8bf2b380cc7c44b.png
[Vue-cli3.0]: https://juejin.cn/post/6844903714017247246
[493386922fe7a9b192266297e62c11ab.png]: https://img-blog.csdnimg.cn/img_convert/493386922fe7a9b192266297e62c11ab.png
[VsCode_Eslint]: https://link.juejin.cn/?target=http%3A%2F%2Fobkoro1.com%2Fweb_accumulate%2Faccumulate%2Ftool%2FEslint%25E8%2587%25AA%25E5%258A%25A8%25E4%25BF%25AE%25E5%25A4%258D%25E6%25A0%25BC%25E5%25BC%258F%25E9%2594%2599%25E8%25AF%25AF.html%23vscode%25E4%25BF%259D%25E5%25AD%2598%25E6%2597%25B6%25E8%2587%25AA%25E5%258A%25A8%25E4%25BF%25AE%25E5%25A4%258Deslint%25E9%2594%2599%25E8%25AF%25AF
[Link 6]: https://cli.vuejs.org/zh/config/
[7fc7a30b4ababd47eeb73368942bf2a6.png]: https://img-blog.csdnimg.cn/img_convert/7fc7a30b4ababd47eeb73368942bf2a6.png
[http_localhost_8080]: http://localhost:8080
[f8f90e8d969bdcd214a57a9a947c8525.png]: https://img-blog.csdnimg.cn/img_convert/f8f90e8d969bdcd214a57a9a947c8525.png
[37cbc9c211aa3b88436d3518a03b750d.png]: https://img-blog.csdnimg.cn/img_convert/37cbc9c211aa3b88436d3518a03b750d.png
[efde62f6221a69f5c49f9d2f6f6e4640.png]: https://img-blog.csdnimg.cn/img_convert/efde62f6221a69f5c49f9d2f6f6e4640.png
[6c1480bca5bb1c7291cdbbfc4fed155b.png]: https://img-blog.csdnimg.cn/img_convert/6c1480bca5bb1c7291cdbbfc4fed155b.png
[0a1f46c81c2b6e19767cbc993923fc50.png]: https://img-blog.csdnimg.cn/img_convert/0a1f46c81c2b6e19767cbc993923fc50.png
[2ce1606494bc0b5d44c73167b28351bf.png]: https://img-blog.csdnimg.cn/img_convert/2ce1606494bc0b5d44c73167b28351bf.png
[Link 7]: https://cli.vuejs.org/zh/guide/plugins-and-presets.html#%E6%8F%92%E4%BB%B6
[eb09b45b3f46071b847973191f3d59f5.png]: https://img-blog.csdnimg.cn/img_convert/eb09b45b3f46071b847973191f3d59f5.png
[cli3]: https://img-blog.csdnimg.cn/img_convert/73bb393729b90cb204ae32c5a82ff2a4.png
[7b6cdcee57cefdf7f8f355f206880ac2.png]: https://img-blog.csdnimg.cn/img_convert/7b6cdcee57cefdf7f8f355f206880ac2.png
[52194ffe6c9c0145c855fd0d7ab6282a.png]: https://img-blog.csdnimg.cn/img_convert/52194ffe6c9c0145c855fd0d7ab6282a.png
[8e3177c428b6143f40c3574343235d60.png]: https://img-blog.csdnimg.cn/img_convert/8e3177c428b6143f40c3574343235d60.png
[99dd958ae36e48e30e51f530cb5a9992.png]: https://img-blog.csdnimg.cn/img_convert/99dd958ae36e48e30e51f530cb5a9992.png
[7a7562224504dd3a26b44f98ee5f22f6.png]: https://img-blog.csdnimg.cn/img_convert/7a7562224504dd3a26b44f98ee5f22f6.png
[vue cli3 _ vue cli4 - _ -]: https://www.cnblogs.com/Super-scarlett/p/12495902.html
[Vue _4_Vue-cli4 -CSDN_vuecli4]: https://blog.csdn.net/weixin_43734095/article/details/106990775
[2c6b64b41e2e86f8bd84c0fff901318e.png]: https://img-blog.csdnimg.cn/img_convert/2c6b64b41e2e86f8bd84c0fff901318e.png
[fc7a2e9703ab3d364a641a0016bc2a85.png]: https://img-blog.csdnimg.cn/img_convert/fc7a2e9703ab3d364a641a0016bc2a85.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210712225957538.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210712233850977.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210712233917237.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210712233943933.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210712234028417.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20210712234104478.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20210712235528713.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20210712235928999.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/2021071300002650.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20210713000103911.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20210713000316677.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20210713000635166.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20210713003116352.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/20210713002017138.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/20210713002259664.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 16]: https://img-blog.csdnimg.cn/20210713002327269.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 17]: https://img-blog.csdnimg.cn/20210713002350858.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 18]: https://img-blog.csdnimg.cn/20210713002408614.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[vue cli 3 _ vue cli 4 _xiaofei-CSDN]: https://blog.csdn.net/qq_39953537/article/details/102759821