[Tutorial] 前端页面开发指南

[Geniusay]

主要文件明确

• api: 存放后端访问api文件
• configs/menus: 不同模块下的侧边栏目录

apps: 插件模块目录
settings: 设置模块目录
datas: 数据模块目录

• router: 路由
  
• locales: i18n本地化语言文件

en.ts: 英文本地化
ja.ts: 日文本地化
zhHans.ts 中文本地化

• views: 主要页面文件夹

如何在该前端框架下编写一个简单的页面

1. 首先打开configs/menus文件夹，在其中找到你要开发的页面的对应目录

在其中写下您对应的代码

{
    icon: "mdi-format-list-checkbox", //图标类型
    key: "menu.todo",   //key值，这里需要在i18n文件夹中创建您的key值，稍后会介绍
    text: "Todo",            //该页面的名称，例如: Upload,Video等等
    link: "/apps/todo",  //该页面的url连接
  },

如果您需要更多图标可以去该网址查看 MDI

2. 编写你的语言文件

去到locales文件夹下根据你的key名称编写中文本地化文件和英文本地化文件

例如：你的key名称为 "menu.search"那就请在en.ts和zhHans.ts的文件中写下对应的中文和英文

3. 编写路由文件

根据你开发的模块页面找到对应的路由进行编写

例如: 你要编写的页面是 apps下的 board页面，拿米请在router路由下找到 apps.routes.ts文件进行如下编写

{
   path: "/apps/board",  //该页面的url连接，请和步骤1中的link一致
   name: "app-board",   //路由名称。请使用[模块+名称]的格式，例: ChopperBot则为 app-chopper-bot
   component: () =>
     import(
       /* webpackChunkName: "utility-board" */ "@/views/utility/BoardPage.vue" 
     ),
   meta: {
     requiresAuth: true,
     title: "Board", //标题名称
     layout: "ui", 
     category: "APP",
   },
 },

4.构建你的页面文件

根据你要开发的模块页面构建你的页面文件