Make writing a habit together! This is the 9th day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details.

Create project template development

Publish templates to NPM

The development of the template requires the creation of a new folder named hzw-cli-dev-template. Each item in the folder is a template. Create a new directory hzw-cli-dev-template-vue3 and initialize NPM init-y to create a vue3 template.

The hzw-cli-dev-template-vue3 directory is only used to store templates, and some additional logic may be added later. Create a new template folder under the directory. This is the real template module.

// The directory structure is as follows
D: \ imooc - learn \ HZW - cli - dev - template ├ ─ ─ HZW cli - dev - the template - vue3 ├ ─ ─ the template └ ─ ─ package. The jsonCopy the code

We used vuE-CLI to create a default template, vue Create test-vue3, and then modified some of the content based on this template to become our own custom template, and moved all the modified content into the template.

The template is then sent to NPM via NPM publish.

Store template information in the database

You can visually modify the database data using mongodb Compass by filling in the following fields.

The interface is called again and the data is retrieved normally.

Create a request tool module

Create a @hzw-cli-dev/request package and place it in utils. Then install AxiOS on it.

lerna create @hzw-cli-dev/request
lerna add axios utils/request
Copy the code

Connect ECONNREFUSED 127.0.0.1:80 baseUrl connecnrefused 127.0.0.1:80 baseUrl connecnrefused 127.0.0.1:80

// utils\request\lib\index.js
const axios = require('axios')

// error????? if baseurl is set
// const BASE_URL = process.env.HZW_CLI_BASE_URL || 'http://www.duwanyu.com:7001'
// axios.defaults.baseUrl = BASE_URL

axios.defaults.timeout = 5000

// Response interceptor
axios.interceptors.response.use(
  response= > {
    return response.data
  },
  error= > {
    return Promise.reject(error)
  }
)

module.exports = axios;
Copy the code

Request Template API

Create a new file in init\lib to retrieve template information. As mentioned earlier, baseUrl was set to error, so this is the only place to do concatenation.

// commands\init\lib\getTemplate.js
const axios = require('@hzw-cli-dev/request')
const BASE_URL = process.env.HZW_CLI_BASE_URL || 'http://www.duwanyu.com:7001'
const url = `${BASE_URL}/project/gettemplate`

module.exports = function() {
  return axios.get(url)
}
Copy the code

Determine if there are templates in the library

// Commands \init\lib\index.js prepare

  const getTemplate = require('./getTemplate')
  
  async prepare() {
    // 0. Check whether the template exists
    const template = await getTemplate()
    console.log('🚀🚀 ~ InitCommand ~ template', template);
    if(! template || template.length ===0) {
      throw new Error("No project template currently exists")}// omit unimportant code. . }Copy the code

Then the request results can be retrieved normally.

Add select template interaction

The template list is dynamically generated using methods.

// Commands \init\lib\index.js getInfo method. . {type: 'list'.message: 'Please select project template'.name: 'template'.default: 'vue3'.choices: this.createTemplateChoices() }, ... ./ * * *@description: Dynamically create template options list *@param {*}
   * @return {*}* /
  createTemplateChoices() {
    return this.template.map((item) = > ({
      value: item.npmName,
      name: item.name
    }))
  }
Copy the code

With the interaction added, templates can be selected at project creation time.

Add a second template

Download it from 👉👉vue-element-admin as a zip file.

Also run the project first

An error occurred while installing dependencies. The solution is as follows

  • vue-element-admin\package.jsondelete"Tui - editor", "1.3.3".
  • vue-element-admin\src\componentsdeleteMarkdownEditorfolder
  • vue-element-admin\src\views\components-demodeletemarkdown.vuefile
  • vue-element-admin\src\router\modules components.jsdelete{path: 'markdown',... }
  • useyarn installInstall dependencies

Then NPM run dev is run and it looks like this.

Then we changed the code to what we wanted and moved it to hzw-cli-dev-template-vue-admin under hzw-cli-dev-template.

Execute NPM publish to send to NPM.

Then add a piece of data to the database.

Now we have two templates for our scaffold.

The advantage of this is that when scaffolding development is complete and a new template needs to be added, there is no need to change the scaffolding code, just publish a new template to NPM and add a piece of data to the database.