前言:随着大前端的时代到来,前端技术迎来井喷式的技术革新,技术焦虑也接踵而来!
鉴于本人在vue这方面使用时间比较久,那就借由vue-electron来学习一下elecrton。
1、搭建vue项目
我这里使用的是vue-cli 4.5.8版本,在这个版本下,能使用vue3的模板,因为目前对vue3的改版还是不熟练,因此目前就使用vue2的版本来操作。
vue create your-project
// 选择vue2版本
cd your-project
// 启动
yarn serve
项目结构
vue目录结构
2、安装electron
在vue-cli 4.x版本下,能直接通过electron-builder 直接转换成electron开发版本
vue add electron-builder
安装完成后,在src文件夹下多了一个background.js,这是electron的配置文件
background
同时在package.json中,多了启动和打包elecrton的启动方式!
image.png
启动
yarn electron:serve
第一次启动时,会比较缓慢,最后会报一个错误,查了一下,是需要安装vue-devtool,这个需要科学上网,但是这个报错后,项目还是启动,那就无视吧!
启动时
启动后
启动后
如果觉得这个检验很烦的话,打开background.js,搜索 Install Vue Devtools,按照下面,直接注释掉,就可以关闭检验了
app.on('ready', async () => {
// 关闭vuetools
// if (isDevelopment && !process.env.IS_TEST) {
// // Install Vue Devtools
// try {
// await installExtension(VUEJS_DEVTOOLS)
// } catch (e) {
// console.error('Vue Devtools failed to install:', e.toString())
// }
// }
createWindow()
})
开发环境已经搭建好了,接下来就是按照文档来学习了!我定一个小目标,我要仿一个网易云的界面!
参考文档:w3c electron
网友评论