页面开发流程 ​

一般流程 ​

1. 在src/views/目录下，将页面的vue文件创建出来。注意： _builtin目录是平台内置页面的存放目录，不要在这个目录下创建页面，也尽量不要修改该目录下的代码，否则可能后续同步更新冲突。
2. 在src/router/modules目录下，通过对象结构将vue文件和一个唯一性标识字符串（这个字符串会作为路由的name，也会作为路由对应的权限key使用）进行映射。
   例如，可以在modules目录下新建个ts文件test.ts：
   
   ts

   import { RouteMap } from '@/typings/router'
   
   const Pages:  Record<string, RouteMap> = {
       test1: {
           component: () => import('@/views/test1/index.vue')
       },
       //其他页面配置...
   }
   
   export default Pages

   import { RouteMap } from '@/typings/router'
   
   const Pages:  Record<string, RouteMap> = {
       test1: {
           component: () => import('@/views/test1/index.vue')
       },
       //其他页面配置...
   }
   
   export default Pages

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   
   示例代码中的key test1就是标识字符串，一般建议将标识字符串定义为常量使用。value中的component属性就指向vue页面。
3. 到后台管理中的系统管理-权限配置-权限资源中，将该页面添加进去，注意key一定要和上面的唯一性标识一致，如下图所示：
4. 开发过程中，一般建议将权限资源设为超级管理员默认可用，方便开发。否则就需要到系统管理-权限配置-角色管理中为登录角色开启该权限。
5. 刷新页面，左侧菜单正常出现。在vue页面中继续编写代码即可。普通增删改查页面代码，建议使用jb-crud-page组件实现，参考文档

特殊页面流程 ​

有的页面不会出现在左侧菜单，比如登录页面，或者个人消息通知页面。这种页面的开发流程如下：

1. 在src/views/目录下，将页面的vue文件创建出来。
2. 在src/router/modules目录下，通过对象结构将vue文件和一个唯一性标识字符串（这个字符串会作为路由的name，也会作为路由对应的权限key使用）进行映射。
   例如，可以在modules目录下新建个ts文件test.ts：
   
   ts

   import { RouteMap } from '@/typings/router'
   
   const Pages:  Record<string, RouteMap> = {
       test1: {
           path: '/admin/test',
           component: () => import('@/views/test1/index.vue'),
           meta: {
               title: '测试页面',
               icon: 'ant-design:sound-outlined',
               auth: ['test'],
               layout: PageNames.LAYOUT_BASIC,
               autoMount: true
           }
       },
       //其他页面配置...
   }
   
   export default Pages

   import { RouteMap } from '@/typings/router'
   
   const Pages:  Record<string, RouteMap> = {
       test1: {
           path: '/admin/test',
           component: () => import('@/views/test1/index.vue'),
           meta: {
               title: '测试页面',
               icon: 'ant-design:sound-outlined',
               auth: ['test'],
               layout: PageNames.LAYOUT_BASIC,
               autoMount: true
           }
       },
       //其他页面配置...
   }
   
   export default Pages

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   
   示例代码中的key test1就是标识字符串，一般建议将标识字符串定义为常量使用。value基本同Vue Router中的配置一致。meta中的配置说明在下方
3. 访问path，即可显示该vue页面了。继续完善代码即可。

meta中配置项说明 ​