美文网首页
从零开始学习electron+vue(一)开发环境搭建

从零开始学习electron+vue(一)开发环境搭建

作者: SweetJacker | 来源:发表于2021-08-23 13:52 被阅读0次

前言:随着大前端的时代到来,前端技术迎来井喷式的技术革新,技术焦虑也接踵而来!

鉴于本人在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

相关文章

网友评论

      本文标题:从零开始学习electron+vue(一)开发环境搭建

      本文链接:https://www.haomeiwen.com/subject/qvfliltx.html