Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to generate vue components automatically through npm or yarn". In daily operation, I believe many people have doubts about how to generate vue components automatically through npm or yarn. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the questions of "how to automatically generate vue components through npm or yarn". Next, please follow the editor to study!

Practical steps

Install chalk, a plug-in that allows our console output statements to be distinguished in various colors

Npm install chalk-save-dev yarn add chalk-save-dev

Create a scripts folder in the root directory

Add a new generateComponent.js file to place the code that generates the component

Add a new template.js file to place the code for the component template

Template.js file, the contents of which can be customized to match the template of the current project

/ / template.jsmodule.exports = {vueTemplate: compoenntName = > {return `${compoenntName} component export default {name:'${compoenntName}'}. ${compoenntName} {}`}, entryTemplate: `import Main from'. / main.vue'export default main`}

GenerateComponent.js generates code for vue directories and files

/ / generateComponent.js`const chalk = require ('chalk') / / console print color const path = require (' path') const fs = require ('fs') const resolve = (. File) = > path.resolve (_ _ dirname,... file) const log = 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 _ = process.argv.splice (2) [0] = ='- com'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)}})} / / Common component catalog src/base, global registration component catalog src/base/global, page component catalog src/components_? Log ('Please enter the name of the component to be generated, if you need to generate the global component Please add global/ prefix'): log ('Please enter the name of the page component to be generated, which will be generated in the components/ directory') let componentName =''process.stdin.on (' data', async chunk = > {const inputName = String (chunk). Trim (). ToString () / process if (_) {/ component directory path const componentDirectory = resolve ('.. / src/base') according to different types of components InputName) / / vue component path const componentVueName = resolve (componentDirectory, 'main.vue') / / entry file path const entryComponentName = resolve (componentDirectory,' index.js') const hasComponentDirectory = fs.existsSync (componentDirectory) if (hasComponentDirectory) {errorLog (`${inputName} component directory already exists Please re-enter `) return} else {log (`generating component directory ${componentDirectory}`) await dotExistDirectoryCreate (componentDirectory)} try {if (inputName.includes ('/')) {const inputArr = inputName.split ('/') componentName = inputArr [inputArr.length-1]} else {componentName = inputName} log (`generating vue file ${componentVueName}`) await generateFile (componentVueName) VueTemplate (componentName)) log (`generating entry file ${entryComponentName} `) await generateFile (entryComponentName, entryTemplate) successLog ('generated successfully')} catch (e) {errorLog (e.message)}} else {const inputArr = inputName.split ('/') const directory = inputArr [0] let componentName = inputArr [inputArr.length-1] / / Page component directory const componentDirectory = resolve ('. / src/components') Directory) / / vue component const componentVueName = resolve (componentDirectory, `${componentName} .vue`) const hasComponentDirectory = fs.existsSync (componentDirectory) if (hasComponentDirectory) {log (` ${componentDirectory} component directory already exists, directly generate vue file `)} else {log (` generating component directory ${componentDirectory} `) await dotExistDirectoryCreate (componentDirectory)} try {log (` generating vue file ${componentName} `) await generateFile (componentVueName) VueTemplate (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)})} / / Recursive create directory function mkdirs (directory) Callback) {var exists = fs.existsSync (directory) if (exists) {callback ()} else {mkdirs (path.dirname (directory), function () {fs.mkdirSync (directory) callback ()})}}

Two new lines of command are added to configure package.json,scripts, in which-com is used to distinguish whether to create a page component or a public component

"scripts": {"new:view": "node scripts/generateComponent", "new:com": "node scripts/generateComponent-com"}

Execution

Npm run new:view / / generate Page component npm run new:com / / generate basic component or yarn run new:view / generate Page component yarn run new:com / / generate basic component

At this point, the study on "how to automatically generate vue components through npm or yarn" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.