位置: IT常识 - 正文

基于Vue+Python的应用搭建——前端[1](pycharm vue)

编辑：rootadmin

基于Vue+Python的应用搭建——前端基于Vue的应用前端GUI搭建引言1. 概览1.1 总体结构1.2 项目编译时会发生什么1.3 路径会被如何定位2. 响应式组件2.1 用CSS调节组件大小和间距2.2 组件传参引用

推荐整理分享基于Vue+Python的应用搭建——前端[1](pycharm vue)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:python和vue,python和vue结合开发前端,基于vue的论文,python和vue结合开发前端,pycharm vue,python和vue结合开发前端,python和vue结合开发前端,python和vue结合开发前端,内容如对您有帮助，希望把文章链接给更多的朋友！

这篇文章的目标是跟进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仓库. 接下来我将介绍几个的技术细节.

1. 概览1.1 总体结构

要使用组合式API意味着仅仅写一个包含所有功能的HTML是行不通的. 当然, Vue 3也提供了传统的选项式API. 选项式API的好处是可以快速写出一个单HTML文件的网页应用, 也方便在浏览器控制台操作vm实例. 但我个人觉得要用回选项式API, 不如直接一步到位切回Vue 2, 毕竟老版本用着习惯.

既然要用到组合式API, 那么最新版本的Node.js是少不了了(至少16+). 为了快速安装依赖, 可能还需要安装阿里镜像源的包管理工具cnpm. 我在这里用了官方的构建工具Vite和项目脚手架create-vue. 通过以下命令生成一个项目:

cnpm init vue@latest

要注意在✔ Add TypeScript?时要选择Yes才能使用TypeScript. 其他选项选No即可.

生成的项目文件结构如下:

注意安装element-plus和@element-plus/icons-vue后, 还需要在tsconfig.json中修改相应配置.

1.2 项目编译时会发生什么

在项目中, index.html几乎会被原封不动地编译. 因此一些不希望由Vue做的事情, 以及希望能够方便被外部修改的内容何以写到这个文件里.

main.ts是Vue组件与HTML之间的接口. 这里主要用来创建Vue应用实例. 同时, 也由于这里位于引用的最顶端, 所以可以在这里