前端项目一键生成目录文件模板等

根据json文件配置路径和文件模板，执行npm命令可以一键生成减少频繁创建文件夹书写重复代码等烦恼。

• 使用

1. 下载核心代码generateViewTemplate.js到src下的plugins目录下
2. 在项目根目录下配置generateView.config.json文件
3. 在package.json中配置script："generateView":"node ./src/plugins/generateViewTemplate.js"
4. （可选）在项目根目录下public文件夹下配置template.vue文件，可以根据代码自己修改位置
5. 最后一步，控制台执行npm run generateView命令即可生成！

---

• 核心代码

import path from "path"
import fs from "fs"

//系统指定模板
//vue3（默认）
let defaultContent = `<template>
<div class="container"></div>
</template>
<script setup>
import {ref,reactive} from 'vue'
</script>
<style scoped lang='scss'>
</style>`
//vue2
let v2 = `
<template>
<div class="container"></div>
</template>
<script>
export default {
  data(){
    return{

    }
  },
  created(){

  },
  methods:{

  }
}
</script>
<style scoped lang='scss'>
</style>
`
//用户自定义模板
let diyContent = ""
//
const content = {
  v2,
  defaultContent,
  diyContent
}

/**
 * 解析任意格式路径并创建目录
 * @param {string} dirPath 创建文件路径
 * @returns Promise
 */
function createDirectory(dirPath) {
  // 使用path.normalize确保路径格式正确且可移植
  const normalizedPath = path.normalize(dirPath)
  // 使用mkdir创建新目录
  return new Promise((resolve, reject) => {
    fs.mkdir(normalizedPath, { recursive: true }, error => {
      if (error) {
        console.error(`无法创建目录：${normalizedPath}`, error)
        reject(false)
        return
      }
      console.log(`目录已成功创建：${normalizedPath}`)
      resolve(true)
      return
    })
  })
}

/**
 * 根据指定路径生成模板文件
 * @param {string} generatePath //生成文件文件夹路径
 * @param {string} fileName //生成该路径下的文件名
 */
function generater(generatePath, fileName,content) {
  createDirectory(generatePath).then(res => {
    if (res) {
      fs.writeFile(generatePath + "/" + fileName, content, err => console.log(err))
    }
  })
}

/**
 * 读取文件内容
 * @param {string} path 指定读取文件第路径和文件名
 * @returns Promise
 */
function myFileReader(path) {
  return new Promise((resolve, reject) => {
    fs.readFile(path, "utf8", (err, data) => {
      if (err) console.log(err)
      resolve(data)
    })
  })
}


//执行代码

myFileReader("generateView.config.json").then(res => {
  const { config, view } = JSON.parse(res)
  if(config.templateUrl){//非空才会执行
    myFileReader(config.templateUrl).then(resDiyContent => {
      diyContent = resDiyContent//获取读取到的用户自定义模板
    })
  }
  console.log(config, "config")
  if (config.isNone) {
    //如果设置为空，则只创建文件不写内容
    view.forEach(item => {
      const pathInfo = path.parse(item.path)
      generater(config.baseUrl + pathInfo.dir, pathInfo.base,"")
    })
  } else {
    /**
     * 首先判断
     */
    view.forEach((item, index, arr) => {
      const pathInfo = path.parse(item.path)
      if(item.template){
        if(item.template === 'v3'){
          generater(config.baseUrl + pathInfo.dir, pathInfo.base,defaultContent)
        }else{
          generater(config.baseUrl + pathInfo.dir, pathInfo.base,content[item.template])
        }
      }else {
        if(config.templateUrl && config.templateUrl !== ''){
          if(diyContent !== ""){
            generater(config.baseUrl + pathInfo.dir, pathInfo.base,diyContent)
          }else{
            myFileReader(config.templateUrl).then(resDiyContent => {
              diyContent = resDiyContent//获取读取到的用户自定义模板
              generater(config.baseUrl + pathInfo.dir, pathInfo.base,diyContent)
            })
          }
          
        }else{
          generater(config.baseUrl + pathInfo.dir, pathInfo.base,defaultContent)
        }
       
      }
     
    })
  }
})

• JSON配置项，目前还在更新中

  {
      "config":{
          "isNone":false,
          "templateUrl":"public/template.vue",
          "baseUrl":"src/view/"
      },
      "view":[
          {
              "path":"home/user/index.vue",
              "template":"v3"
          },
          {
              "path":"home/friends/index.vue"
          },
          {
              "path":"setting/add.vue",
              "template":"v3"
          },
          {
              "path":"setting/del.vue",
              "template":"v2"
          },
          {
              "path":"setting/upd.vue",
              "template":"v3"
          },
          {
              "path":"setting/que.vue",
              "template":"v3"
          }
      ]
  }

• 配置项

• config	配置一些公共功能
  view	配置页面路径，和单个页面的配置
  isNone	是否清空模板内容
  templateUrl	用户自定义模板路径，默认从项目根目录下开始找
  baseUrl	生成文件的基础路径
  path	每个页面生成的路径
  template	每个页面生成所使用的模板，如果为空则使用用户自定义模板，如果用户自定义模板也为空则使用系统默认模板（vue3）