介绍
根据提供的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
若顺利,将看到你的页面目录以及组件文件将被自动创建