vue经node.js编译后的页面框架解析

项目中决定采用QT WebKit来解决界面问题。经过一段时间摸索，我开始掌握QT+vue+elementUI 进行开发的方法：首先通过VSCode生成vue组件，然后将VSCode工程项目build成为Html文档，这时需要对html文档引用的js文档进行修改，以便完成与QT的交互。

1. vue项目的build成果

运行npm run build就可将自己编写的vue项目转换为html文档。

经过研究，html引用的几个js文档是生成页面的主要代码。以我生成的代码为例，html中引入的JS文件有三个：

<script type=text/javascript src=./static/js/manifest.2ae2e69a05c33dfc65f8.js></script>
<script type=text/javascript src=./static/js/vendor.29c2ebd2ccb19ec61c48.js></script>
<script type=text/javascript src=./static/js/app.e7aaadfe97e0493f97de.js></script>

三个文件按顺序执行，就生成了当前页面。当然生成的还包括字体部分和图片部分。

三个文件分别执行的内容还有待研究，但第三个文件最为关键，它生成了页面的主要部分。我们称它为APP文件。

2. APP文件

本项目的APP文件名为app.e7aaadfe97e0493f97de.js，它的构造函数如下

webpackJsonp([1],{
    　　　"5zba":function(e,t){},
    　　　"810H":function(e,t){},
    　　　NHnr:function(e,t,n){ //这里生成所有组件},

      QJE5:function(e,t){},

      Xy7k:function(e,t){},

      "Y+oU":function(e,t){},

      hl40:function(e,t){},

      tvR6:function(e,t){},

      ve0p:function(e,t){},

      wtWa:function(e,t){}

　　　},

      ["NHnr"]

　　）；

 

它有三个参数，第一个是序号，第二个是一个对象，由若干成员构成，第三个是一个数组，它只有一个元素，引用了第二个参数中的NHnr成员。

第二个参数中的NHnr成员是一个函数，该函数生成了页面的所有elementUI组件，最后组合成一个页面。

要想使用QT修改该页面，需要对NHnr内的操作进行修改。

3. 特点

（1）全局变量无法引用

在页面中创建的JS全局变量，在JS文件中无法感知。所以全局变量进行输入是失效的。

（2）JS文件没有排版

几百上千行代码都写在一行上，需要对所有vue组件进行标记才容易找到。