还在手动创建.vue文件？给你一个工具自动生成页面目录和文件_生产环境如何自动创建.vue文件

介绍

根据提供的router对象，自动创建对应的页面目录以及.vue组件文件（SFC）

使用场景

在使用vue-router时，一个route需要绑定一个component，这个component往往对应一个.vue文件（即单文件组件/SFC）。

一般我们需要手动创建对应的目录以及.vue文件，但是在嵌套关系复杂、文件众多的情况下这种操作就会显得繁琐。

既然我们已经在router.routes中，定义了这些component的目录位置及命名，其实是可以直接利用这个信息去自动创建目录以及文件。auto-vue-route-sfc就是用于完成这个工作的。

支持

• 目前在vue-router4下使用，后续会兼容vue-router3
• 支持import、import()、require()方式的模块引入语法
• 支持你对import()、require()进行自己的逻辑包装

使用指引

前提

确保你有一个输出router对象的文件

安装

npm i -D auto-vue-route-sfc
1

建立配置文件

在项目根目录下创建一个配置文件auto-vue-route-sfc.config.js，内容示例如下：

module.exports = {
    entry: './src/router/index.js',
    routerDir: './src/router'
}
1
2
3
4

其中：

• entry: 是你输出router对象的文件
• routerDir: 是你的路由功能模块所在的目录

若你是使用vue-cli创建的自带vue-router的项目，则默认的设置就同示例中的一样，无需做额外的更改。

运行命令

方式一

打开终端，在根目录下运行

npx auto-vue-route-sfc
1

方式二

或者也可以在项目package.json中配置script命令

 // package.json
 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "auto:sfc": "npx auto-vue-route-sfc" // 新增命令
  },
1
2
3
4
5
6
7

然后在终端运行

npm run auto:sfc
1

若顺利，将看到你的页面目录以及组件文件将被自动创建