演示網站

首先說下這個專案吧。
如標題一樣是基於VUE+.NET開發的框架，也是群友一直吼吼吼要一個vue版本的ABP框架。
我們先來看看首頁吧：

還比較酷炫，提供下演示賬號

演示地址：
賬號：demo
密碼：bb123456
當然你也可以自己註冊一個賬號，來進行驗證。

介紹

首先對不知道ABP框架的同學說明下啥是ABP框架：

ABP是“ASP.NET Boilerplate Project (ASP.NET樣板專案)”的簡稱。
ASP.NET Boilerplate是一個用最佳實踐和流行技術開發現代WEB應用程式的新起點，它旨在成為一個通用的WEB應用程式框架和專案模板。
框架
ABP是基於最新的ASP.NET CORE，ASP.NET MVC和Web API技術的應用程式框架。並使用流行的框架和庫，它提供了便於使用的授權，依賴注入，驗證，異常處理，本地化，日誌記錄，快取等常用功能。
架構
ABP實現了多層架構（領域層，應用層，基礎設施層和表示層），以及領域驅動設計（實體，儲存庫，領域服務，應用程式服務，DTO等）。還實現和提供了良好的基礎設施來實現最佳實踐，如依賴注入。
模板
ABP輕鬆地為您的專案建立啟動模板。它預設包括最常用的框架和庫。還允許您選擇單頁（Angularjs）或多頁架構，EntityFramework或NHibernate作為ORM。訪問，瞭解更多。

結構

本次選擇的專案的結構為:

• .net framework 4.6

• VUE + VUEX+ VUE-ROUTER
  這樣的前後端分離的技術，但是分離的不是很純粹，因為ABP設計的原因，如果要純粹的前後端分離，在做授權的時候有點麻煩，也就沒有采用token的方式進行授權。

在之前的文章 中有說明如何使用token進行授權驗證，目前使用的依然是cookie的方式進行驗證。
但是不影響前後端開發方式。
看下登入頁面：

login.gif

功能實現

image.png

• 登入註冊

• 多語言切換

• 訊息管理

• 租戶管理（多租戶）

• 角色管理

• Session

• 授權（許可權管理）

• 設定管理

• 多語言管理

• 審計日誌

• 動態WebApi
  等功能，希望你自己去體驗。

如果你的.NET技能不紮實，或者想有提高，ABP是最好的學習框架。

前端技術棧說明：

前端使用的框架

1.  
2.  
3.  
4.

UI庫

1.  
2.  
3.  
4.

專案結構

• build  webpack構建的指令碼

• config  webpack構建的配置

• dist build之後的檔案

• src  原始碼目錄

• language  語言包(暫時無用)

• utils  工具類

• assets  全域性的資原始檔

• common  公共樣式 公共的方法

• components  全域性的元件

• filters  過濾器

• mixins  存放sass的各類樣式

• router  路由配置

• service  介面請求層

• store  vuex

• vendor  存放第三方的庫

• views  檢視檔案

• vuePlugin 自定義的vue外掛

• static  靜態檔案,編譯後的目錄不變

以下是前端人員的原話，感謝 抽出時間來完善vue的介面。

開發步驟

進行開發前, 我們假定你有 es6,sass,vue,vue-router,vuex 的技能基礎。
建議讀一讀

安裝前端依賴

進入Web專案中的Assets目錄

$ npm i

執行專案

記得先啟動後臺

 $ npm run dev

webpack會用 啟動一個8986埠的web伺服器

部署

 $ npm run build

該命令會將所有檔案編譯到 dist 目錄下, 參考上面的專案結構圖

1.新增頁面

• 先到 src/views 建立一個模組的目錄。
  比如當前我新增了一個叫 administration 的目錄, 其中包含了所有系統管理的頁面
  每個模組裡面也可能會包含 components 和 assets目錄, 表示其中的元件和資源都只屬於當前模組

• 接下來新增一個 Index.vue, 作為父路由的頁面, 用來控制該模組下的所有頁面。
  需要注意 的作用

• 然後新增你需要的頁面 比如叫 User.vue  
  如果需要獲取資料, 請在 methods 中新增名為 fetchData 的方法, 在該方法中, 需要在獲取完資料後呼叫 abp.view.setContentLoading(false)關閉內容區域的loading遮罩層。（可以參照User.vue)

2.新增路由

• 進入src/router目錄，新增路由的模組資料夾，在該資料夾中新增名為 index.js的檔案

• 然後向src/router/index.js 中註冊當前新增的路由資訊

3.新增service

• 進入src/services目錄, 新增對應介面請求的模組, 比如role相關的都放到roleService.js中
  該roleService.js檔案匯出的物件和abp.services.yoyocms.role是對應的。這樣使用的好處是可以統一管理和擴充套件

以上就是vue版本的ABP 的基本情況了。

下載地址：

vue版本開源地址：
vue版本演示地址：
angularJS版本開源地址：
angularJS版本演示地址：

如果你有好的建議或者bug反饋，請到github上提issue 。

同時我們也做了一個專案生成器，功能類似ABP官方的模板。

體驗網址 是:

作者：角落的白板筆
連結：