假設(shè)我們有一個(gè)場(chǎng)景，需要寫(xiě)一個(gè)簡(jiǎn)單的客戶端摆马，它只是用來(lái)輸入數(shù)據(jù)和顯示數(shù)據(jù)。

1. 新建一個(gè)vue項(xiàng)目

image-20221104092623278

2. 引入ElementUI

我們會(huì)用到ElementUI囤采，所以修改一下src/main.js:

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';  //導(dǎo)入組件
import 'element-ui/lib/theme-chalk/index.css';  //導(dǎo)入樣式

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

Vue.config.productionTip = false

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

3. 修改src/components/HelloWorld.vue

可以隨便寫(xiě)點(diǎn)代碼：

<template>
   <div>
     <el-row>
       <el-button @click="doAction('默認(rèn)按鈕')">默認(rèn)按鈕</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('危險(xiǎn)按鈕')">危險(xiǎn)按鈕</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. 運(yùn)行到瀏覽器查看效果

npm run serve    

5. 修改頁(yè)面的背景顏色

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

6. 讀寫(xiě)數(shù)據(jù)

因?yàn)槭且粋€(gè)非常簡(jiǎn)單的頁(yè)面，所以讀寫(xiě)數(shù)據(jù)就不寫(xiě)接口之類的了蕉毯，就直接存在瀏覽器的緩存中：

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中的一些信息可以修改一下，方便待會(huì)兒打包后顯示的是自己的信息：

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

8. 使用Electron打包成客戶端

現(xiàn)在使用的是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('默認(rèn)按鈕')">默認(rèn)按鈕</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('危險(xiǎn)按鈕')">危險(xiǎn)按鈕</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