Customize vuE-CLI templates

The implementation is based on Vue CLI Preset, which is preset configuration and plug-ins to be used when creating new projects, and the preset content is supported on Git (including GitHub, GitLab, etc.), Special options are added to create Vue projects using Preset in the remote repository:

# GitHub
$ vue create --preset <username>/<repo> <vue_project_name>

# GitLab private server
$ vue create --preset direct:https://gitlab.xxx.xx/vue-preset.git --clone <vue_project_name>

# local
$ vue craete ./<project_name> <vue_project_name>
Copy the code

Initialize the Preset directory structure

Create a directory

.├ ─ Template / │ ├─ ├─ generated.js ├─ Recall. Json ├─ promptsCopy the code

Adding a Predefined File

Preset. Json is a JSON file with predefined options automatically generated when using the $vue create command, located in C:\Users\ Computer name \. Vuerc for Windows and ~/.vuerc for MacOS. The contents of the file will show the selected contents:

{
  "useTaobaoRegistry": true."packageManager": "yarn"
}
Copy the code

The following is a local example:

{
  "useConfigFiles": true."cssPreprocessor": "less"."plugins": {
    "@vue/cli-plugin-babel": {},
    "@vue/cli-plugin-eslint": {
      "config": "airbnb"."lintOn": ["save"."commit"]},"@vue/cli-plugin-router": {},
    "@vue/cli-plugin-vuex": {}}}Copy the code

For details, see Vue CLI Preset

Define the template

My project Template

D:.│.editorConfig │.env │ env.dev │ env.dev213 │ env.prd │ env.prd213 │ eslintignore │ .gitignore │.npmrc │ prettierrc │ babel.config.js │ dev.js │ directory.txt │ idea.config.js │ LICENSE │ Package-lock. json │ package.json │ readme. md │ sentry.config.js │ vue │ ├─ Public │ ├─ Favicon. Ico │ │ goright V2. Js │ │ │ ├ ─ dev │ │ favicon. Ico │ │ │ └ ─ tinymce │ │ emojis. Js │ │ │ ├ ─ langs │ │ zh_CN. Js │ │ │ └ ─ skins │ └ ─ lightgray │ Content.min.css │ skin.min.css │ ├─ SRC │ app.vue │ defaultSets.js │ main.js │ permission Offer. Js │ │ │ └ ─ "│ index. The js │ information. Js │ workflow. Js │ ├ ─ components │ │ ChartCard. Vue │ │ index. The less │ │ README.md .......Copy the code

Something to watch out for

If the template does not define the files generated by the Vue CLI itself, the default is to use the original ones, such as home.vue and about.vue in the view/ directory
Template files that start with a. Need to change. To _, and template files that start with _ must be defined as __ otherwise they will not render correctly
Empty folders will not render correctly
Since vue-CLI uses EJS rendering, templates with EJS code may report errors, such as:
```
<link rel="icon" href="<%= VUE_APP_BASE_URL %>favicon.ico">
Copy the code
```
VUE_APP_BASE_URL %> <%= VUE_APP_BASE_URL %> <%= VUE_APP_BASE_URL %> <%= VUE_APP_BASE_URL %>
```
<link rel="icon" href="<%%= VUE_APP_BASE_URL %%>favicon.ico">
Copy the code
```

Extended dependency packages

The genarator.js file is used to add other dependencies to the project, such as UI frameworks, toolclass libraries, and so on. The rendering of the template template is also done in this file. This file needs to export a function with three arguments:

API: Generator instance that functions can operate on, such as extending dependencies, checking plug-ins, viewing versions, and so on
Options: Customizing the Vue CLI is used in conjunction with the interactive command line to receive answer parameters
RootOptions: all predefined content, i.e., everything in preset. Json, and includes project name, description of configuration in SRC /main.js, etc:

{
  "useConfigFiles": true."cssPreprocessor": "less"."plugins": {
    "@vue/cli-plugin-babel": {},
    "@vue/cli-plugin-eslint": {
      "config": "airbnb"."lintOn": ["save"."commit"]},"@vue/cli-plugin-router": {},
    "@vue/cli-plugin-vuex": {}}}Copy the code

Adding dependencies

To add scripts and dependencies to a project, use the extendPackage() method of a Generator instance, which contains the same content as package.json. You can simply declare the NPM package name and version according to the type of dependencies.

api.extendPackage({
        "dependencies": {
            "@antv/data-set": "^ 0.11.2"."@jeecg/antd-online-beta220": "^" 1.0.1. },"devDependencies": {
            "@babel/polyfill": "^ 7.2.5." "."@vue/cli-plugin-babel": "^ 3.3.0". },scripts: {
            "pre": "yarn --registry https://registry.npm.taobao.org || cnpm install || npm install --registry https://registry.npm.taobao.org "."dev": "node dev.js && vue-cli-service serve --mode dev"."build:prd": "cross-env VUE_APP_RELEASE= npm run gitHash && npm run build -- --mode prd && git rev-parse --short HEAD > ./dist/version"."build:test": "cross-env VUE_APP_RELEASE= npm run gitHash && npm run build -- --mode test"."build:beta": "cross-env VUE_APP_RELEASE= npm run gitHash && npm run build -- --mode prdBeta && git rev-parse --short HEAD > ./dist/version"."build": "node --max_old_space_size=20000 node_modules/@vue/cli-service/bin/vue-cli-service.js build"."gitHash": "cross-env-shell \"git rev-parse --short HEAD\""."lint": "vue-cli-service lint"."build213": "cross-env VUE_APP_RELEASE= npm run gitHash && npm run build -- --mode prd213 && git rev-parse --short HEAD > ./dist/version"}})Copy the code

Apply colours to a drawing template

Use the render() method to render the template defined in the template, which actually uses EJS for rendering, passing in a string relative to the path, replacing the original directory directly. You can also pass in Hash objects to render files (not folders), and write multiple randers () one by one:

  api.render('./template');

  api.render({
    './.eslintrc.js': './template/_eslintrc.js'.'./.gitignore': './template/_gitignore'
  })

Copy the code

Interactive command line

Is a built-in dialog configuration file that prompts the user to install the operation process

Many command line operations involve conversational situations, such as Git operations and various CLI operations, which are geeky-looking and implemented by node.js interactive command line Inquirer. To customize a Vue CLI dialog, use the prompts. Js file, which should export an array of prompts with the same data structure as the inquirer. Prompt () argument, where each object is treated as a question on the command line

module.exports = [
    {
        type: "confirm".// Problem type
        name: "sentry".// The key that stores the answer
        message: "Whether to use sentry?".// The content of the question
        default: false.// The default value when not selected
        choices: [ / / options
            {
                name: 'is'./ / options
                value: true // The value of the option
            },
            {
                name: 'no'./ / options
                value: false // The value of the option}]}, {type: "confirm".// Problem type
        name: "micro".// The key that stores the answer
        message: "Do you participate in the micro front end?".// The content of the question
        default: false.// The default value when not selected
        choices: [ / / options
            {
                name: 'is'./ / options
                value: true // The value of the option
            },
            {
                name: 'no'./ / options
                value: false // The value of the option}]}, {name: "app".type: "input".message: "Please name your app (xxxApp)".when: (answers) = > answers.micro,
    },
]

Copy the code

The options parameter of the function in genarator.js file above is useful. You can print options in the function, and the answer is stored in an object in the form of key-value

Customize vuE-CLI templates