background

Now vuE-CLI3.0 has been popularized, and scaffolding itself also provides many functions. We can also build personalized scaffolding based on it to meet more needs. However, vuE-CLI does not support the function of adding pages, and each new page needs to be manually modified. How many steps does it take to manually add a page?

Steps to create a new page

To add a page, as shown above, there are five steps:

1. First, add a VUE homepage for developing the business logic of the new page;

2. Added the JS file of the state management library, which is used to store the state and method of the new page sharing;

3, modify the entry file of the status management library, add the introduction of new page status management library file, for example:

import newPage from './module/newPage'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {
    newPage
  }
})

Copy the code

4. Add the JS file corresponding to the request, because I have carried out independent encapsulation of the request to the scaffold, so there is an extra step for the request processing of the new page;

5. Modify the Router configuration file and add the new Router. For example:

const router = new Router({
  routes: [
    {
      path: '/newPage',
      name: 'newPage',
      component: () => import('@/views/newPage')}]})export default router
Copy the code

Therefore, each new page, have to modify the above five configuration, tedious steps do not say, occasionally missing a page error is not unknown. So how do you simplify the process of adding pages?

Train of thought

Therefore, referring to the team’s NutUI component library to add components, automatic generation of corresponding configuration files, the introduction of inquirer library, user and command line interaction tools, as well as FS-Extra library, file related operations tool library. You can run a command to automatically generate and modify the above five configuration files.

practice

First, introduce the user and command line interaction tool, used to enter the name of the new page, the key code is as follows:

const newpageQuestions = [{
    type: 'input',
    name: 'pagename',
    message: 'Please enter English name of new page',
    validate: function (input){
        if(! input) {return 'Cannot be empty'
        }
        try {
          var stat = fs.statSync('src/views/' + input)
          return 'File already exists, please exit'
        } catch(error){
          return true
        }
        return true
    }
  }
]
inquirer.prompt(newpageQuestions).then(function (answers) {
    createDir(answers)
})

Copy the code

If you execute this file, the following information is displayed on the command line:

Of course, you can build some templates in advance and let the user choose based on the template type.

After we enter the English name of the new file, the Chinese title, and the required template, we can use the FS-Extra file reading and writing tool to continue, such as generating a new VUE logic page:

// Generate the form home directoryfunctionCreateMainForm (pagename, pageTitle) {// Copy fs.copysync ('template/views/form'.'src/views/'+ pagename) // Modify the index.vue filelet file = fs.readFileSync('template/views/form/index.vue')
  fs.writeFileSync('src/views/' + pagename + '/index.vue', file.toString().replace(/pagename/g, pagename)) 
}
Copy the code

In addition, you need to automatically modify the corresponding imports in Router and Store, for example:

/ / modify the routerfunction changeRouter (pagename) {
  const str = ' { path: \'/' + pagename + '\', name: \'' + pagename + '\', component: () => import(\'@/views/' + pagename + '\')},
  const data = fs.readFileSync('src/router/index.js').toString().split('\n')
  let index = 0
  for (let i = 0; i < data.length; i++) {
    if (data[i].includes('routes: [')) {
      index = i
      break}} data.splice(index + 1, 0, STR) // Add router fs.writefilesync ('src/router/index.js', data.join('\n'))}Copy the code

This way, the old days of modifying or creating five new files every time a new page is added are gone, and new pages can be built with a single command, increasing efficiency and reducing the risk of human error.

conclusion

Tired of spending 30 seconds changing the code again and again, spend 30 minutes optimizing the existing process and leave the repetitive work to automated scripts.