generate-routes-yuri

生成vue-router的代码

1 示例

请注意： “组件名称”标记在文件路径后

- components
-- loading
--- css
--- Index.vue               // Loading
-- order
--- Index.vue.             // Order
--- Detail.vue             // OrderDetail
-- user
--- login
---- admin
----- Index.vue             // UserLoginAdmin
----- SubAccount.vue        //UserLoginAdminSubAccount
---- Index.vue              // UserLogin
--- UserInfo.vue            //UserInfo

1.1 routes

const routes = [
  { path: "/loading", name: "Loading", component: () => import("@/components/loading/Index.vue") }, 
  { path: "/order", name: "Order", component: () => import("@/components/order/Index.vue") }, 
  { path: "/order/detail", name: "OrderDetail", component: () => import("@/components/order/Detail.vue") }, 
  { path: "/user/userInfo", name: "UserInfo", component: () => import("@/components/user/UserInfo.vue") }, 
  { path: "/user/login", name: "UserLogin", component: () => import("@/components/user/login/Index.vue") }, 
  { path: "/user/login/admin", name: "UserLoginAdmin", component: () => import("@/components/user/login/admin/Index.vue") }, 
  { path: "/user/login/admin/subAccount", name: "UserLoginAdminSubAccount", component: () => import("@/components/user/login/admin/SubAccount.vue") } 
]

1.2 router-link

<router-link to="/loading">Loading</router-link> 
<router-link to="/order">Order</router-link> 
<router-link to="/order/detail">OrderDetail</router-link> 
<router-link to="/user/userInfo">UserInfo</router-link> 
<router-link to="/user/login">UserLogin</router-link> 
<router-link to="/user/login/admin">UserLoginAdmin</router-link> 
<router-link to="/user/login/admin/subAccount">UserLoginAdminSubAccount</router-link>

2 安装与使用

yarn add -D generate-routes-yuri

案例与测试：github

这个工具项目的功能相对简单，更新频率会很低。如果下次更新间隔太久，需要升级所有的依赖。为了方便，记录重构过程

# 1 请再次确认项目根目录
√~ % pwd
/Users/yuri/workspace/idea/study/reactive-system/vue3-demo/dev-tools/generate-routes/core

# 2 升级（重装依赖）
## 2.1 删除所有依赖
yarn remove @types/lodash lodash @types/node @rollup/plugin-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser @vitest/coverage-c8 deep-object-diff typescript ts-node vite vite-plugin-dts vitest 

## 2.2 重装
yarn add @types/lodash lodash
yarn add -D @types/node @rollup/plugin-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser @vitest/coverage-c8 deep-object-diff typescript ts-node vite vite-plugin-dts vitest 

# 3 删除文件/目录
√~ % rm -rf .idea yarn.lock coverage dist node_modules

# 4 重新构建
√~ % yarn

3 约定（组件命名方式）

3.1 自定义组件名称

<script setup lang="ts">
defineOptions({
  name: "Loading",
})
</script>

3.2 目录结构为组件名称

以订单组件为例，目录 /components/order，包含两个页面：

• 首页，显示订单列表

• 点击订单编号，显示订单详情

| | 首页 | 详情页 | | ---- | --------- | ----------- | | 文件名 | Index.vue | Detail.vue | | 组件名称 | Order | OrderDetail | | 规则描述 | 目录名称 | 目录名称 + 文件名 |

3.3 文件名为组件名称

/components/user/UserInfo.vue，component name为UserInfo