【fs模块运用】在项目结构中添加脚本，自动生成组件文件，提高开发效率

 

---

前言

最近使用vue3 + ts 搭建项目过程中，发现在新建组件的过程中有些繁琐，需要新建文件（.vue, .ts, .stylus, interface,  vuex文件， 每个组件的api文件），然后copy基本内容框架，当组件比较多时这些操作就显得非常费事费力。因为懒所以写了一个node脚本，只要动动手指就可以自动生成文件，可以大大的加快开发效率。

---

 

一、fs模块

脚本主要运用了nodejs的fs模块，fs模块是nodejs的一个核心模块，专门用来操作系统中的文件。

二、脚本代码

1.脚本源代码

/*
 * @Description: 页面快速生成脚本
 * @Date: 2020-09-28 10:28:08
 * @LastEditTime: 2020-09-28 17:05:04
 */
const fs = require('fs')
const path = require('path')
const basePath = path.resolve(__dirname, '../src')

const dirName = process.argv[2]
const capPirName = dirName.substring(0, 1).toUpperCase() + dirName.substring(1)
if (!dirName) {
    console.log('文件夹名称不能为空！')
    console.log('示例：npm run tep ${capPirName}')
    process.exit(0)
}



/**
 * @msg: vue页面模版
 */
const VueTep = `<template>
  <div class="${dirName}-wrap">
    {
  {data.pageName}}
  </div>
</template>

<script lang="ts" src="./${dirName}.ts"></script>

<style lang="stylus">
  @import './${dirName}.styl'
</style>

`

// ts 模版
const tsTep = `import { Component, Vue } from "vue-property-decorator"
import { Getter, Action } from "vuex-class"
import { ${capPirName}Data } from '@/types/view