开发一个极简的桌面客户端

假设我们有一个场景，需要写一个简单的客户端，它只是用来输入数据和显示数据。

1. 新建一个vue项目

image-20221104092623278

2. 引入ElementUI

我们会用到ElementUI，所以修改一下src/main.js:

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';  //导入组件
import 'element-ui/lib/theme-chalk/index.css';  //导入样式

Vue.use(ElementUI); //全局引用

Vue.config.productionTip = false

new Vue({
render: h => h(App),
}).$mount('#app')

3. 修改`src/components/HelloWorld.vue`

可以随便写点代码：

<template>
   <div>
     <el-row>
       <el-button @click="doAction('默认按钮')">默认按钮</el-button>
       <el-button type="primary"@click="doAction('主要按钮')">主要按钮</el-button>
       <el-button type="success"@click="doAction('成功按钮')">成功按钮</el-button>
       <el-button type="info"@click="doAction('信息按钮')">信息按钮</el-button>
       <el-button type="warning"@click="doAction('警告按钮')">警告按钮</el-button>
       <el-button type="danger"@click="doAction('危险按钮')">危险按钮</el-button>
     </el-row> 
   </div>
</template>

<script>

 export default{
   data(){
     return{

     }
   },
 created(){

 },
 methods:{
   doAction(message){
     console.log("message: ",message);
     this.$message(message);
     }
   }
 }
</script>

<style>
</style>

4. 运行到浏览器查看效果

npm run serve

5. 修改页面的背景颜色

mounted() {
 document.body.style.backgroundColor="#808080";
},

6. 读写数据

因为是一个非常简单的页面，所以读写数据就不写接口之类的了，就直接存在浏览器的缓存中：

created(){
 // 存信息
 let data = {"proxy": "http://127.0.0.1:9999"};
 data = JSON.stringify(data);
 localStorage.setItem("stock", data)

 // 读信息
 let d = localStorage.getItem('stock')
 console.log("存的信息: ", d)
},

7. 修改package.json中的信息

package.json中的一些信息可以修改一下，方便待会儿打包后显示的是自己的信息：

"name": "default",
"version": "0.1.0",

8. 使用Electron打包成客户端

现在使用的是macbook m1，所以打包成mac的dmg文件。

vue add electron-builder

PYTHON_PATH=/Users/gary-hertel/.conda/envs/pythonProject1/bin/python npm run electron:build --prod

9. 完整的vue单文件

<template>
    <div>
        <el-row>
        <el-button @click="doAction('默认按钮')">默认按钮</el-button>
        <el-button type="primary"@click="doAction('主要按钮')">主要按钮</el-button>
        <el-button type="success"@click="doAction('成功按钮')">成功按钮</el-button>
        <el-button type="info"@click="doAction('信息按钮')">信息按钮</el-button>
        <el-button type="warning"@click="doAction('警告按钮')">警告按钮</el-button>
        <el-button type="danger"@click="doAction('危险按钮')">危险按钮</el-button>
        </el-row> 
    </div>
</template>

<script>

  export default{
    data(){
      return{

      }
    },
    mounted() {
        document.body.style.backgroundColor="#808080";
    },
    created(){
         // 存信息
        let data = {"proxy": "http://127.0.0.1:9999"};
        data = JSON.stringify(data);
        localStorage.setItem("stock", data)

        // 读信息
        let d = localStorage.getItem('stock')
        console.log("存的信息: ", d)
    },
    methods:{
        doAction(message){
            console.log("message: ",message);
            this.$message(message);
        }
    }
  }
</script>

<style>
</style>

2022-11-04