I worked on a VUE project from 0 to 1 recently, and wrote a preset for next convenient use, also to talk about some things in this project.

According to the document on the official website:

You can share a Preset with other developers by releasing a Git repo. The repO should contain the following files:

  • preset.json: Primary file containing preset data (required).
  • generator.js: a tool that can inject or modify files in a projectGenerator.
  • prompts.jsOne that can collect options for the Generator through a command line dialoguePrompts file.

After releasing the REPO, you can use this remote preset during project creation using the — Preset option

Let’s start with a new repo at GitHub and add three files to the repo: preset. Json, Generator. js, and Prompts.

Prompt. Js allows the user to configure the project through the command line dialogue, which is not involved this time, so simply export the empty array:

module.exports = []
Copy the code

The generator.js file is responsible for injecting or modifying files in the project. The two main apis used here are:

  • api.extendPackage: used to extend the projectpackage.json, including dependencies,scriptsAnd others in thepackage.jsonThe configuration used in
  • api.render: used to copy files from the template project to the initialized project (when you need to create a.Start the file when needed in the template project_alternative.)

<%%= BASE_URL %> <%% > <%%= BASE_URL %%> <%% > <%%= BASE_URL %%> <%% > <%%= BASE_URL %> Of course, you can also use EJS for more fine-grained control over the code in your files.

module.exports = (api, options, rootOptions) => {
    api.extendPackage({
        'dependencies': {
            'axios': '^0.19. 0',
            'lodash': '^4.1715.',
            'normalize.css': '^8.01.',
        },
        'devDependencies': {
            '@babel/plugin-proposal-optional-chaining': '^7.9. 0',
            '@commitlint/cli': '^8.3. 5',
            '@commitlint/config-conventional': '^8.34.',
            '@leo-tools/eslint-config-vue': '^0.09.',
            '@vue/eslint-config-standard': '^5.12.',
            'babel-plugin-lodash': '^3.34.',
            'commitizen': '^4.04.',
            'compression-webpack-plugin': '^3.1. 0',
            'cross-env': '^7.02.',
            'cz-conventional-changelog': '^3.1. 0',
            'lodash-webpack-plugin': '^0.11. 5',
            'vue-cli-plugin-webpack-bundle-analyzer': '~2.0. 0',
            'vue-svg-loader': '^0.16. 0',
        },
        'scripts': {
            'build:dev': 'vue-cli-service build --mode development',
            'build:prod': 'vue-cli-service build --mode production',
            'test:unit': 'cross-env NODE_ENV=test vue-cli-service test:unit',
            'test:e2e': 'cross-env NODE_ENV=test vue-cli-service test:e2e',
            'lint': 'vue-cli-service lint src/ * * /*.{js,vue} tests/ * * /*.js --fix'
        },
        'config': {
            'commitizen': {
                'path': 'node_modules/cz-conventional-changelog'
            }
        },
        'gitHooks': {
            'pre-commit': 'lint-staged',
            'commit-msg': 'commitlint -e $GIT_PARAMS'
        },
        'lint-staged': {
            'src/ * * /*.{js,jsx,vue}': [
                'vue-cli-service lint --fix',
                'git add'
            ],
            'tests/ * * /*.js': [
                'vue-cli-service lint --fix',
                'git add'
            ]
        }
    })

    api.render('./template')
}
Copy the code

Json is mainly the vue configuration, which can be found in the ~/. Vuerc file after the project is initialized with vue create XXX and saved as a local template, for example:

{
  "useTaobaoRegistry": false."packageManager": "yarn"."useConfigFiles": true."router": true."vuex": true."cssPreprocessor": "node-sass"."plugins": {
    "@vue/cli-plugin-babel": {},
    "@vue/cli-plugin-pwa": {},
    "@vue/cli-plugin-router": {
      "historyMode": true
    },
    "@vue/cli-plugin-vuex": {},
    "@vue/cli-plugin-eslint": {
      "config": "prettier"."lintOn": [
        "save"]},"@vue/cli-plugin-e2e-cypress": {},
    "@vue/cli-plugin-unit-jest": {}}}Copy the code

Once this is all set, a new PROJECT can be generated directly with vue create — PRESET leo-tools/ VUe-CLI-preset

. — Preset followed by the GitHub username/repo parameter, such as this project is Leo-tools/VUe-cli-preset.

That’s all for today, and next time we’ll talk about architecture and some optimizations in this project.

Refer to the article

  • preset

  • How to use VUE-CLI 3 preset to Build a Front-end project template based on a Git REPo