🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 一、概述 以下的说明,完全依赖于本章节的主章节文档中的实例,基于代码生成器生成的文件,生成的文件根目录,为web\mobile; ## 二、配置处理 将生成的web/mobile/config目录下生成samplecase.router.js中的代码,复制需要的片段到指定文件**src/router/index.js**中; 生成的: ![](https://img.kancloud.cn/8e/2f/8e2f7014ce92a710d5fcd94a4b1b9cae_1366x736.png) 复制后: ![](https://img.kancloud.cn/e7/4a/e74abcfa5436cc9256a4f8dcaf73f8a3_1366x736.png) ## 三、页面处理 将生成的web/mobile/pages目录下生成文件,拷贝到工程目录下views/business之下(生成的文件夹必须放到business下,如果当前工程还没有创建该文件夹请手动添加); 复制后: ![](https://img.kancloud.cn/0a/db/0adbe571665f33579c4bfea6c1c1cd08_1366x736.png) ## 四、路由配置 在导航页面,增加功能导航图标和路由定义; 在**src>views>home>childComps>homeList.vue**中**ullistdata**中,增加新增模块的路由地址; ``` { imgurl: require('@/assets/navHome/3.png'), title: '示例列表', url: '/listSampleCase', }, ``` 新增后: ![](https://img.kancloud.cn/20/47/2047657d6511af75e6fce0b0c9b738ae_1366x736.png) 再增加一个全局的入口(可选); **src>views>home>childComps>allNav.vue**中**homeList**,增加新增模块的路由地址; ``` { path: '/listSampleCase', title: '示例列表', imgUrl: require('@/assets/navHome/3.png'), }, ``` 新增后: ![](https://img.kancloud.cn/4b/d3/4bd393e05cd8360eb152b6a471461f80_1366x736.png) 到这里,整个H5端开发完成; ## 五、效果 ![](https://img.kancloud.cn/36/65/3665406f7daeddc179f84d1f6b72161d_282x624.png) ![](https://img.kancloud.cn/eb/79/eb7971b40deb303daa2ca78723451e3c_285x627.png) ![](https://img.kancloud.cn/65/1e/651e1c5cb5530a086e25f8c9aa0bc5b8_281x626.png) ![](https://img.kancloud.cn/01/09/010918f194ed4b55bcab815bdbca5fae_281x624.png) ![](https://img.kancloud.cn/eb/58/eb5866a161acf54d506904a468970cf4_281x620.png) ![](https://img.kancloud.cn/2c/29/2c29179a87b36577726501c79008846b_283x626.png) ![](https://img.kancloud.cn/8d/4f/8d4fa30d05a85cebc34e537f6734751c_278x620.png) ![](https://img.kancloud.cn/4f/2c/4f2c1e0785cd5153e34c0a3a8b5fd820_282x625.png) ![](https://img.kancloud.cn/8b/da/8bda813f878e7e5e4d31d92d005c5fa7_281x619.png)