vue的基于webpack项目，通过node生成组件

做前端的大家都知道通过 vue 开发的项目每次创建新组建的时候，都要新建一个目录，然后新增 .vue /.js/.less文件，在这个文件中再写入 template 、 引入script 和style 这些内容，虽然在写入的时候大家都有自己的自动补全，不过每次都要这样重复操作，很麻烦有没有。

本文就是通过node来帮助我们，自动去执行这些重复操作，而我们只需要告诉控制台我们需要创建的组件名字就可以了。
本文自动创建的组件包含3个文件：***.vue    ***.js    ***.less

1.安装chalk  (chalk是一个颜色的插件,为了方便我们能看清控制台输出的各种语句，我们先安装一下 chalk)

npm install chalk --save-dev

2.创建

• 在根目录中创建一个 scripts 文件夹
• 在 scripts 中创建  index.js ，放置生成组件的代码
• 在 scripts 中创建  viewsTemplateToods.js组建模板代码
• 在 scripts 中创建在 template文件夹， 并在template中新建 vueTemplate.js和jsTemplate.js ，放置组件模板的代码，模板内容可根据项目需求自行修改 

index.js

const chalk = require('chalk');
const path = require('path');
const fs = require('fs');//文件系统，文件的读取啥的
const resolve = ( ...file ) => path.resolve(__dirname, ...file);
const log = message => console.log(chalk.yellow(`${ message }`));
const successLog = message => console.log(chalk.green(`${ message }`));
const errorLog = error => console.log(chalk.red(`${ error }`));
// 导入模板
const { vueTemplate, jsTemplate, lessTemplate } = require('./viewsTemplateToods');
// 生成文件
const generateFile = ( path, data ) => {
  if (fs.existsSync(path)) {
    errorLog(`${ path }文件已存在`);
    return
  }
  return new Promise(( resolve, reject ) => {
    fs.writeFile(path, data, 'utf8', err => {
      if (err) {
        errorLog(err.message);
        reject(err)
      } else {
        resolve(true)
      }
    })
  })
};
log('请输入要生成的页面名称：');
let componentName = '';
process.stdin.on('data', async chunk => {
  // 组件名称
  const inputName = String(chunk).trim().toString();
  //vue组件路径
  const componentDirectory = resolve('../src/views', inputName);
  //生成vue模板
  const componentVueName = resolve(componentDirectory, `${ inputName }.vue`);
  //生成js
  const entryComponentName = resolve(componentDirectory, `${ inputName }.js`);
  //生成less
  const componentStyleName = resolve(componentDirectory, `${ inputName }.less`);
  //判断组件文件夹是否存在
  const hasComponentDirectory = fs.existsSync(componentDirectory);
  if (hasComponentDirectory) {
    errorLog(`${ inputName }组件目录已存在，请重新输入`);
    return
  } else {
    log(`正在生成 component 目录 ${ componentDirectory }`);
    await dotExistDirectoryCreate(componentDirectory)
  }
  try {
    // 获取组件名
    if (inputName.includes('/')) {
      const inputArr = inputName.split('/');
      componentName = inputArr[ inputArr.length - 1 ];
    } else {
      componentName = inputName;
    }
    log(`正在生成 vue 文件 ${ componentVueName }`);
    await generateFile(componentVueName, vueTemplate(componentName));
    log(`正在生成 js 文件 ${ entryComponentName }`);
    await generateFile(entryComponentName, jsTemplate(componentName));
    log(`正在生成 less 文件 ${ componentStyleName }`);
    await generateFile(componentStyleName, lessTemplate(componentName));
    successLog('模板创建完成！请前往对应目录进行开发...');
  } catch (e) {
    errorLog(e.message)
  }
  process.stdin.emit('end')
});
process.stdin.on('end', () => {
  process.exit()
});

function dotExistDirectoryCreate( directory ){
  return new Promise(( resolve ) => {
    mkdirs(directory, function (){
      resolve(true)
    })
  })
}

// 递归创建目录
function mkdirs( directory, callback ){
  var exists = fs.existsSync(directory);
  if (exists) {
    callback()
  } else {
    mkdirs(path.dirname(directory), function (){
      fs.mkdirSync(directory);
      callback();
    })
  }
}

 

viewsTemplateToods.js

const { vueInit } = require('./template/vueTemplate');
const { jsInit } = require('./template/jsTemplate');

exports.vueTemplate = compoenntName => {
  return vueInit(compoenntName)
};

exports.jsTemplate = compoenntName => {
  return jsInit(compoenntName)
};

exports.lessTemplate = compoenntName => {
  return `.${ compoenntName } {
  
}
`
};

template/vueTemplate.js

exports.vueInit = compoenntName => {
    return `<style lang="less" scoped>
    @import "./${ compoenntName }.less";
  </style>
  <template>
    <div class="${ compoenntName }">
      这是${ compoenntName }组件
    </div>
  </template>
  <script src="./${ compoenntName }.js"></script>
  `
  };
  

template/jsTemplate.js

exports.jsInit = compoenntName => {
    return `export default {
    name: '${ compoenntName }',
    components: {},
    data(){
      return {
        
      }
    },
    computed: {},
    methods:{
      main() {
        
      }
    },
    created(){
  
    }
  }
  `
  };

3.配置package.json

4.控制台生成