0 x01 opportunity

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

Take a look at the documentation first: the CLI3 plug-in and Preset

Then you will learn how to fully customize a set of front-end project templates, so you don’t have to worry about me copying and pasting them every time

Note: This preset does not need to be released to NPM, supports Github, Gitlab, and any Git repo, and can even be imported locally

0x02 two nouns

The plug-in

Plugins, as the name suggests

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

Preset

Can be translated as preset

  • A JSON object containing predefined options and plug-ins needed to create a new project
  • You can also think of it as a set of preset project templates, which is what this article is about.

If you’ve created a project using vue Create, the CLI will prompt you to save it as a preset, the first of which refers to the object to be saved. If you have saved, the following command will see preset that was saved.

cat ~/.vuerc
Copy the code

Each preset. Json looks something like this:

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

0x03 Difference between the two

The plug-in

A plug-in contains the following three parts:

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

Preset

A Preset project contains the following three parts

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

You can see the difference between the two is that the plugin must have a Service plugin (which is narrower than the plugin category in this article), and Preset must include a Preset. Json

0x04 Core Concepts

Since this article is mainly about Preset, the rest of the core concepts are recommended in the documentation: Core concepts

Prompts

Essentially a dialog configuration file, this file is written differently for vue built-in plug-ins and third-party plug-ins. We just have to remember:

It is an array of Inquirer. Js questions

The following is an example:

// Note that this code is mentioned below
module.exports = [
  {
    type: 'list'.// The type is an option
    name: 'module'.// name, as the key of the generator function options below
    message: 'Please select the module you want to generate'./ / the clues
    choices: [
      { name: 'Module1'.value: 'module1' },
      { name: 'Module2'.value: 'module2' },
      { name: 'Module3'.value: 'module3'}].default: 'module0'}, {type: 'input'.// The type is input
    name: 'moduleName'.message: 'Please enter module name'.default: 'myModule'}]Copy the code

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

The implementation looks something like this:

Generator

Call it a generator, and it exports a function that takes three arguments

  1. API: an instance of the GeneratorAPI
  2. Prompts: AN object that can be interpreted as a composite of prompts input by the user of an array of questions
  3. RootOptions: Entire preset. Json object
// This code essentially runs on Node, so it's node syntax
module.exports = (api, options, rootOptions) = > {
  // Modify the fields in 'package.json'
  api.extendPackage({
    scripts: {
      test: 'vue-cli-service command'}})// Copy and render all files in './template 'with ejS
  api.render('.. /template')

  if (options.module === 'module1') { 
    // Options. module can access the value of the first object in the above problem array, which defaults to: 'module0'
    console.log(`Your choice is ${options.module}`)}if (options.moduleName === 'myModule') {
    // options.moduleName can access text entered by the user from the console
    console.log(`Your input is ${options.moduleName}`)}}Copy the code

0 x05 of actual combat

The above code author prepared an empty shelf:

vue-preset-template

You can clone it first, and then run to feel the effect.

Go straight to the writer’s warehouse

vue create --preset savokiss/vue-preset-template <project-name>
Copy the code

Clone comes down and runs native code

vue create --preset ./vue-preset-template <project-name>
Copy the code

Run preset in git repository

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

Now you are one step away from publishing your own project template: fill the contents of the Template folder

In fact, just put in the files that you are going to use in the project. The initial file and the SCSS file are written differently, see the reference project below

0x06 Reference item

I preset two preset, welcome star ha

  1. PC project template: VUe-preset – PC
  2. Mobile project template: VUe-preset – Mobile

0 XFF document

  • The original link
  • CLI3 plugin and Preset
  • Plug-in Core Concepts
  • shell

Public number: code force full open