## 一、基于平臺 我們把下載的平臺最新版本的子工程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 ``` 啟動就緒后，根據提示的地址，訪問前端首頁，登陸進去后；  看到了剛才新增的入口圖標了，點擊圖標，基于定義的路由，進入新開發的實例了；  新增：  提交后，看看數據庫：  發現數據庫中，果然已經多了一條數據了，說明代碼運行成功了； ## 五、總結 從上面的過程，我們可以得到這個結論：基于統一技術平臺的項目開發，前端的移動端開發工作量也是集中在根據業務需要來精細化微調代碼；