YoYoCms.AbpProjectTemplate

示範網站

首先說下這個項目吧。 如標題一樣是基於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目錄, 新增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 版本開源位址：https://github.com/ltm0203/YoYoCms 版本開源JS版本演示網址：http://www.yoyocms.com

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

同時我們也做了一個專案產生器，功能類似ABP官方的模板。功能會在中旬的時候放出，大家請敬請期待。