基于Vue+Python的应用搭建——前端[1]_vue python

这篇文章的目标是跟进Vue 3.2发布以来前端的新进展和自己对于基于Vue和Python搭建前后端应用的实践经验和新理解, 搭建一个尽量简单/清晰/实用/有参考价值的前端GUI页面. 该GUI页面尽管是基于WEB技术实现, 但也为移植到基于Flask和Webview的Python应用中预留了接口. 这篇文章包含的一些技术细节希望可以给未来的自己和朋友们带来价值.

引言

时隔三年, 回看当初断更的博客——如何用 Vue.js + Electron 把你的 Python 控制台应用套上好看的 GUI——感到颇为惭愧, 为当时雄心壮志开坑不填而惭愧, 同时也为自己这三年中没有更加勤奋精进惭愧.

当初搭建基于Vue的前端应用时对于HTML/JS/CSS等WEB前端技术一窍不通, 一番折腾之后终于弄出了一个能用的页面. 中间走了不少弯路不谈, 里面的实现也谈不上简单明晰. 特别是用到JS去写前端逻辑时, 从C/C++这样的强类型语言启蒙的我感到JS的语法简直时一团浆糊. 这样尽管这段时间的开发实践让我对JS的实用性和接受度颇为改观, 但我的"JS语法好似答辩"的刻板印象仍然没有动摇. 我对JS的理解可以概括成两点: 1) JS的终极准则就是全局变量——别管, 全局变量就完事了; 2) 时刻警惕无处不在的_未定义_. 可以说这两点导致了我的代码就是我的代码, 今天的代码就是今天的代码, 换一个人或者过几天, 代码就读不懂啦.

除了JS让我放下了结构良好的代码的执念, 眼花缭乱的前端UI框架也让我放下了响应性良好的页面的执念. 对于我这种玩票选手, 钻研页面组件的响应性实在过于奢侈, 以至于有时候过分依赖某一个UI框架提供的组件而又不了解其底层实现反而失去了对页面的掌控.

所以这次, 我准备在脚本上拥抱Vue 3, 在页面上回归Element-ui和CSS. Vue 3中增加了对TypeScript的原生支持. TypeScript作为一个JS的超集, 为JS提供了类型支持. 我的直观感觉是函数传参总算不至于一堆字符串和undefined乱飞了. 而新增加的组合式API让组件的结构看上去更清晰, 对比起来感觉以前好像一堆钩子. 不过组合式API似乎对简陋的单HTML文件不太友好, 所以就显得写一个方便日后删改的Demo很有必要. 而我这次选择Element-ui一方面是因为它有TypeScript版本Element-plus, 另一方面也是因为它够用而不过分复杂, 自己写几行CSS排排版也就能做出像样的页面了. 还有一点是因为我毕竟是饿了么重度用户, 我自己对于GUI的概念也已经渐渐变成了饿了么的模样.

为了让这个演示应用尽可能地简单, 同时又包含足够多的技术细节供日后参考, 我准备让页面包含响应式页面组件, 组件参数传递, HTTP通信, 图片展示, 引入外部定义的全局变量等几个基本的内容. 为此, 我在这篇文章里给出一个Dalle-mini的网页应用. 这个应用根据用户输入的_提示_(prompt)给出一幅由后端Dalle-mini模型生成的图像. 项目我已经发布到我的Github仓库. 接下来我将介绍几个的技术细节.

https://www.wpsshop.cn/w/weixin_40725706/article/detail/615017