electron 学习笔记（五）—— 快速搭建electron(9.x)+vue-cli（4.x）项目

系列文章目录

第一节 基础知识点
第二节 electron-vue
第三节 自定义标题栏
第四节 系统通知
第五节 快速搭建electron(9.x)+vue-cli（4.x）项目

---

---

前言

electron-vue 项目的electron是2.x版本，vue-cli也是2.x，版本是较老的，而electron和vue-cli都已经不断有新版本出现，自己动手搭建新版本也是不难的~

注意：本文安装步骤是mac环境下

---

一、安装yarn

brew install yarn 

推荐使用yarn,若使用npm 也是OK的~

二、全局安装vue-cli

yarn global add @vue/cli

安装成功后，检查vue-cli版本vue -V 为@vue/cli 4.5.4

三、新建vue项目

vue create electron-vue-cli-new

四、项目中配置electron

进入项目目录，安装vue-cli-plugin-electron-builder插件
vue-cli-plugin-electron-builder

vue add electron-builder

注意这里安装时间较长，按照提示一步步走即可

五、启动项目

yarn electron:serve

六、打包项目

yarn electron:build

【dist_electron】就是构建文件所在的文件夹

---

总结

vue-cli 4的项目结构和相关配置比vue-cli2的简化了很多，如以上步骤生成的项目结构很简洁清爽。