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