创建自己的electron+vue应用

        因为本身工作项目需要开始接触electron，然而页面也是使用vue编写的，所以在这里记录一下，如何简单的创建一个electron+vue的应用，只要你熟悉vue，那就很简单了，electron的api对照版本文档进行使用即可。话不多说，Let's go!

创建vue应用

用我们习惯的vue-cli创建基础的vue项目框架，如果没有，那先安装vue-cli，vue2或者vue3，自己看着办。

npm install -g @vue/cli

开始创建名为vueElectron的项目 

vue create vueElectron

为项目增加electron-builder插件，对应的版本自行选择即可。

vue add electron-builder

在安装electron-builder，很可能会安装失败，推荐用npm安装，配置vue的命令如下：

// 设置使用npm安装依赖
vue config -s packageManager npm

// 查看配置
vue config --json

如果国内的网络死活安装不了electron的话，先配置一下electron的镜像地址吧：

// 在根目录创建 .npmrc 文件
// 文件中输入
electron_mirror=https://mirrors.huaweicloud.com/electron/

这下子终于成功安装了～～～～～

好了，现在我们能尝试运行项目了，yarn或者npm自己习惯就好。

// 先简单运行一下页面应用
npm run serve

项目就这样运行起来了。

如果出现这个错误，不用慌,

加个any类型就好了。 

接下来是重点来了，我们来运行electron吧

npm run electron:serve

又又又报错了～～～～，看来插件是很久没更新了啊，electron的版本只到13，现在都23了

那我们就按照提示去安装一下ts-loader咯。记住记住，不要安装版本是9+的，现在的插件只支持8的，要不然，又报其他错误，启动不起来的 

成功来了～

在src里面有一个background.ts文件，是用来编辑electron窗体的文件，修改内容可以参考ElectronJs-Api

文章先到这里了，之后就有其他文章来说说在里面编写具体的内容，大家可以在里面自己去编写代码，或者引用组件库进行编写的了。

这里有大佬的electron-vuehttps://github.com/SimulatedGREG/electron-vue项目，大家也能自己直接拿来用。