vite-plugin-generoutes 0.2.5 → 0.2.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +112 -135
- package/dist/index.d.ts +1 -1
- package/dist/index.js +9 -3
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,135 +1,112 @@
|
|
|
1
|
-
# vite-plugin-generoutes
|
|
2
|
-
|
|
3
|
-
A Vite plugin that
|
|
4
|
-
|
|
5
|
-
## Usage
|
|
6
|
-
|
|
7
|
-
1. Install the plugin:
|
|
8
|
-
|
|
9
|
-
```bash
|
|
10
|
-
npm install vite-plugin-generoutes
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
2. Add the plugin to your `vite.config.js`:
|
|
14
|
-
|
|
15
|
-
```js
|
|
16
|
-
import { defineConfig } from 'vite'
|
|
17
|
-
import generoutes from 'vite-plugin-generoutes'
|
|
18
|
-
|
|
19
|
-
export default defineConfig({
|
|
20
|
-
plugins: [
|
|
21
|
-
generoutes()
|
|
22
|
-
// ... other plugins
|
|
23
|
-
]
|
|
24
|
-
})
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
3. Create your page files(`index.vue` or `[...all].vue`) in the `src/pages` directory. Each file in this directory will be treated as a route.
|
|
28
|
-
|
|
29
|
-
```
|
|
30
|
-
src/routes/pages
|
|
31
|
-
├── index.vue
|
|
32
|
-
├── [...all].vue
|
|
33
|
-
├── user/
|
|
34
|
-
│ ├── index.vue
|
|
35
|
-
│ ├── [id]
|
|
36
|
-
│ │ └── index.vue
|
|
37
|
-
└── post
|
|
38
|
-
├── index.vue
|
|
39
|
-
└── [...all].vue
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
The above example will generate the routes file `src/
|
|
43
|
-
```js
|
|
44
|
-
export const routes = [
|
|
45
|
-
{
|
|
46
|
-
name: 'Index',
|
|
47
|
-
path: '/',
|
|
48
|
-
component: () => import('/src/pages/index.vue'),
|
|
49
|
-
meta: {
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
},
|
|
74
|
-
},
|
|
75
|
-
{
|
|
76
|
-
name: '
|
|
77
|
-
path: '/user/post',
|
|
78
|
-
component: () => import('/src/pages/user/post/
|
|
79
|
-
meta: {
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
const router = createRouter({
|
|
115
|
-
history: createWebHashHistory(),
|
|
116
|
-
routes,
|
|
117
|
-
})
|
|
118
|
-
|
|
119
|
-
export default router
|
|
120
|
-
```
|
|
121
|
-
|
|
122
|
-
## Features
|
|
123
|
-
|
|
124
|
-
- Generate routes based on the file structure.
|
|
125
|
-
- Support dynamic routes.
|
|
126
|
-
- Support multiple NotFound routes.
|
|
127
|
-
- Support custom meta data for each route.
|
|
128
|
-
- Support ghost paths, For example, the (admin) folder will not be part of the route path, which is very useful for folder grouping.
|
|
129
|
-
- Support immediate update of the routes file when the file structure or defineOptions changes.
|
|
130
|
-
|
|
131
|
-
## Custom route info，including name and meta
|
|
132
|
-
|
|
133
|
-
You can define `name` and `meta` fields in the `defineOptions` of your `.vue` file, which will be used to override the default properties of the generated route. The `name` field will be used as the route name, which is very useful for `KeepAlive`. Any property in `defineOptions.meta` will be used as a property of the route `meta`, which makes the route metadata very flexible.
|
|
134
|
-
|
|
135
|
-
When you make any changes that may affect the route result, the `src/router/generoutes/index.js` file will be updated immediately, and the page will be refreshed without restarting the server.
|
|
1
|
+
# vite-plugin-generoutes
|
|
2
|
+
|
|
3
|
+
A Vite plugin that generate routes based on the file structure, supports dynamic routes, and supports custom meta data for each route.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
1. Install the plugin:
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install vite-plugin-generoutes
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
2. Add the plugin to your `vite.config.js`:
|
|
14
|
+
|
|
15
|
+
```js
|
|
16
|
+
import { defineConfig } from 'vite'
|
|
17
|
+
import generoutes from 'vite-plugin-generoutes'
|
|
18
|
+
|
|
19
|
+
export default defineConfig({
|
|
20
|
+
plugins: [
|
|
21
|
+
generoutes()
|
|
22
|
+
// ... other plugins
|
|
23
|
+
]
|
|
24
|
+
})
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
3. Create your page files(`index.vue` or `[...all].vue`) in the `src/pages` directory. Each file in this directory will be treated as a route.
|
|
28
|
+
|
|
29
|
+
```
|
|
30
|
+
src/routes/pages
|
|
31
|
+
├── index.vue
|
|
32
|
+
├── [...all].vue
|
|
33
|
+
├── user/
|
|
34
|
+
│ ├── index.vue
|
|
35
|
+
│ ├── [id]
|
|
36
|
+
│ │ └── index.vue
|
|
37
|
+
└── post
|
|
38
|
+
├── index.vue
|
|
39
|
+
└── [...all].vue
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
The above example will generate the routes file `src/pages/generoutes.js` with the following content:
|
|
43
|
+
```js
|
|
44
|
+
export const routes = [
|
|
45
|
+
{
|
|
46
|
+
name: 'Index',
|
|
47
|
+
path: '/',
|
|
48
|
+
component: () => import('/src/pages/index.vue'),
|
|
49
|
+
meta: {},
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
name: 'User',
|
|
53
|
+
path: '/user',
|
|
54
|
+
component: () => import('/src/pages/user/index.vue'),
|
|
55
|
+
meta: {},
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
name: 'User_[id]',
|
|
59
|
+
path: '/user/:id',
|
|
60
|
+
component: () => import('/src/pages/user/[id]/index.vue'),
|
|
61
|
+
meta: {},
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
name: 'User_Post',
|
|
65
|
+
path: '/user/post',
|
|
66
|
+
component: () => import('/src/pages/user/post/index.vue'),
|
|
67
|
+
meta: {},
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
name: 'Index_[...all]',
|
|
71
|
+
path: '/:pathMatch(.*)*',
|
|
72
|
+
component: () => import('/src/pages/[...all].vue'),
|
|
73
|
+
meta: {},
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
name: 'User_Post_[...all]',
|
|
77
|
+
path: '/user/post/:pathMatch(.*)*',
|
|
78
|
+
component: () => import('/src/pages/user/post/[...all].vue'),
|
|
79
|
+
meta: {},
|
|
80
|
+
},
|
|
81
|
+
]
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
4. Import the generated routes and create a router instance:
|
|
85
|
+
|
|
86
|
+
```js
|
|
87
|
+
import { createRouter, createWebHashHistory } from 'vue-router'
|
|
88
|
+
import { routes } from './pages/generoutes'
|
|
89
|
+
|
|
90
|
+
const router = createRouter({
|
|
91
|
+
history: createWebHashHistory(),
|
|
92
|
+
routes,
|
|
93
|
+
})
|
|
94
|
+
|
|
95
|
+
export default router
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
## Features
|
|
99
|
+
|
|
100
|
+
- Generate routes based on the file structure.
|
|
101
|
+
- Support dynamic routes.
|
|
102
|
+
- Support multiple NotFound routes.
|
|
103
|
+
- Support custom meta data for each route.
|
|
104
|
+
- Support ghost paths, For example, the (admin) folder will not be part of the route path, which is very useful for folder grouping.
|
|
105
|
+
- Support immediate update of the routes file when the file structure or defineOptions changes.
|
|
106
|
+
- Support nested route.
|
|
107
|
+
|
|
108
|
+
## Custom route info，including name and meta
|
|
109
|
+
|
|
110
|
+
You can define `name` and `meta` fields in the `defineOptions` of your `.vue` file, which will be used to override the default properties of the generated route. The `name` field will be used as the route name, which is very useful for `KeepAlive`. Any property in `defineOptions.meta` will be used as a property of the route `meta`, which makes the route metadata very flexible.
|
|
111
|
+
|
|
112
|
+
When you make any changes that may affect the route result, the `src/pages/generoutes.js` file will be updated immediately, and the page will be refreshed without restarting the server.
|
package/dist/index.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import { Plugin } from 'vite';
|
|
|
3
3
|
/**********************************
|
|
4
4
|
* @Author: Ronnie Zhang
|
|
5
5
|
* @LastEditor: Ronnie Zhang
|
|
6
|
-
* @LastEditTime:
|
|
6
|
+
* @LastEditTime: 2024/07/01 14:51:47
|
|
7
7
|
* @Email: zclzone@outlook.com
|
|
8
8
|
* Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
|
|
9
9
|
**********************************/
|
package/dist/index.js
CHANGED
|
@@ -119,15 +119,18 @@ function VitePluginGeneroutes(options = {}) {
|
|
|
119
119
|
fs.writeFileSync(filePath, routesStr);
|
|
120
120
|
}
|
|
121
121
|
const debounceWriter = debounce(500, writerRoutesFile);
|
|
122
|
+
let watcher;
|
|
122
123
|
function createWatcher() {
|
|
123
|
-
|
|
124
|
+
watcher = chokidar.watch(`${pagesFolder}/**/*.vue`, { ignoreInitial: true });
|
|
124
125
|
return watcher.on("all", async (event, path2) => {
|
|
125
126
|
if (ignoreFolders.some((folder) => slash(path2).includes(`/${folder}/`)))
|
|
126
127
|
return;
|
|
127
128
|
if (path2.endsWith(".vue") && (event === "add" || event === "unlink")) {
|
|
128
129
|
debounceWriter();
|
|
129
|
-
|
|
130
|
-
|
|
130
|
+
if (watcher) {
|
|
131
|
+
await watcher.close();
|
|
132
|
+
createWatcher();
|
|
133
|
+
}
|
|
131
134
|
}
|
|
132
135
|
});
|
|
133
136
|
}
|
|
@@ -146,6 +149,9 @@ function VitePluginGeneroutes(options = {}) {
|
|
|
146
149
|
debounceWriter();
|
|
147
150
|
}
|
|
148
151
|
}
|
|
152
|
+
},
|
|
153
|
+
closeBundle() {
|
|
154
|
+
watcher && watcher.close();
|
|
149
155
|
}
|
|
150
156
|
};
|
|
151
157
|
}
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vite-plugin-generoutes",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.2.
|
|
4
|
+
"version": "0.2.6",
|
|
5
5
|
"packageManager": "pnpm@9.1.1",
|
|
6
|
-
"description": "
|
|
6
|
+
"description": "A Vite plugin that generate routes based on the file structure, supports dynamic routes, and supports custom meta data for each route.",
|
|
7
7
|
"author": "Ronnie Zhang <zclzone@outlook.com>",
|
|
8
8
|
"license": "MIT",
|
|
9
9
|
"homepage": "https://github.com/zclzone/vite-plugin-generoutes",
|
|
@@ -78,4 +78,4 @@
|
|
|
78
78
|
"lint-staged": {
|
|
79
79
|
"*": "eslint --fix"
|
|
80
80
|
}
|
|
81
|
-
}
|
|
81
|
+
}
|