自己写的一个工具:用于自动生成vue-router对应的目录和.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

建立配置文件

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

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

其中:

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

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

运行命令

方式一

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

npx auto-vue-route-sfc

方式二

或者也可以在项目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" // 新增命令
  },

然后在终端运行

npm run auto:sfc

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

上一篇:HCIP课程笔记-13-BGP选路原则


下一篇:CF1316E Team Building