从零开始搭建基于vue的electron项目

从零开始搭建基于vue的electron项目

1.需求背景

• 最近正在为基于electron的新项目做准备，本文章将为大家演示从零开始搭建基于vue的electron项目步骤。

2.解决方案

• 1.将Vue引入Electron项目常用的两种方案分别是vue-cli-plugin-electron-builder和electron-vue。从下载量来看，前者的下载量是后者的2-3倍左右，并且从众多开发者反馈来看前者坑点方面是少于后者的，还有一个重要原因是vue-cli-plugin-electron-builder团队更新比较及时，而electron-vue几乎处于停更状态，所以本次教程我选用的是vue-cli-plugin-electron-builder插件。
• 2.创建操作步骤如下：

// 1.全局安装vue-cli:
npm install -g @vue/cli
// 2.创建vue项目（注意这里选择vue2或者vue3都可以，稳妥选择vue2）：
vue create my-electron
// 3.创建项目后进入项目安装插件（注意不是npm）：
cd my-electron
vue add vue-cli-plugin-electron-builder
// 4.运行项目（等待片刻之后就会出现运行的弹窗）：
npm run electron:serve
// 5.打包项目（dist_electron目录）：
npm run electron:build

• 3.至此项目就创建成功了，后面根据具体业务开发就可以了