好久沒寫文字了，當然大家也不期待嘛，反正看代碼就行了。
演示網站
首先說下這個項目吧。
如標題一樣是基於VUE+.NET開發的框架，也是群友一直吼吼吼要一個vue版本的ABP框架。
我們先來看看首頁吧：
還比較酷炫，提供下演示賬號
演示地址：http://vue.yoyocms.com/
賬號：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的方式進行授權。
在之前的文章 [ABP框架]動態web Api的攔截用法 中有說明如何使用token進行授權驗證，目前使用的依然是cookie的方式進行驗證。
但是不影響前后端開發方式。
看下登錄頁面：
功能實現
- 登錄注冊
- 多語言切換
- 消息管理
- 租戶管理（多租戶）
- 角色管理
- Session
- 授權（權限管理）
- 設置管理
- 多語言管理
- 審計日志
- 動態WebApi
等功能，希望你自己去體驗。
如果你的.NET技能不扎實，或者想有提高，ABP是最好的學習框架。
前端技術棧說明：
前端使用的框架
1.vue
2.vuex
3.vue-router
4.jquery
UI庫
1.element-ui
2.waves
3.bootstrap
4.BSBADMIN
項目結構
- build webpack構建的腳本
- config webpack構建的配置
- dist build之后的文件
- src 源代碼目錄
- assets 全局的資源文件
- common 公共樣式 公共的方法
- language 語言包(暫時無用)
- utils 工具類
- components 全局的組件
- filters 過濾器
- mixins 存放sass的各類樣式
- router 路由配置
- service 接口請求層
- store vuex
- vendor 存放第三方的庫
- views 視圖文件
- vuePlugin 自定義的vue插件
- static 靜態文件,編譯后的目錄不變
以下是前端人員的原話，感謝 慧鑫666 抽出時間來完善vue的界面。
開發步驟
進行開發前, 我們假定你有
es6,sass,vue,vue-router,vuex的技能基礎。
建議讀一讀 尤雨溪大神的建議安裝前端依賴
進入
Web項目中的Assets目錄
$ npm i
運行項目
記得先啟動后台
$ npm run dev
webpack會用 express 啟動一個8986端口的web服務器
部署
$ npm run build
該命令會將所有文件編譯到
dist目錄下, 參考上面的項目結構圖
1.添加頁面
- 先到
src/views創建一個模塊的目錄。
比如當前我添加了一個叫administration的目錄, 其中包含了所有系統管理的頁面
每個模塊里面也可能會包含components和assets目錄, 表示其中的組件和資源都只屬於當前模塊 - 接下來添加一個
Index.vue, 作為父路由的頁面, 用來控制該模塊下的所有頁面。
需要注意 keep-alive 的作用 - 然后添加你需要的頁面 比如叫
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版本開源地址：https://github.com/yoyocms/YoYoCms.AbpProjectTemplate
vue版本演示地址：http://vue.yoyocms.com/
angularJS版本開源地址：https://github.com/ltm0203/YoYoCms
angularJS版本演示地址：http://www.yoyocms.com
如果你有好的建議或者bug反饋，請到github上提issue 。
同時我們也做了一個項目生成器，功能類似ABP官方的模板。
體驗網址 是: http://www.yoyocms.com/