vue项目中用命令创建组件

《 -> 敲黑板、划重点 <- 》

新建一个模板文件夹Template

1.创建一个模板 index.vue 文件如下：

<template>
    <div>
      gjf测试模板
    </div>
</template>

<script>
    export default {
        name: '',
        data() {
            return {

            }
        },
        mounted() {

        },
        methods: {
           
        },
    }
</script>

<style lang="scss" scoped>

</style>

2.创建生成模板 index.js

//引入所需模块
const chalk = require('chalk')
const path = require('path')
const fs = require('fs')
const ora = require('ora');
const inquirer = require('inquirer')
const files = fs.readdirSync('./src/components')  //读文件夹的位置


const created = () => {
    inquirer.prompt([{
        type: 'input',
        message: '请输入组件名称',
        name: 'name',
    }]).then((answers) => {
        let n = answers.name.match(/([\u4e00-\u9fa5])|([~!@#$%^&*()_+{}|":<>?/*-+.])|([0-9])|([\s])/g);
        if (n) {
            console.log(chalk.red('输入名称存在非法字符,请重新输入'));
            created()
        } else {
            for (let i = 0; i < files.length; i++) {
                files[i] = files[i].toUpperCase()
            }
            let componentsName = files.indexOf(answers.name.toUpperCase());
            if (componentsName !== -1) {
                console.log(chalk.red('该组件已经存在请重新输入'));
                created()
            } else {
                const spinner = ora(`Loading ${chalk.green('组件创建中')}`).start();
                detectFolder(answers.name, spinner)
            }
        }
    }).catch((error) => {

    })
}
created()
// 创建文件夹
function detectFolder(componentsName, spinner) {
    fs.mkdir(`${'src/components/'+componentsName}`, function(error) {
        if (error) {
            console.log(error);
            return false
        } else {
            spinner.succeed(componentsName + '创建成功')
            
            fs.mkdir(`${'src/components/'+componentsName+'/ComponentContent'}`, function(error) {
                if (error) {
                    console.log(error);
                    return false
                } else {
                    spinner.succeed(componentsName + '/ComponentContent 文件夹创建成功')
                    fs.writeFile(`${'src/components/'+componentsName+'/ComponentContent/index.vue'}`, "", function(err) {
                        if (err) {
                            return console.log(err);
                        }
                        //读取模板index.vue
                        fs.readFile('Template/index.vue', 'utf8', (err, data) => {
                            if (err) {
                                console.error(err)
                                return
                            }
                            //文件中写入index.vue
                            fs.writeFile(`${'src/components/'+componentsName+'/ComponentContent/index.vue'}`, data, function(err) {
                                if (err) {
                                    return console.log(err);
                                }
                                spinner.succeed('模板写入成功')
                            })
                        })
                    })
                }
            })
            //直接写入说明文件
            fs.writeFile(`${'src/components/'+componentsName+'/README.md'}`, "说明文件", function(err) {
                if (err) {
                    return console.log(err);
                }
                spinner.succeed(componentsName + '/README.md 文件创建成功')
            })
        }
    })
}

3.在vue的package.json中进行配置

 "scripts": {
        "serve": "vue-cli-service serve",
        "dev": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint",
        "temp": "node Template/index.js"  
    },

4.**在命令行执行npm run temp 那么这样我们就可以直接写入组件了，免去了每次繁琐的新建同样的组件啦！**

交流

1、QQ群：可添加qq群共同进阶学习： 进军全栈工程师疑难解 群号: 856402057
2、公众号：公众号「进军全栈攻城狮」

对前端技术保持学习爱好者欢迎关注公众号共同学习。在进阶的路上，共勉！