## 一、基于平臺 我們把下載的平臺最新版本的子工程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端工作量也是集中在根據業務需要來精細化微調代碼；