@guoxianxin/auto-create-file

🗂️ 在 Vue 项目开发中自动创建 .vue、.less、.ts 等文件的辅助工具。新增 .vue 文件时，自动生成对应的样式和类型文件，并支持自定义模板和文件类型。

✨ 功能特性

• 👀 实时监听指定目录下的 .vue 文件创建
• 📝 自动生成配套的 .less 样式文件和类型文件（可配置）
• ⚙️ 支持通过 acf.config.js 自定义生成规则
• 🧩 默认提供 Vue+Less 的开发模板，开箱即用

📦 安装方式

npm install @guoxianxin/auto-create-file --save-dev

🚀 使用方法

1. 在项目根目录下的 package.json 添加命令：

   "scripts": {
     "acf": "acf"
   }

2. 终端运行：

   npm run acf

   此时将会监听配置目录（默认 ./src/views），当你新建 .vue 文件时，会自动创建：

• 同名 .less 文件（根据模板）
• 同名 .ts 类型文件（可选）

⚙️ 配置文件说明（acf.config.js）

在项目根目录下创建 acf.config.js 文件，导出一个配置对象：

module.exports = {
  pages: "./src/views", // 要监听的目录
  vueTemplate: `<template></template>\n<script setup lang="ts">\nimport {} from "vue";\n</script>\n<style lang="less" scoped></style>`, //vue文件的模版
  lessTemplate: `.p(@rules) {
      each(@rules, .(@value, @key, @index) {
        @{key}: if(ispixel(@value), (unit(round((@value / 3.75) * 100), vw) / 100), @value);
      });
  }`, //less文件的模版
  createFiletype: {
    vue: true, //是否生成.vue文件
    less: true, //是否生成.less文件
    ts: false,
    scss: false,
  },
};

默认配置（当项目中没有 acf.config.js 时）

{
  pages: "./src/views",
  vueTemplate: `<template></template>\n<script setup lang="ts">\nimport {} from "vue";\n</script>\n<style lang="less" scoped></style>`,//vue文件的模版
  lessTemplate: `.p(@rules) {
      each(@rules, .(@value, @key, @index) {
        @{key}: if(ispixel(@value), (unit(round((@value / 3.75) * 100), vw) / 100), @value);
      });
  }`,//less文件的模版
  createFiletype: {
    vue: true,
    less: true,
    ts: false,
    scss: false
  }
}

  pages: "./src/views",
  vueTemplate: `<template></template>\n<script setup lang="ts">\nimport {} from "vue";\n</script>\n<style lang="less" scoped></style>`,
  lessTemplate: `.p(@rules) {
      each(@rules, .(@value, @key, @index) {
        @{key}: if(ispixel(@value), (unit(round((@value / 3.75) * 100), vw) / 100), @value);
      });
  }`,
  createFiletype: {
    vue: true, //是否生成.vue文件
    less: true, //是否生成.less文件
    ts: false,
    scss: false
  }
}

⚠️ 注意事项

• createFiletype 中设置为 true 的类型会 互相联动生成，例如：

createFiletype: {
  vue: true,
  less: true,
  ts: true,
  scss: false
}

上述配置下，无论你是新增 .vue、.less 还是 .ts 文件，都会自动补齐其他类型的文件。

• 因本工具监听的是「新增文件」行为，所以在使用 git pull、切换分支 等操作时 建议先关闭监听命令（即不要运行 npm run acf） ，否则可能导致误生成文件并覆盖远程代码。

💡 使用建议

• 推荐将 .vue 文件命名为 PascalCase（如 UserProfile.vue）
• 配置中的 pages 路径必须存在，否则监听将不会生效
• 可以结合 eslint 和 stylelint 保证生成文件符合团队规范

📄 许可证

MIT License

作者：@GuoXianXin

如果你觉得这个工具好用，欢迎 star ⭐️ 和提 issue 🔧！