VuejsApp簡介

        在開發一些桌面信息應用時界面的定義是一件比較麻煩的事情 ，不管WPF或WinForm也好在制定界面上並沒有HTML來得簡單靈活。而VuejsApp是一款能動態加載vue的windows程序，它可以直接加載vue文件運行並展示，而它無須依賴於第三方的組件或服務。

使用

        VuejsApp並不需要安裝，它是一個直接可執行的windows程序(暫只支持win64).可以通過以下方式下載:

鏈接：https://pan.baidu.com/s/1-m4B9LblxWPDPn2JBEtQWQ

提取碼：bw3t

下載VuejsApp-1.0-win64.zip解壓後如下:

解壓後直接執行VuejsApp即可，執行後可以得到這樣一個運行界面

  以上是VuejsApp默認界面，當然這並不是你所需要的，接下介紹一下如何通過配置和編寫vue文件來實現自己的應用界面。注意：只有當前電腦安裝了WebView2纔可以正常展示，安裝WebView2可以訪問

https://developer.microsoft.com/zh-cn/microsoft-edge/webview2/

 編寫界面

        VuejsApp並不具備任何開發功能，需要藉助於第三方的開發工具，接下來介紹一下如何使用vscode來進行界面開發。通過vscode打開VuejsApp所在目錄

  目錄下有個程序生成的webapp.json文件，它描述了應用的一些信息和相關菜單文件配置。而view目錄則是我們平常開發的web應用目錄，這目錄下是存放vue,js,css和圖片等相關資源。在下載裏有相關應用的sample，可以把sample解壓後複製到VuejsApp目錄下。

        看一下vuejsapp-sample的webapp.json配置文件是怎樣的

  主要更改了應用的標題和配置了一些菜單。然後增加一些相關功能UI

  接下來重新運行程序VuejsApp

  也可以調整佈局

 Vue文件

        工具所支持的vue文件寫法和vue cli所支持的有些差別，主要在編寫vue內容裏無須import,而文件名則是組件名稱。

<div>
    <div id="line-simple" style="height:600px">

    </div>
</div>
<script>
    export default {
        data() {
            return {};
        },
        mounted() {
            var chartDom = document.getElementById('line-simple');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'line'
                }]
            };
            option && myChart.setOption(option);
            this.$addResize(function () {
                myChart.resize();
            });
        }
    }
</script>

總結

        VuejsApp現階段只是一個試驗性程序，它只是在BeetleX.WebFamily的基礎上套上了webview2的殼，通過它來展示Vuejs編寫的UI.在開發過程中只有修改webapp.json才需要重新啓動VuejsApp；對於添加或修改vue,js等文件右鍵菜單刷新即可。如果感覺不好調試可以直接用瀏覽器訪問http://localhost:端口，VuejsApp會在本地開啓一個相應的http服務。訪問 http://localhost:端口/uieditor/ 可以訪問之前介紹的ｖｕｅ界面生成器。