vue-router自动生成路由页面目录和文件
森林好儿狼 -自己尝试写了个工具,已发布到npm,地址:
https://www.npmjs.com/package...
欢迎大家试用~ 这里先贴个文档,后续说一下实现思路?
介绍根据你所提供的router对象,自动地创建对应页面文件目录以及.vue组件文件(SFC)
帮助你省去重复繁杂的页面目录及文件的创建操作
使用场景例如,根据一般的vue-router配置,假设我们在文件里输出了一个router:
// ./src/router/index.js
import { createRouter, createWebHashHistory } from 'vue-router';
import Component1 from '../views/page1/Component1.vue'
const routes = [
{
path: '/page1',
component: Component1,
},
{
path: '/page2',
component: () => import('../views/page2/Component2.vue'),
children: [
{
path: '/page2-1',
component: require('../views/page2-1/Component3.vue').default;,
}
]
}
];
const router = createRouter({
history: createWebHashHistory(),
routes,
})
export default router
执行auto-vue-route-sfc的命令后,你将在项目目录下看到自动生成的对应页面目录和文件:
your-project/src
│
└─views
├─page1
│ Component1.vue
│
└─page2
│ Component2.vue
│
└─page2-1
Component3.vue
功能?支持对vue-router3、vue-router4的使用?支持的模块加载语法:import、import()、require()?支持你对import()、require()进行自己的封装,比如:
const YourImport = (src) => process.env.NODE_ENV === 'development' ?
require(src).default :
() => import(src) // 仅生产环境使用懒加载
const routes = [
{
path: '/page1',
component: YourImport('./Component.vue'), // 你封装的import方法
}
]
const router = new VueRouter({ routes })
export default router
❌暂不支持ts使用指南准备请确保你已经安装了vue-router,并且有一个输出了router对象(export default router)的文件
安装npm i -D auto-vue-route-sfc
创建配置文件基础在项目根目录下创建一个配置文件auto-vue-route-sfc.config.js,内容示例如下:
module.exports = {
entry: './your/router-dir/index.js',
routerDir: './your/router-dir'
}
其中:
entry: 是你输出router对象(export default router)的文件routerDir: 是你的路由功能模块所在的目录额外功能:使用别名支持路径别名的使用,可以在auto-vue-route-sfc.config.js中按如下配置:
module.exports = {
entry: './src/router/index.js',
routerDir: './src/router',
// 使用别名
alias: {
'@': './src',
'$': './xxx',
'srcxxx': './src/xxx'
}
}
不创建配置文件的情况若项目根目录下没有发现auto-vue-route-sfc.config.js,则将被默认视为如下配置:
{
entry: './src/router/index.js',
routerDir: './src/router',
alias: {}
}
若你是使用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
如若顺利,你将看到你的页面目录、组件文件被自动地创建在项目下!
注意? 你可以随时增加新的路由配置,然后运行这个工具来生成对应的新目录和新页面文件。已经被你编写过的旧目录和旧页面文件是不会被覆盖的:)❌但是对于更改或者删除旧路由,这个工具不会更改或删除旧目录、旧页面文件,因为它还不是一个页面目录的管理器:( 特别申明:本文内容来源网络,版权归原作者所有,如有侵权请立即与我们联系(cy198701067573@163.com),我们将及时处理。