1.目錄

如左圖所示，主要分為bin,build,node_modules,public,src幾個部分，我們從gitee上使用bash將項目克隆到本地后，進入項目目錄，并安裝好依賴后可以直接使用命令啟動服務，具體命令見README.md，安裝好依賴后就可以得到node_modules了。如果我們在src目錄下完成了二次開發需要部署到服務器上，就可以在README.md中找到打包命令，得到dist。其中，我們可以在vue.config.js中配置后端接口，在.env.development和.env.production中配置url。一般情況下只需要研究上面幾部分即可。

2.具體開發過程

具體開發首先要明確開發需求，對于前端來說，工作量主要在vue頁面和接口的書寫上。

2.1明確需求

開發模塊、每個模塊需要實現的功能（包含但不限于增刪改查）、角色的權限

2.2目錄添加

包含三個部分的操作，若依框架的幾個模塊的路由是動態操作的，即不需要額外寫router。

①在系統管理-菜單管理中添加菜單

具體參數可以仿照系統管理的參數寫，這里的組件路徑需要和項目中模塊目錄所在位置保持一致。

權限字符根據功能需求而定，如果要展示數據，那就是system:user:list。不同功能參考如下：

②添加角色權限

完成菜單的添加后，我們需要讓相應角色獲得菜單的操作權限，如下圖，對于新添加的菜單，加入到權限中即可。

③創建vue

可以按照下面的目錄進行創建，system就相當于一個模塊，里面的user,post,dict就是分模塊，創建vue文件后進行相應需求的開發。

-src-views-system-user-index.vue-post-index.vue-dict-index.vue

2.3vue頁面的功能實現

vue的結構包括三個部分：

<template><!--樣式設定-->
</template><script>/**數據處理，功能實現*/
</script><style>/**樣式設定*/
</style>

對于一般的頁面開發，樣式主要包括搜索區域、功能按鈕區、數據顯示區、頁碼區、對話框區，如下圖。具體代碼內容可以下載源碼https://gitee.com/y_project/RuoYi。具體的數據綁定和功能實現在下篇進行詳細敘述。

2.4接口書寫

具體的接口在項目下api中可以找到，里面放著不同模塊的不同方法的接口。

-api-system-user.js-post.js-dict.js

導入請求處理后，可以寫增刪改查等功能對應的接口，以不同請求方法的查詢、新增為例，寫法如下：

2.5請求、響應攔截的書寫

在request.js中包含以下部分：請求攔截器和響應攔截器。具體內容后篇詳細分析，敬請關注。

如果上面的內容有疑問或者有錯誤的地方，歡迎大家提問和批評！非常樂意與大家進行討論，共同進步！