Vue开发全流程使用到的不只是Vue框架本身，经常面对一个新的名称时，感到陌生。因此本文特地梳理了Vue开发中常常关联到的一些名称/概念，包括：脚手架、插件、UI库、代码规范工具、打包工具、测试工具

Vue生态圈

Vue开发全流程，使用的工具、框架可以分为

• 脚手架（快速创建项目工程）
• 开发中的插件，如路由插件、全局状态管理插件
• 代码审查
• 项目打包器
• 代码测试

一、脚手架

1、vue-cli

Vue官方提供的基于「Webpack」的脚手架，目前处于维护状态，官方不建议使用。vue-cli根据版本前后，又分为两种：vue-cli和@vue/cli。前者对应Vue3.0以下版本（不含3.0），后者对应Vue3.0以上版本。

使用方式分别如下：

# 第一种 vue-cli
npm install -g webpack webpack-cli
npm install -g vue-cli	
vue init webpack project-name

# 第二种 @vue/cli
npm install -g @vue/cli
vue create project-name	#命令行交互的方式创建项目和选项选择
#或者是
vue ui		#进入图形界面（打开浏览器）进行项目创建和选项选择

2、create-vue

Vue官方提供的最新脚手架工具，与「Vite」搭配使用，传送门：create-vue - npm (npmjs.com)

使用方式：

$ npm init vue@latest		#这个命令会安装和执行 create-vue

二、开发插件

1、Vue Router

官方路由插件，用来进行路由管理，传送门：Home | Vue Router (vuejs.org)

2、Vuex

官方状态管理插件，用来进行全局通信，传送门：Vuex 是什么？ | Vuex (vuejs.org)

3、vue-devtools

用于调试vue应用的浏览器开发者扩展，使我们可以浏览一个 Vue 应用的组件树，查看各个组件的状态，追踪状态管理的事件，还可以进行组件性能分析。传送门：Home | Vue Devtools (vuejs.org)

4、vue-resource

提供了使用XMLHttpRequest或JSONP进行web请求和处理响应的服务的Vue插件，用来替代ajax的功能。传送门：vue-resource - npm (npmjs.com)

5、@vue/compiler-sfc

Vue核心底层库，提供了处理Vue SFC的底层功能

6、vue-loader

为Webpack提供支持Vue SFC的官方loader

7、vitejs/plugin-vue

为Vite提供Vue SFC支持的官方插件

三、UI库

1、Element UI

饿了么团队开发的基于Vue的UI组件库，有两个版本，传送门：一个 Vue 3 UI 框架 | Element Plus (gitee.io)

• Element UI，对应Vue2
• Element Plus，对应Vue3

2、View Design

基于 Vue.js 3 的企业级 UI 组件库和前端解决方案，UI库是View UI Plus。除了UI库之外，还提供了中后台前端产品Admin Plus、面向配置的增删改查表格组件iCRUD。传送门：iView / View Design 一套企业级 UI 组件库和前端解决方案 (iviewui.com)

预览：

四、代码规范

1、ESLint

可组装的JavaScript和JSX (JavaScript + XML) 检查工具。可以提供可配置的规则。链接：ESLint - Pluggable JavaScript linter - ESLint中文

Vue团队提供了 eslint-plugin-vue 项目，它是一个 ESLint 插件。需要在命令行中使用。

此外，ESLint还提供了IDE插件，如ESLint for VSCode，这样可以在编写代码时就能够及时得到规范检查器的反馈，而不是等到启动项目时才进行检查和修改。

# 演示如何使用ESLint
npm i -D eslint			#在npm项目中安装，推荐安装为开发依赖
./node_modules/.bin/eslint --init		#初始化 eslint 配置文件，因为不是安装到全局的，所以不能直接使用 eslint --init
# 在初始化的过程中，会让你选择一些配置，譬如 如何使用 ESLint？推荐选择第三项，功能最多
# To check syntax. find problems, and enforce code style
# 逐一选择完 ESLint 的使用配置后，会在项目根目录生成 .eslintrc.js 配置文件，同时会安装需要的 npm 包

// .eslintrc.js 
module.exports = {
  env: {
    es2020: true,
    node: true
  },
  extends: [
    'standard'			//通过扩展导入语法风格文件，这里选择了standard规范
  ],
  parserOptions: {
    ecmaVersion: 11,
    sourceType: 'module'
  },
  rules: {
  }
}

// 在package.json文件中增加命令，检查 src 目录下的所有文件
"scripts":{
    "eslint": "eslint src/**"
}

npm run eslint			// 运行命令执行ESLint检查
npm run eslint --fix	//执行检查并修复（能够修复的）内容

2、eslint-plugin-vue

一个 ESLint 插件，由Vue团队提供

2、Volar

VSCode插件，提供了语法高亮、TypeScript 支持，以及模板内表达式与组件 props 的智能提示。并提供了格式化代码功能

3、Prettier

一款可以自定义的代码格式化工具，提供了内置的 Vue SFC 格式化支持

五、项目打包

1、Webpack

一款强大的打包工具，在Vite出现以前，Vue项目就基于它进行项目打包。官网：webpack

不过Vite出现后，官方已经不推荐使用Webpack，因为Vite针对Vue打包进行了很多优化，更适合Vue应用

2、Vite

Vue官方最新的打包工具，以及前端工具链。官网：Vite | 下一代的前端工具链 (vitejs.dev)

3、rollup

是一个用于JavaScript的模块打包器，它将小块代码编译成更大、更复杂的东西，例如库或应用程序。主要用于打包类库。官网：rollup.js (rollupjs.org)

4、grunt

“JavaScript世界的构建工具”，自动化工具，可以自动化压缩、编译、单元测试、linting等，只需要有对应的插件和Gruntfile配置文件。官网：Grunt: JavaScript 世界的构建工具 | Grunt 中文网 (gruntjs.net)

5、gulp

“基于流Stream的自动化构建工具”，开发者可以使用它在项目开发过程中自动执行常见任务，基于Node.js构建。官网：gulp.js - 基于流(stream)的自动化构建工具 | gulp.js中文网 (gulpjs.com.cn)

6、parcel

“极速零配置Web应用打包工具”。特点是利用多核处理器提供了极快的速度，并且不需要任何配置。官网：Parcel - Web 应用打包工具 | Parcel 中文网 (parceljs.cn)

六、代码测试

1、Cypress

端对端测试工具，官网：JavaScript End to End Testing Framework | cypress.io testing tools

2、Vitest

单元测试工具，由Vue/Vite团队开发，针对「Vite」设计，官网：Vitest | A blazing fast unit test framework powered by Vite

3、Jest

Jest是一个令人愉快的JavaScript测试框架，专注于简单性。官网：Jest · 🃏 Delightful JavaScript Testing (jestjs.io)

七、名词解释

1、SFC

Single File Components，单文件组件