从零开始学习electron+vue（一）开发环境搭建

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

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