## 一、基于平台 我们把下载的平台最新版本的子工程admin及所有目录下文件全部拷贝到VSCode的workspace中去；  VSCode中，打开目录；   然后安装依赖；  修改后端地址：  运行；   点击地址访问看看：  输入账户密码；  很顺利，有没有？ ## 二、生成代码 我们打开一个生成的前端代码中PC版本的目录，比如pcv1，可以看到，有两个子目录，其中pages子目录里面是页面，而config子目录里面是配置文件；  ### **页面** 选取PCV1版本的页面来使用； 将生成的web/pcv1/pages目录下生成文件，拷贝到工程目录下pages/business之下（生成的文件夹必须放到pages/business下，如果当前工程还没有创建该文件夹请手动添加）；   ### **接口** 打开生成的配置文件目录，里面以`.api.js`结尾的文件，就是生成的模块接口定义文件； 我们需要把这里面生成的接口定义，拷贝到**src>services>api.js**中去统一注册；  拷贝后效果；  ### **路由** 打开生成的配置文件目录，里面以`.router.map.js`结尾的文件，就是生成的模块路由配置文件；我们需要把这里面生成的路由配置，拷贝到**src>router>async>router.map.js**中去统一注册；  拷贝后效果；  >[danger] 注意： > 1、考虑到路由菜单的层级，一般不直接放到根目录下，因此，默认的，生成了一个父级路由，配合后台路由设置中的定义，形成菜单目录和菜单项，因此，如果是一个模块，已经有了父路由，需要把重复的父路由剔除，不必全部拷贝进来； > 2、具体到这里实例，如果**父级菜单**已经有了，则仅需要拷贝**示范列表**路由； > 3、pcV1这里针对每个实体生成三个路由项（对应三个独立页），而pcV2仅生成一个列表路由项（仅一个列表独立页，新增和修改放到列表里面弹出） ## 三、辅助设置 但为了控制访问权限，平台额外的，还需要在后端做一个路由配置工作，目的是在后端注册完整的路由表，与登陆用户角色过滤，产生登陆用户拥有的路由表，这个工作从技术角度并非必须的，但从平台使用角度，是不可或缺的； **动态路由配置** 依据上面路由部分，新增的路由表，需要在这里都一一定义； 其中，路由属性与静态配置中的属性必须保持一致；  首先配置父路由；  然后是各级子路由了；    **角色配置** 给指定的角色分配刚才增加的路由，那些拥有该角色的账号登录系统，就能看到新增加的业务实例了；  ## 四、运行测试 在VSCode中启动代码服务； 在终端中，切换到当前工程的根目录，然后敲命令： ``` npm run serve ``` 启动就绪后，根据提示的地址，访问前端首页，登陆进去后找到刚才创建的菜单项，点击进入新开发的功能页面；   提交后，看看效果；  发现数据库中，果然已经多了一条数据了，说明代码运行成功了； ## 五、总结 从上面的过程，我们可以得到这个结论：基于统一技术平台的项目开发，前端的PC端工作量也是集中在根据业务需要来精细化微调代码；