自定义 Vue CLI 模板：精简开发流程，提高效率

自定义 Vue CLI 模板，打造更契合的开发体验

在 Vue CLI 构建的项目中，默认提供的 webpack 模板往往满足不了我们个性化的开发需求。每次新建项目时，都需要手动复制粘贴之前的配置，费时费力。对于团队协作来说，维护一个通用模板尤为重要。

本文将手把手指导你自定义 Vue CLI 模板，打造更契合你开发习惯的定制化体验。

创建自定义模板

使用 Vue CLI 创建项目

首先，使用 Vue CLI 创建一个新项目：

vue create my-custom-template

停止项目运行

项目创建完成后，停止其运行：

cd my-custom-template
npm stop

复制 package.json

将 package.json 文件复制到一个新位置，例如 custom-template 文件夹：

cp package.json ../custom-template/

修改 custom-template 中的 package.json

在 custom-template 文件夹中，打开 package.json 文件并进行以下修改：

• 修改 name 字段为 @my-org/custom-template（替换 my-org 为你的组织名称）。
• 删除所有与项目特定相关的依赖项（例如 src 目录和 main.js 文件）。

创建 index.js 文件

在 custom-template 文件夹中，创建 index.js 文件并添加以下代码：

module.exports = function(api) {
  api.extendPackage({
    dependencies: {
      vue: '^2.6.10',
      vuex: '^3.0.1',
      axios: '^0.19.0'
    }
  })
}

发布自定义模板

安装 vue-cli-plugin-local

安装 vue-cli-plugin-local 插件：

npm install -g vue-cli-plugin-local

注册自定义模板

使用 vue-cli-plugin-local 注册你的自定义模板：

vue-cli-plugin-local register @my-org/custom-template

使用自定义模板

创建新项目

使用你的自定义模板创建新项目：

vue create my-new-project --template @my-org/custom-template

查看自定义模板的配置

在项目中，查看 package.json 文件，你会发现你的自定义依赖项已包含其中：

{
  "dependencies": {
    "axios": "^0.19.0",
    "vue": "^2.6.10",
    "vuex": "^3.0.1"
  },
  ...
}

总结

自定义 Vue CLI 模板可以大大提高开发效率，减少重复性工作。通过遵循本文中的步骤，你可以创建自己的定制化模板，并轻松地将其应用到新的项目中。无论是个人项目还是团队协作，自定义模板都将为你带来更加流畅的开发体验。