vs.net/vscode中使用Beetlex建立vue應用
平時在開發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