python利用pywebview集成vue3和element-plus开发桌面体系框架

随着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关键代码-登陆页面

1. <template>
2.   <div class="login-container">
3.     <h1>用户登录</h1>
4.     <form class="login-form">
5.       <div class="form-group">
6.         <label>用户名：</label>
7.         <input type="text"  />
8.       </div>
9.       <div class="form-group">
10.         <label>密码：</label>
11.         <input type="password" />
12.       </div>
13.       <button type="submit" @click="login">登录</button>
14.     </form>
15.   </div>
16. </template>
19. <script setup>
20. import {onMounted, getCurrentInstance,ref,computed} from "vue";
21. import {useStore} from "vuex";
22. const {proxy} = getCurrentInstance();
23. const login = async ()=>{
24.    window.pywebview.api.login('','')
25. }
26. </script>
27. <style lang="scss" scoped>
28. .login-container {
29.   max-width: 400px;
30.   margin: 0 auto;
31.   padding: 50px 20px;
32.   box-sizing: border-box;
33.   text-align: center;
34. }
35. .login-form {
36.   width: 80%;
37.   margin: 0 auto;
38. }
39. .form-group {
40.   margin-bottom: 20px;
41.   text-align: left;
42. }
43. label {
44.   display: inline-block;
45.   width: 100px;
46. }
47. </style>

复制代码

四、web关键代码-首页

1. <template>
2.   <el-table :data="tableData" style="width: 100%">
3.     <el-table-column prop="date" label="Date" width="180" />
4.     <el-table-column prop="name" label="Name" width="180" />
5.     <el-table-column prop="address" label="Address" />
6.   </el-table>
7. </template>
10. <script setup>
11.     import {onMounted, getCurrentInstance,ref,computed} from "vue";
12.     import {useStore} from "vuex";
13.     const {proxy} = getCurrentInstance();
14.     const tableData = [
15.       {
16.         date: '2016-05-03',
17.         name: 'Tom',
18.         address: 'No. 189, Grove St, Los Angeles',
19.       },
20.       {
21.         date: '2016-05-02',
22.         name: 'Tom',
23.         address: 'No. 189, Grove St, Los Angeles',
24.       },
25.       {
26.         date: '2016-05-04',
27.         name: 'Tom',
28.         address: 'No. 189, Grove St, Los Angeles',
29.       },
30.       {
31.         date: '2016-05-01',
32.         name: 'Tom',
33.         address: 'No. 189, Grove St, Los Angeles',
34.       },
35.     ]
36. </script>
37. <style lang="scss" scoped>
39. </style>

复制代码

五、pywebview关键代码

1. import webview
3. from controller.IndexController import IndexController
6. class Api():
7.     def destroy(self):
8.         window.destroy()
10.     def minimize(self):
11.         window.minimize()
13.     def login(self, username, password):
14.         print(username, '  ', password)
15.         main = IndexController(username)
16.         main.start()
17.         self.destroy()
20. if __name__ == '__main__':
21.     api = Api()
22.     # js_api 获得 api 实例
23.     window = webview.create_window('登录', 'http://localhost:3004/#/login', js_api=api, resizable=False, width=450,  frameless=False, shadow=True, height =670, background_color="#E4FBF0")
24.     webview.start()
25.     # webview.start(debug=True)

复制代码

六、拿到代码执行如下命令

1、前端(必须先安装nodejs，百度自行先安装)，进入到pywebview-desktop-app\web目录，执行如下命令，下载依靠

1. npm install

复制代码

2、运行前端（在目录pywebview-desktop-app\web下），执行如下命令

1. npm run dev

复制代码

3、启动python客户端，在pywebview-desktop-app\controller目录，运行LoginController.py文件
七、效果图如下

下载所在：链接：https://pan.baidu.com/s/1TH_UQx7sblW6O_6K6ZPqlA?pwd=thfk 
提取码：thfk

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。