vue-cli-plugin-tsx-autorouter
v1.3.8
Published
vue cli plugin to auto add router tsx
Downloads
354
Readme
vue-cli-plugin-autorouter
借鉴 Nuxt.js 的路由源码实现。可以根据存放Vue-Router页面的文件夹结构自动生成Vue-Router配置文件。
相信我,你会中毒的,妈妈再也不用担心我手动低效的去Ctrl + C
,Ctrl + V
了,一切交给插件自动生成路由配置文件,我们要做的就是按照规则维护好文件夹结构,世界突然美妙了。
注意:这个插件目前为止还没有改成通用的插件包,有这个考虑。不过现阶段主要用于 Vue3template 这个脚手架项目。后面还会考虑再开发一个脚手架项目的
cli
命令行工具,实现类似Vue-cli
通过命令进行项目的初始化等功能。
1:安装(Vue3template默认已安装配置好,可直接使用)
注意这是一个基于Vue-cli 3.0也就是 vue-cli-service 开发的插件,不支持老版本Vue 2.0的脚手架哦,请注意了!
vue add vue-cli-plugin-autorouter
add
安装的时候会自动向你项目的package.json
的devDependencies
注入下面依赖:
"glob": "^7.1.3",
"pify": "^4.0.1"
这是 vue-cli-service
插件开发Generator
自动注入的,也是本插件需要使用到的依赖。请勿随意删除。
2:配置
在vue.config.js
中你可以增加pluginOptions
配置节点,实现对插件的自定义化需求定制:
module.exports = {
// ...
pluginOptions: {
route: {
// 默认:page。存放Vue路由页面的文件夹名称
TemplateFolderName: 'page',
// 默认:./src/application。从src/开始到TemplateFolderName文件夹父一级文件夹相对路径
RootFolderName: './src/application',
// 默认 src/core/config/route.config.ts。生成的配置文件保存路径,相对插件的位置来。
SaveConfigPath: '../../../src/core/config/route.config.ts'
}
},
// ...
}
然后你就可以很爽的直接使用命令,注意这个命令是用来自动生成配置文件的:
vue-cli-service route
注意:每次项目新增页面后,请重新执行此命令用以生成新的路由配置文件!!
不过,推荐在项目的package.json
中做如下配置:
"scripts": {
"serve": "npm run route && vue-cli-service serve",
"route": "vue-cli-service route",
"build": "vue-cli-service build",
},
注意:一定要在 vue-cli-service serve
命令运行前,先跑vue-cli-service route
来扫描src/application/page
的文件结构进而自动生成Vue-Router
的配置文件。默认配置文件保存在:src/core/config/route.config.ts
中。
3:卸载
东西再好,总有些开发者拒绝学习,或者拒绝尝试新的东西,喜欢固守自己已熟知的技术栈,那么下面提供卸载Vue3template
自带的 vue-cli-plugin-autorouter
教程。
3.1: 删除依赖(两种方式)
- 1: 使用npm命令卸载依赖:
npm uninstall --save glob pify vue-cli-plugin-autorouter
- 2: 从
package.json
中手动删除下面依赖信息
"glob": "^7.1.3",
"pify": "^4.0.1",
"vue-cli-plugin-autorouter": "^1.1.8",
然后删除项目node_modules
,在重新npm i
。
3.2: vue.config.js
从vue.config.js
中你删除pluginOptions
配置节点。
3.3: 修改源码
1: 从src/core/config
中删除文件route.config.ts
。
2:然后修改:index.config.ts
,去除:import { AutoRoutesConfig } from './route.config';
3:之后修改:RouterConfigUrl
中的routes
对象,routes
对象的内容需要你自己手动
注意:
RouterConfigUrl
中的routes
需要你自己手动配置了,这里提供一份配置参考:
public static RouterConfigUrl: RouterOptions = {
mode: 'hash',
routes: [
{
name: "user",
path: "/user",
component: () => import(/* webpackChunkName: '[request]' */ '@/page/user/index.vue'),
meta: {}
},
{
name: "user-one",
path: "/user/one",
component: () => import(/* webpackChunkName: '[request]' */ '@/page/user/one.vue'),
meta: {}
},
{
name: "index",
path: "/",
component: () => import(/* webpackChunkName: '[request]' */ '@/page/index.vue'),
meta: {}
}
]
}
【新增功能】4:路由meta配置
在page/
文件夹的组件中使用可以直接使用自定义标签<route-meta></route-meta>
来实现对路由meta
的直接配置,插件会提取<route-meta></route-meta>
中的代码直接注入到生成的路由配置文件中。下面请看使用案例:
<route-meta>
{
"isLogin": false,
"title": "首页"
}
</route-meta>
<template lang="pug">
.home
h2 测试标题
</template>
注意这里route-meta
标签中填的必须是一个JSON
对象,注意书写格式,不能有误!!
那么自动生成的路由配置如下:
{
name: "index",
path: "/",
component: () => import(/* webpackChunkName: 'index' */ '@/page/index.vue'),
meta: {
isLogin: false,
title: "首页"
}
}
5:使用
这里使用请注意文件夹结构,多看几次下面的例子加强理解,以便能够更好的组织自己的路由结构!!
5.1: 基础路由
基础路由很简单,直接在page/
文件下新建vue
组件即可,插件会根据文件结构自动生成路由配置文件!!
假设 page 的目录结构如下:
pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue
那么自动生成的路由配置如下:
[
{
name: "user",
path: "/user",
component: () => import(/* webpackChunkName: '[request]' */ '@/page/user/index.vue'),
meta: {}
},
{
name: "user-one",
path: "/user/one",
component: () => import(/* webpackChunkName: '[request]' */ '@/page/user/one.vue'),
meta: {}
},
{
name: "index",
path: "/",
component: () => import(/* webpackChunkName: '[request]' */ '@/page/index.vue'),
meta: {}
}
]
5.2: 动态路由(带参数)
如果路由需要参数,那么可以按照命名的规则:_参数名.vue
,在user/
文件夹创建Vue
组件。例如这里的:_id.vue
,其实这里的 _id.vue
就相当于我们平时开发时用的user_info.vue
组件。
假设 page 的目录结构如下:
page/
--| user/
-----| _id.vue
--| index.vue
那么自动生成的路由配置如下:
[
{
name: "user-id",
path: "/user/:id?",
component: () => import(/* webpackChunkName: '[request]' */ '@/page/user/_id.vue'),
meta: {}
},
{
name: "index",
path: "/",
component: () => import(/* webpackChunkName: '[request]' */ '@/page/index.vue'),
meta: {}
}
]
这里我们有了user-id
组件(相当于 user_info.vue
),那么user
首页组件如何添加?其实很简单!
基于上面的文件结构在user/
里面在创建一个index.vue
组件即可,默认文件夹下面的index.vue
作为路由的首页
改变后的文件结构如下:
page/
--| user/
-----| _id.vue # 这个相当于平时开发的 user_info.vue,个人中心的详情页面
-----| index.vue # user首页,类似个人中心
--| index.vue
那么自动生成的路由配置如下:
[
{
name: "user",
path: "/user",
component: () => import(/* webpackChunkName: '[request]' */ '@/page/user/index.vue'),
meta: {}
},
{
name: "user-id",
path: "/user/:id",
component: () => import(/* webpackChunkName: '[request]' */ '@/page/user/_id.vue'),
meta: {}
},
{
name: "index",
path: "/",
component: () => import(/* webpackChunkName: '[request]' */ '@/page/index.vue'),
meta: {}
}
]
5.3: 嵌套路由
创建内嵌子路由,上面我们已经有了user/
文件夹,那么我们可以在user/
文件夹同级目录创建一个名字一样的Vue
组件,这里添加:user.vue
!
假设 page 的目录结构如下:
page/
--| user/
-----| _id.vue
-----| index.vue
--| user.vue
--| index.vue
那么自动生成的路由配置如下:
[
{
path: "/user",
component: () => import(/* webpackChunkName: '[request]' */ '@/page/user.vue'),
meta: {},
children: [
{
name: "user",
path: "",
component: () => import(/* webpackChunkName: '[request]' */ '@/page/user/index.vue'),
meta: {}
},
{
name: "user-id",
path: ":id",
component: () => import(/* webpackChunkName: '[request]' */ '@/page/user/_id.vue'),
meta: {}
}
]
},
{
name: "index",
path: "/",
component: () => import(/* webpackChunkName: '[request]' */ '@/page/index.vue'),
meta: {}
}
]
记住:这是嵌套路由所以别忘记在
user.vue
组件中添加:router-view
来展示子路由的页面。