Electron初识以及使用VUE调接口+时时刷新
2022-07-21 本文已影响0人
邪七
第一步就是快速入门吧，跟着文档走，基本没什么说的。
我们主要来说说怎么调接口，以及使用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" href="https://unpkg.com/element-plus/dist/index.css"/>
<!-- 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就可以开始运行你的工作了。
