Vue.js 初探

2021-04-20 201 words One minute

Contents

最近写应用程序感觉 python,java 的 gui 太丑了，咨询了一波web爷爷。在一星期内从零开始入门了前后端分离的开发框架，并成功赶在实验截止日期前套用，治好了我的强迫症. 在这个过程中不成体系且稀碎地顺手记录了一下，权当纪念这段爆肝的日子。

技术栈如下，主要学习量为vue.js

学习路线 (html, css, js) -> Vue.js

整体来说对vue.js与electron还是一知半解，但也顺利地摸出了前端

HTML

HyperText Markup Language

tips

Cascading Style Sheets

tips

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
1em和当前字体大小相等，=16px
盒子模型

tips

1
2
3
4
5
6
7
8


<script>
function myfuc(a, b)
{
	// document.getElementById("demo");
    alert(a + b);
    return 1;
}
</script>

1
2


var carname="Volvo";
var carname;  // 仍然是"Volvo"

具有动态数据类型，
- 值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
- 引用数据类型：对象(Object)、数组(Array)、函数(Function)。

1
2
3


    var x;               // x 为 undefined
    var x = 5;           // 现在 x 为数字
    var x = "John";      // 现在 x 为字符串

开始摸实验了…

axios POST到python后端成功

把electron-quick-start git下来，进去修改main.js，直接把electron当作浏览器，先把vue跑起来，然后直接读这个端口。

1
2


  // and load the index.html of the app.
  mainWindow.loadURL('http://127.0.0.1:8081')

如下命令跑起来

1
2


npm install
npm start

用electron读取网页变为应用程序

下面我们把它彻底包成exe

安装electron-packager

1

npm install -g electron-packager

进入electron-quick-start目录

1

electron.packager .

得到了彻底前后端分离的高端产物

至此，便完成了一整套开发流程。