平時在開發Vue應用則需要安裝nodejs,vue cli等相關東西相對來說麻煩一些;如果你喜歡像vs.net/vscode創建普通項目一樣就能開發Vue項目的話那可以嘗試一下BeetleX針對Vue編寫的服務插件;只需要創建一個簡單的Console項目引用相關插件即可以構建一個單頁面的Vue項目。雖然在開發的時候需要用到Beetlex,但後期發布完全可以用在其他平台上,因為組件會針對Vue的內容最終生成一個可發布的js文件。接下來介紹一下這個插件的使用(vs.net/vscode均可)
創建項目
首先需要創建一個c#的Console項目
創建項目后需要引用兩個BeetleX的組件包,可通過Nuget安裝最新版本;分別是:BeetleX.FastHttpApi.Hosting和BeetleX.FastHttpApi.VueExtend;這兩個組件的作用分別是在項目中啟動HTTP服務和針對.VUE文件生成相應的javascript文件。
項目文件布局
由於是Console項目,所以需要針對相關文件存放規則,具體大概如下:
所有html,css,js和vue等文件必須存放在項目的views目錄下;對於這個目錄下用什麼子目錄存放相關文件就看自己的需求了。
服務和基礎資源配置
為了讓控制台服務作為一個HTTP服務需要做一些簡單的配置
static void Main(string[] args) { var builder = new HostBuilder() .ConfigureServices((hostContext, services) => { services.UseBeetlexHttp(o => { o.Port = 80; o.SetDebug(); o.LogToConsole = true; o.LogLevel = BeetleX.EventArgs.LogType.Info; }, s => { s.AddExts("woff;ttf;woff2"); s.Vue().CssRewrite("/css/{1}.css").JsRewrite("/js/{1}.js"); s.Vue().Debug(); var resource = s.Vue().CreateWebResorce(typeof(Program).Assembly); resource.AddScript("vue.js", "axios.js", "beetlex4axios.js", "jquery.js", "echarts.js", "bootstrap.js", "page.js"); resource.AddCss("bootstrap.css", "bootstrapadmin.css", "admin.css"); }, typeof(Program).Assembly); }); builder.Build().Run(); }
前部分主要描述在那個端口開發HTTP服務,並設置相關日誌显示級別;後半部分主要是描述vue配置一些信息。這個後面會詳細描述,接下來看啟動一下服務看下日誌。
服務日誌會显示資源加載和服務端口的情況。
VUE擴展配置
前面服務啟動的時候就已經配置相關VUE的內容,這裏再詳細解說一下。
s.Vue().Debug(); s.Vue().CssRewrite("/css/{1}.css").JsRewrite("/js/{1}.js"); var resource = s.Vue().CreateWebResorce(typeof(Program).Assembly); resource.AddScript("vue.js", "axios.js", "beetlex4axios.js", "jquery.js", "echarts.js", "bootstrap.js","page.js"); resource.AddCss("bootstrap.css", "bootstrapadmin.css", "admin.css");
Beetlex的Vue插件會管理項目的兩種資源,分別是css和javascript.
-
Debug方法
主要是告訴組件每次調用資源都重新從文件中生成,這樣開發都在變更相關文件的時候無須重新編譯,保存文件后刷頁面即可。此方法在Release編譯模式下並不生效。
-
CssRewrite和JsRewrite方法
這兩個方法主要是描述通過那些路徑訪問到css和javascript資源,以上定義/css/路徑任意一文件都會得到項目中所有的css內容;/js/路徑任意文件都得到項目的javascript內容。
-
WebResource
這個類用於描述如何收集對應的css和javascript文件;對於javascript文件來說會先打包這些基礎的文件然後再追加項目中的vue文件。打包的順序是依據定義的順序來進行。
啟動頁
在項目vue文件只是模塊文件,我們需要在根目錄下定義一個HTML文件作為訪問落地頁面,接下來看一下這頁面的定義
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <link href="/css/v1.css?group=BeetleX.AdminUI" rel="stylesheet" /> <script src="/js/v1.js?group=BeetleX.AdminUI"></script> <title>BeetleX AdminUI</title> </head> <body> <div id="page"> <main_menu @menu_resize="OnMenuResize($event)" @openwindow="OnOpenWindow($event)"></main_menu> <windows_bar :windows="windows" :full="full" :selectwindow="selectWindow.id" @close="OnCloseWindows($event)"></windows_bar> <div class="main-content" :style="{left:(full=='max'?'60px':'260px')}"> <keep-alive> <component :is="selectModel" @openwindow="OnOpenWindow($event)" :token="selectWindow.data" :winsize="sizeVersion"></component> </keep-alive> </div> <page_footer></page_footer> </div> <script> var page = new Vue(pageInfo); page.OnOpenWindow({ id: 'home', title: '主頁', model: 'models_home' }) </script> </body> </html>
頁面只是負責資源加載和VUE模塊組裝,在這裏定義的css和javascript加載組是Beetlex.AdminUI即對應剛才加載的程序集資源包:
var resource = s.Vue().CreateWebResorce(typeof(Program).Assembly);
這個落地頁的展示效果如下:
模塊定義
項目配置完成后就可以在views目錄定義自己的vue模塊,存放層次目錄沒有具體的要求可根據自己的喜好來定義存放目錄.對於vue模塊的定義和傳統的vue定義會有些差別的,模塊文件名作為對應的模塊名稱。文件內部主要有HTML和JavaScript組成,而不是像傳統那樣一個vue文件和一個js文件。下面是一個models_home.vue模塊的描述:
<div style="width:99%;"> <div class="row"> <div class="col-lg-6"> <models_panel :title="'銷售走勢'" :child="'models_monthline'" :winsize="winsize"></models_panel> <models_panel :title="'僱員銷售比例'" :child="`model_employeesspie`" :winsize="winsize"></models_panel> </div> <div class="col-lg-6"> <models_panel :title="'最新訂單'" :child="`models_neworders`"></models_panel> <models_panel :title="'客戶訂單比例'" :child="`model_customerspie`" :winsize="winsize"></models_panel> </div> </div> </div> <script> { props: ["winsize"], data: function () { return { } }, } </script>
組件支持的VUE模塊描述要相對簡單一些,沒有一些import的東西;只有HTML和一個VUE構造信息的結構體。
接下來是一個簡單的列表模塊models_employees.vue:
<div> <table class="table"> <thead> <tr> <th>Name</th> <th>Title</th> <th>Region</th> <th>City</th> <th>Country</th> <th>Address</th> </tr> </thead> <tbody> <tr v-for="item in GetEmployees.result"> <td><a href="javascript:void(0)" @click="OnOpen(item)">{{item.FirstName}} {{item.LastName}}</a> </td> <td>{{item.Title}}</td> <td>{{item.Region}}</td> <td>{{item.City}}</td> <td>{{item.Country}}</td> <td>{{item.Address}}</td> </tr> </tbody> </table> </div> <script> { data: function () { return { GetEmployees: new beetlexAction("/Employees", null, []), } }, methods: { OnOpen: function (item) { this.$open('emp' + item.EmployeeID, '僱員:' + item.FirstName + ' ' + item.LastName, 'models_employeedetail', { id: item.EmployeeID }); } }, mounted: function () { this.GetEmployees.get(); } } </script>
發布
Beetlex原本是一個HTTP服務模塊,正常情況你把相關文件嵌入到項目發布即可在Linux或windows下運行(環境.net core 2.1或更高版本)。如果你不相基於Beetlex運行,那你可以在編譯目錄下獲取相關的javascript和css完全打包好的文件放到其他環境中部署。
代碼
如果你感興趣可以訪問 https://github.com/IKende/AdminUI 演示地址: http://adminui.beetlex.io/
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
【其他文章推薦】
※網頁設計公司推薦不同的風格,搶佔消費者視覺第一線
※廣告預算用在刀口上,台北網頁設計公司幫您達到更多曝光效益
※自行創業缺乏曝光? 網頁設計幫您第一時間規劃公司的形象門面
※南投搬家公司費用需注意的眉眉角角,別等搬了再說!
※教你寫出一流的銷售文案?
※聚甘新