专栏首页码力全开10分钟搭建属于自己的 Vue CLI3 项目模板

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'
  }
]

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

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

20190421213756.jpg

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 preset-demo

clone下来跑本地代码

vue create --preset ./vue-preset-template preset-demo

好啦,距离发布自己的 项目模板只有一步之遥啦~ 那就是:填充 template 文件夹的内容

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

0x06 参考项目

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

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

0xFF 文档

  • CLI3插件和Preset
  • 插件核心概念
  • 空架子

本文分享自微信公众号 - 码力全开(codingonfire),作者:savokiss

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-04-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 写给前端的正则表达式入门

    在 JavaScript 中,使用 // 即可创建一个正则表达式对象,当然也可以使用 new RegExp()

    savokiss
  • 图解你身边的 SOLID 原则 - JS 实例版

    过了两天发现有人为那篇文章补充了 JavaScript 例子,看了下例子还不错,这次就顺便也翻译一下哈,部分例子有删改~

    savokiss
  • [译]带你理解 Async/await

    「async/await」是 promises 的另一种更便捷更流行的写法,同时它也更易于理解和使用。

    savokiss
  • WordPress 中强制设置 特色图像 才能发表文章

    在开发WordPress 主题的时候,为了丰富网页,常常使用到特色图像功能;这就要求主题使用者为每篇文章都要设置个特色图像,但总有一些用户不会乖乖按要求做;如此...

    Jeff
  • Python数据可视化实现漏斗图过程图解

    砸漏
  • PASCAL VOC2012 数据集详解

    Pascal VOC2012作为基准数据之一,在对象检测、图像分割网络对比实验与模型效果评估中被频频使用,但是如果没有制作过此格式的数据集就会忽略很多细节问题,...

    OpenCV学堂
  • 以太坊·电影院场景区块链应用探索

    本文节选自电子书《Netkiller Blockchain 手札》

    netkiller old
  • Java-String

    版权声明: ...

    Fisherman渔夫
  • MySQL案例:关于JSON的一个bug

    周五晚上和朋友一起去外面吃饭,本来想着不加班早点回家过周末,谁又能想到突然就接到一个电话,mysqldump逻辑备份导入时报错,具体错误为“ERROR 3144...

    brightdeng@DBA
  • Jsoup 基础知识

    其解析器能够尽最大可能从你提供的HTML文档来创见一个干净的解析结果,无论HTML的格式是否完整。比如它可以处理:

    Remember_Ray

扫码关注云+社区

领取腾讯云代金券