随着web技术越来越成熟，就连QQ的windows客户端都用web技术来开发，所以在未来，web技术来开发windows桌面软件也会越来越多，所以在此发展驱动之下，将最近流程的python与web技术相结合，使用vue3和element-plus、vue-router、saas(CSS扩展语言)，来开发桌面管理系统，也是一个不错的选择。最主要的是两者技术门槛比较低，而且开发效率也很快，同时也可以做出漂亮的界面。

一、技术背景

python：版本号为3.7（你也可以换成高版本，同样支持）

vue3：版本为3.4.29

element-plus：版本号：element-plus

vue-router：版本号为4.4.0

sass：1.53.0

操作系统为：windows10

二、先看效果

三、web关键代码-登陆页面

<code><template>

<div class="login-container">code>

<h1>用户登录</h1>

<form class="login-form">code>

<div class="form-group">code>

<label>用户名：</label>

<input type="text" />code>

</div>

<div class="form-group">code>

<label>密码：</label>

<input type="password" />code>

</div>

<button type="submit" @click="login">登录</button>code>

</form>

</div>

</template>

<script setup>

import {onMounted, getCurrentInstance,ref,computed} from "vue";

import {useStore} from "vuex";

const {proxy} = getCurrentInstance();

const login = async ()=>{

window.pywebview.api.login('','')

}

</script>

<style lang="scss" scoped>code>

.login-container {

max-width: 400px;

margin: 0 auto;

padding: 50px 20px;

box-sizing: border-box;

text-align: center;

}

.login-form {

width: 80%;

margin: 0 auto;

}

.form-group {

margin-bottom: 20px;

text-align: left;

}

label {

display: inline-block;

width: 100px;

}

</style>

四、web关键代码-首页