开发一个Vue CLI 插件

开发一个Vue CLI 插件

使用场景：在我们开发vue项目时，经常使用vue cli直接创建项目，vue cli 可以直接给项目集成一些常用的插件，比如我们可以选择性的集成 eslint，typescript 等前端通用的插件，非常方便。但是现在有一个实际的问题，我们在公司的实际开发中经常需要做一些定制化的开发，并且在公司中的多个项目中都是此类的统一风格，此时我们就可以使用 vue cli 插件去实现定制化的插件开发。

对 vue cli 的理解：一个cli插件就是一个npm包，能够为vue cli创建的项目添加额外的功能：比如修改webpack的配置，扩展package.json，在项目中创建新文件，修改老文件，让用户按提示选择特定的选项等。

开发简介：

• cli 插件项目的命名和使用
  为了让一个 CLI 插件在 Vue CLI 项目中被正常使用，它必须遵循 vue-cli-plugin-(name) 或者 @scope/vue-cli-plugin-(name) 这样的命名惯例，使用时按照通过 vue add (name) 或者 vue invoke (name) 安装

• 一般包含以下文件目录：
  ├── README.md
  ├── generator.js # generator（可选）
  ├── index.js # service 插件
  ├── package.json
  ├── prompts.js # prompt 文件（可选）
  └── ui.js # Vue UI 集成（可选）

  • 插件的 Generator 部分通常在你想要为项目扩展包依赖，创建新的文件或者编辑已经存在的文件时需要
  • Service 插件可以修改 webpack 配置，创建新的 vue-cli service 命令或者修改已经存在的命令，Service 插件在 Service 实例被创建后自动加载 - 例如，每次 vue-cli-service 命令在项目中被调用的时候。它位于 CLI 插件根目录的 index.js 文件
  • 当你的插件添加了一些依赖到项目中，你需要将他们添加到 package 的 dependencies 部分时，这是一个有用的选项。为了能够被用户在搜索时更好的发现，可以将插件的关键描述放到 package.json 文件的 description 字段中等
  • 对话是在创建一个新的项目或者在已有项目中添加新的插件时处理用户选项时需要的。所有的对话逻辑都存储在 prompts.js 文件中
  • 可以在 Vue UI 中为它们创建一个图形界面。可以通过 UI 运行任务并且直接看到输出

以上是开发过程的简单介绍便于快速的了解，这里提供一个vue cli插件开发的demo以供参考，可通过以下途径获取:

• github获取源码地址
• npm官网获取插件

如果要进行具体的开发还需要到vue cli的官网去查找插件详细的开发流程文档说明，vue cli 插件开发文档官网地址