VuejsApp简介

Posted 2021-06-13

        在开发一些桌面信息应用时界面的定义是一件比较麻烦的事情 ，不管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/ 可以访问之前但要的ｖｕｅ界面生成器。