Build your own Vue CLI3 project template in 10 minutes

  preset, vue-cli3, vue.js

0x01 Opportunity

Vue CLI3 has been out for a long time. I have always wanted to study its plug-in system but I have no time.(actually lazy), just recently need to unify the specifications of the project team(excuse), so there is an opportunity.

First glance at the document:CLI3 plug-in and Preset

Then I’ll teach you how to completely customize a set of front-end project templates, and my mother won’t have to worry about copying and pasting each time ~

Special note: This preset does not need to be published to npm, supports github, gitlab and any git repo, and can even be directly introduced locally

The two nouns 0x02

plug-in

As the name implies, it is a plug-in

  1. Vue CLI uses a plug-in based architecture
  2. The plug-in-based architecture makes Vue CLI flexible and extensible.

Preset

Can be translated asPreset

  • A that contains predefined options and plug-ins needed to create a new projectJSON object
  • It can also be understood as a set of preset project templates, which is what this article is about.

Usevue createAll the partners who have created the project should remember that the CLI will prompt whether to save as a preset after the creation is completed. The first item here refers to the object to be saved. If you have saved it, the following command can see the previously saved preset.

cat ~/.vuerc

Each ..preset.jsonThis is probably the format:

{
  "useConfigFiles": true,
  "plugins": {...},
  "configs": {
    "vue": {...},
    "postcss": {...},
    "eslintConfig": {...},
    "jest": {...}
  }
}

0x03 the difference between the two

plug-in

A plug-in consists of the following three parts:

  1. Service plug-in
  2. Generator file(Optional)
  3. Prompts file(Optional)

Preset

A Preset project consists of the following three parts

  1. preset.json
  2. Generator file (optional)
  3. Prompts file (optional)

You can see the difference between them is that the plug-in must have a Service plug-in (this thing is more than what this article saysplug-inThe scope should be narrow), and Preset must contain a preset.json

0x04 Core Concept

Since this article is mainly about Preset, it is good to look at the remaining core concepts in the document.Core concept

Prompts

It is essentially a dialog configuration file, vueBuilt-in plug-inAndThird party plug-inThe writing style of this document is different. We just need to remember:

It is aInquirer.jsProblemAn array of

Examples are as follows:

// 注意这段代码下面会提到
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'
  }
]

Of course, if you don’t need it, just give it to an empty array.

This is probably the effect of implementation:

20190421213756.jpg

Generator

You can call it a generator, which derives a function that receives three parameters

  1. Api: oneGeneratorAPIExample
  2. Options: Can be simply understood as prompts problem array firstUser input forThe combined option object
  3. Json object
// 这些代码本质上跑在 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 actual combat

The above code author has prepared an empty shelf:

vue-preset-template

Everyone can first clone down and then run to feel the effect.

Run directly to the author’s warehouse

vue create --preset savokiss/vue-preset-template <project-name>

Clone Down to Run Local Code

vue create --preset ./vue-preset-template <project-name>

Preset at git warehouse

vue create --preset direct:<git-clone-url> <project-name>

Well, it’s only one step away from publishing your project template ~
That is:Populate the contents of the template folder

In fact, it is ok to directly put in the files used in the project. It is important to note that.The initial document and scss document are written in different ways. Please refer to the following reference items for details

0x06 Reference Item

The author organized two preset, welcome star ha

  1. PC side project template:vue-preset-pc
  2. Mobile project template:vue-preset-mobile

0xFF document

Public number:Code force fully open

图片描述