## 一、基于平台 我们把下载的平台最新版本的子工程mobile及所有目录下文件全部拷贝到VSCode的workspace中去；  VSCode中，打开目录；   然后安装依赖；  修改后端地址：  运行；  效果：   ## 二、生成代码 我们打开一个生成的前端代码中mobile版本的目录，可以看到，有两个子目录，其中pages子目录里面是页面，而config子目录里面是配置文件；  ### **页面** 将生成的web/mobile/pages目录下生成文件，拷贝到工程目录下views/business之下（生成的文件夹必须放到business下，如果当前工程还没有创建该文件夹请手动添加）；  ### **路由** 将生成的web/mobile/config目录下，里面以`.router.js`结尾的文件，就是生成的模块路由文件；，复制需要的片段到指定文件**src/router/index.js**中；  ## 三、辅助设置 在**src>views>home>childComps>homeList.vue**中**ullistdata**中，增加新增模块的路由地址； ``` { imgurl: require('@/assets/navHome/3.png'), title: '示例列表', url: '/listCardDataCollect', }, ```  在**src>views>home>childComps>allNav.vue**中**homeList**，增加新增模块的路由地址； ``` { path: '/listCardDataCollect', title: '示例列表', imgUrl: require('@/assets/navHome/3.png'), }, ```  >[danger] 必须注意，配置到导航的URL地址，其对应的api需要用GET模式； ## 四、运行测试 在VSCode中启动代码服务； 在终端中，切换到当前工程的根目录，然后敲命令： ``` npm run serve ``` 启动就绪后，根据提示的地址，访问前端首页，登陆进去后；  看到了刚才新增的入口图标了，点击图标，基于定义的路由，进入新开发的实例了；  新增：  提交后，看看数据库：  发现数据库中，果然已经多了一条数据了，说明代码运行成功了； ## 五、总结 从上面的过程，我们可以得到这个结论：基于统一技术平台的项目开发，前端的移动端开发工作量也是集中在根据业务需要来精细化微调代码；