隨著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關鍵代碼-登陸頁面

<template><div class="login-container"><h1>用戶登錄</h1><form class="login-form"><div class="form-group"><label>用戶名：</label><input type="text"  /></div><div class="form-group"><label>密碼：</label><input type="password" /></div><button type="submit" @click="login">登錄</button></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>
.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關鍵代碼-首頁

<template><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="address" label="Address" /></el-table>
</template><script setup>import {onMounted, getCurrentInstance,ref,computed} from "vue";import {useStore} from "vuex";const {proxy} = getCurrentInstance();const tableData = [{date: '2016-05-03',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-02',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-04',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},]
</script>
<style lang="scss" scoped></style>

五、pywebview關鍵代碼

import webviewfrom controller.IndexController import IndexControllerclass Api():def destroy(self):window.destroy()def minimize(self):window.minimize()def login(self, username, password):print(username, '  ', password)main = IndexController(username)main.start()self.destroy()if __name__ == '__main__':api = Api()# js_api 獲得 api 實例window = webview.create_window('登錄', 'http://localhost:3004/#/login', js_api=api, resizable=False, width=450,  frameless=False, shadow=True, height =670, background_color="#E4FBF0")webview.start()# webview.start(debug=True)

六、拿到代碼執行如下命令

1、前端(必須先安裝nodejs，百度自行先安裝)，進入到pywebview-desktop-app\web目錄，執行如下命令，下載依賴

npm install

2、運行前端（在目錄pywebview-desktop-app\web下），執行如下命令

npm run dev

3、啟動python客戶端，在pywebview-desktop-app\controller目錄，運行LoginController.py文件

七、效果圖如下

下載地址：鏈接：https://pan.baidu.com/s/1TH_UQx7sblW6O_6K6ZPqlA?pwd=thfk?
提取碼：thfk