Do you still create new files manually in the VUE project? Let’s learn how to use NPM command to create a file. The operation is simple and the most important thing is to force high

1. Add the NPM command

First add it to the package.json file scripts

<! You can create two components: one to generate a component and the other to generate a page."scripts": {<! --./scripts/newComp is the js file path for the generated template file, which can be changed as needed -->"new:comp": "node ./scripts/newComp"."new:page": "node ./scripts/newPage"
  }
Copy the code

2. Create the corresponding JS file

Create three files in the Script folder

Newcomp.js // Create a component file newPage.js // Create a page file template.js // page/component template fileCopy the code

newPage.js

Only newPage files are listed here. NewComp files can be changed according to actual conditions

const chalk = require('chalk')
const path = require('path')
const fs = require('fs') const resolve = (... file) => path.resolve(__dirname, ... file) constlog = message => console.log(chalk.green(`${message}`))
const successLog = message => console.log(chalk.blue(`${message}`))
const errorLog = error => console.log(chalk.red(`${error}Const {vueTemplate, entryTemplate} = require())'./template'Const generateFile = (path, data) => {if (fs.existsSync(path)) {
        errorLog(`${path}File already exists')return
    }
    return new Promise((resolve, reject) => {
        fs.writeFile(path, data, 'utf8', err => {
            if (err) {
                errorLog(err.message)
                reject(err)
            } else {
                resolve(true)}})})}log('Please enter the name of the page component to be generated, it will be generated in the views/ directory')
let componentName = ' '
process.stdin.on('data'. Async chunk => {// component name const inputName = String(chunk).trim().tostring () // Vue page componentPath can be modified as required const componentPath = resolve('.. /.. /src/views'// Vue file const vueFile = resolve(componentPath,'main.vue'Const entryFile = resolve(componentPath,'entry.js'Const HasEntExists = fs.existsSync(componentPath) const HasEntExists = fs.existsSync(componentPath)if (hasComponentExists) {
        errorLog(`${inputName}Page component already exists, please re-enter ')return
    } else {
        log(' Building the Component directory${componentPath}') await dotExistDirectoryCreate(componentPath)} try {// Get component nameif (inputName.includes('/')) {
            const inputArr = inputName.split('/')
            componentName = inputArr[inputArr.length - 1]
        } else {
            componentName = inputName
        }
        log'Generating vUE files${vueFile}`)
        await generateFile(vueFile, vueTemplate(componentName))
        log(' An Entry file is being generated${entryFile}`)
        await generateFile(entryFile, entryTemplate(componentName))
        successLog('Generated successfully')
    } catch (e) {
        errorLog(e.message)
    }

    process.stdin.emit('end')
})
process.stdin.on('end', () = > {log('exit')
    process.exit()
})

function dotExistDirectoryCreate(directory) {
    return new Promise((resolve) => {
        mkdirs(directory, function() {
            resolve(true)})})} // Create a directory recursivelyfunction mkdirs(directory, callback) {
    var exists = fs.existsSync(directory)
    if (exists) {
        callback()
    } else {
        mkdirs(path.dirname(directory), function() {
            fs.mkdirSync(directory)
            callback()
        })
    }
}
Copy the code

template

// template.js
module.exports = {
    vueTemplate: compoenntName => {
        return `<template>
                    <div class="${compoenntName}">
                        ${compoenntName}Component </div> </template> <script>export default {
    name: '${compoenntName}'
};
</script>
<style lang="stylus" scoped>
.${compoenntName}{}; </style>` }, entryTemplate: compoenntName => {return `import ${compoenntName} from './main.vue'
        export default [{
            path: "/${compoenntName}",
            name: "${compoenntName}",
            component: ${compoenntName}`}}}]Copy the code