【Vue系列8】——掌握不加班秘诀 Vue CLI

三连多大胆，就有多大产！开源促使进步，献给每一位技术使用者和爱好者！
干货满满，摆好姿势，准备发车

争议

Vue CLI是为了让开发者能够开箱即用快速地进行应用开发而生的，它们秉承的是 约定大于配置 思想，这里类似于Java中的SpringBoot，简单说就是"能不配置的就不配置，你就按照我的方式来，也不要去争论这个好不好，快速进行业务开发才是正经事"，它们不建议你去配置，但也不会拦着你去配置。

当然也有很多不同的声音，有的大佬们说：

1. 难道现在的开发就是在这些木板的基础上改成自己想要的模样吗？
2. 难道不想知道项目破土动工前，搭建项目的完整工作流吗？
3. 难道不想秀一下手动配置一个具体项目的webpack打包文件的高端操作吗？

所以脚手架这样的项目快速构建工具声音也不是统一的，有的认为很方便不用再将时间浪费在项目搭建上，因为往往这要花费很多时间，而有的人则认为，我们使用现成的，灵活度就不够了，内功会变差，而且哪里出了问题也不是很快可以锁定位置，自己手动构建可以提升自己的架构能力等等。

学长有话说

1. 公司都是希望可以快速开发出稳定、易于维护的产品，所以我们使用脚手架遵守它的规范可以做到快速开发和维护
2. 如果想要提升架构能力，锁定问题可以翻阅框架的源码，学习这些架构是如何实现的，有什么可取之处和优化之处
3. 如果这些脚手架不能满足我们的业务需求，看看是否可以通过修改源码（这装的可以吧）
4. 这里还是说一下，可以使用就尽量用，可以省很多配置搭建工作。

介绍

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，可以：

• 通过 @vue/cli 实现的交互式的项目脚手架；
• 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发；
• 一个运行时依赖 (@vue/cli-service)，该依赖：
  • 可升级；
  • 基于 webpack 构建，并带有合理的默认配置；
  • 可以通过项目内的配置文件进行配置；
  • 可以通过插件进行扩展。
• 一个丰富的官方插件集合，集成了前端生态中最好的工具；
• 一套完全图形化的创建和管理 Vue.js 项目的用户界面；

总之使用Vue CLI可以构建各种默认配置，让我们将精力放在应用的开发上，而不必纠结花费几天的时间去做项目的配置

组成

Vue CLI 有几个独立的部分。GitHub上的源代码，Vue CLI这个仓库里同时管理了多个单独发布的包

CLI

CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目，或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。

CLI 服务

CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包，局部安装在每个 @vue/cli 创建的项目中。

CLI 服务是构建于 webpack 和 webpack-dev-server 之上的。它包含了：

• 加载其它 CLI 插件的核心服务；
• 一个针对绝大部分应用优化过的内部的 webpack 配置；
• 项目内部的 vue-cli-service 命令，提供 serve、build 和 inspect 命令。

CLI 插件

CLI 插件是向你的 Vue 项目提供可选功能的 npm 包，例如 Babel/TypeScript 转译、ESLint 集成、单元测试和 end-to-end 测试等。Vue CLI 插件的名字以 @vue/cli-plugin- (内建插件) 或 vue-cli-plugin- (社区插件) 开头，非常容易使用。

当你在项目内部运行 vue-cli-service 命令时，它会自动解析并加载 package.json 中列出的所有 CLI 插件

安装

关于版本

旧版本的Vue CLI 包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它

关于Node

Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本

安装命令

npm install -g @vue/cli
# OR
yarn global add @vue/cli

验证是否安装

vue --version

如图

创建项目

Vue CLI3版本以上

运行以下命令创建项目

# 使用vue create 项目名语法创建项目
vue create vuecliv3

项目结构

Vue CLI2.X版本

Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

创建过程详解：

项目结构：

目录解释

1、build：webpack的相关配置
2、config：webpack的相关配置
3、src：源码文件
4、static：静态资源文件、在打包时会和src下的资源一同放入dist目录下
5、.babelrc：ES代码转化配置
6、.editorconfig：项目文本代码、规范相关配置
7、.gitignore：Git仓库提交忽略配置
8、.postcssrs.js：CSS相关转化配置

区别

• vie-cli3是基于webpack 4 打造，vue-cli 2 还是 webpack 3
• vue-cli 3 的设计原则是 “0配置” ，移除的配置文件根目录下的build 和 config等目录
• vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化
• 移除了static文件夹，新增public文件夹，并且 index.html 移动到public中

以上总结就是Vue脚手架讲的所有内容了，一定要屁股坐下来多练多思考多交流，方能运用自如，我们都会越来越棒，加油，开始练习吧
还是 欢迎评论区交流，喜欢就三连一下吧，我们下期见

我是不夜学长，乐于分享，我们一起加油吧！