10分钟搭建属于本身的 Vue CLI3 项目模板

0x01 契机

Vue CLI3 出来已经很长时间了，一直想研究它的插件系统却没有时间~~（实际上是懒），恰好最近须要统一一下项目组的规范（借口）~~，因而就有了契机。

先瞅一眼文档: CLI3插件和Preset

而后就教你怎么彻底定制化一套 前端项目模板，妈妈不再用担忧我每次复制粘贴啦~

特别说明：这种 preset 不须要发布到 npm，支持 github，gitlab 及任何 git repo，甚至能够直接本地引入哦~

0x02 两个名词

插件

顾名思义，就是插件啦

1. Vue CLI 使用了一套基于插件的架构
2. 基于插件的架构使得 Vue CLI 灵活且可扩展

Preset

能够翻译为 预设

• 一个包含建立新项目所需预约义选项和插件的 JSON 对象
• 还能够理解为一套预置的项目模板，也就是本文要讲的。

使用vue create 建立过项目的小伙伴应该都记得，在建立完成后 CLI 会提示是否保存为一个 preset，这里第一条指的就是要保存的那个对象。若是你保存过，下面的命令就能看到以前保存的 preset。

cat ~/.vuerc
复制代码

每一个 preset.json 大概是这么个格式:

{
  "useConfigFiles": true,
  "plugins": {...},
  "configs": {
    "vue": {...},
    "postcss": {...},
    "eslintConfig": {...},
    "jest": {...}
  }
}
复制代码

0x03 二者区别

插件

一个插件包含如下三个部分：

1. Service 插件
2. generator 文件 (可选)
3. prompts 文件 (可选)

Preset

一个 Preset 项目包含如下三个部分

1. preset.json
2. generator 文件 (可选)
3. prompts 文件 (可选)

---

能够看到他们两个的区别就是插件必须有一个 Service 插件（这个东西比本文讲的插件范畴要窄），而 Preset 必须包含一个 preset.json

0x04 核心概念

因为本文主要讲的是 Preset，因此剩下的核心概念看文档就好哈: 核心概念

Prompts

本质上是一个对话配置文件，vue 内置插件 和 第三方插件 的这个文件的写法是不同的。咱们只要记得：

它是一个 Inquirer.js 的 问题 的数组

示例以下：

// 注意这段代码下面会提到
module.exports = [
  {
    type: 'list', // 即类型为 选择项
    name: 'module', // 名称，做为下面 generator 函数 options 的键
    message: '请选择你要生成的模块', // 提示语
    choices: [
      { name: 'Module1', value: 'module1' },
      { name: 'Module2', value: 'module2' },
      { name: 'Module3', value: 'module3' }
    ],
    default: 'module0',
  },
  {
    type: 'input', // 类型为 输入项
    name: 'moduleName',
    message: '请输入模块名称',
    default: 'myModule'
  }
]
复制代码

固然用不到的话直接给空数组就行哈。

执行的效果大概就是这样：

Generator

能够叫它生成器，它导出一个函数，该函数接收三个参数

1. api : 一个 GeneratorAPI 实例
2. options: 能够先简单理解为 prompts 问题数组的用户输入 组合成的选项对象
3. rootOptions: 整个 preset.json 对象

// 这些代码本质上跑在 node 上，因此都是 node 的语法
module.exports = (api, options, rootOptions) => {
  // 修改 `package.json` 里的字段
  api.extendPackage({
    scripts: {
      test: 'vue-cli-service command'
    }
  })

  // 复制并用 ejs 渲染 `./template` 内全部的文件
  api.render('../template')

  if (options.module === 'module1') { 
    // options.module 能够访问上面问题数组的第一个对象的值，默认为: 'module0'
    console.log(`Your choice is ${options.module}`)
  }

  if (options.moduleName === 'myModule') {
    // options.moduleName 能够访问到用户从控制台输入的文字
    console.log(`Your input is ${options.moduleName}`)
  }
}
复制代码

0x05 实战

上面的代码笔者准备了一个空架子：

vue-preset-template

你们能够先 clone 下来，而后跑一下感觉一下效果。

直接跑笔者的仓库

vue create --preset savokiss/vue-preset-template <project-name>
复制代码

clone 下来跑本地代码

vue create --preset ./vue-preset-template <project-name>
复制代码

跑 git 仓库的 preset

vue create --preset direct:<git-clone-url> <project-name>
复制代码

好啦，距离发布本身的 项目模板只有一步之遥啦~ 那就是： 填充 template 文件夹的内容

其实直接把项目中用到的文件放进去就能够了，须要注意的是以. 开头的文件以及 scss 文件写法不太同样，具体能够看下面的参考项目

0x06 参考项目

笔者整理了两个 preset，欢迎 star 哈

1. PC端项目模板：vue-preset-pc
2. 移动端项目模板：vue-preset-mobile

0xFF 文档

• 原文连接
• CLI3插件和Preset
• 插件核心概念
• 空架子

公众号：码力全开