第一步就是快速入門吧，跟著文檔走，基本沒什么說的。
我們主要來說說怎么調接口，以及使用VUE。因為我只是打算寫一個小的工具，而不是把整個VUE項目打包成桌面端，所以這里采用CNS的方式引入VUE以及ElementUi和Axios。
首先你完成了快速入門，來看看我們首頁的更改。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<script src="https://unpkg.com/vue@next"></script>
<!-- import CSS -->
<link rel="stylesheet" />
<!-- import JavaScript -->
<script src="https://unpkg.com/element-plus"></script>
<!-- inport axios -->
<script src="https://cdn.staticfile.org/axios/0.19.2/axios.min.js"></script>
<title>測試一下</title>
</head>
<body>
<div id="app">
<el-button @click="logList">查看輸出</el-button>
</div>
<script src="../assets/js/api.js"></script>
<script src="../../preload.js"></script>
<script src="./index.js"></script>
</body>
</html>
可以看到，從中我們引入了：VUE3、ElementPlus、Element-css、Axion、以及修改了meta安全策略。
下面新建一個index.js
const AppVue = {
data() {
return {
testList: [],
}
},
mounted() {
this.getBbkAdData();
},
methods: {
getBbkAdData() {
getBbkAdData().then(res => {
if (res.status == 200) {
this.testList = res.data;
}
}).catch(err => {
console.log(err)
})
},
logList() {
console.log(JSON.parse(JSON.stringify(this.testList)),'this.testList');
},
}
}
const app = Vue.createApp(AppVue);
app.use(ElementPlus);
app.mount('#app')
再建一個 assets\js\api.js
let api = "http://***.***.***.***:3000";
// 獲取廣告
const getBbkAdData = () => {
return axios({
url: api + '/bbkApi/ad',
method: 'get',
})
}
主程序main.js修改如下：
const { app, BrowserWindow, Menu } = require('electron');
const path = require('path')
const createWindow = () => {
// Create the browser window.
const win = new BrowserWindow({
width: 800,
height: 600,
// 禁止用戶拖拽改變大小
resizable: false,
icon: "./favicon.ico",
webPreferences: {
nodeIntegration:true,
contextIsolation: false,
enableRemoteModule: true,
preload: path.join(__dirname, 'preload.js'),
},
// 隱藏菜單
autoHideMenuBar: true
})
win.loadFile('./src/view/index.html');
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
每次改完東西后（非主程序main.js的修改）可以在程序里使用快捷鍵cltr+r刷新，可以ctrl+shift+i打開調試文件。
最終npm start后效果如下：
image.png
至此，初識+vue+element+axion就可以開始運行你的工作了。
