我在往期文章《在vue项目中引入element-ui》中介绍了如何完全不使用脚手架的方式，手动创建一个vue-element-ui框架，这篇文章我将基于该vue-element-ui框架，引入electron，使其由一个web项目成为一个客户端项目

步骤

  • 引入electron-builder，执行完命令之后，文件结构会有些改变，具体是修改了package.json以及增加了background.js文件
1
vue add electron-builder
  • 修改router.js文件，将helloworld的页面的路径设置为根路径。以便electron启动的时候就能看到效果，修改之后，routers变量的值如下
1
2
3
4
5
6
var routes = [
    {
        path: '/',
        component: HW
    }
]
  • 运行一下命令，启动electron项目，可以看到效果
1
npm run electron:serve
image-20210128172518682
image-20210128172518682

通过以上方式就成功把electron-vue-element-ui结合在一起了。大多数情况下，由于网络原因，可能无法下载成功下载electron，具体的解决方案可以查看我的往期文章《解决npm网络下载问题》
，如果还不行，或者继续往下看

解决electron下载慢的问题

  • 通过下面的网站去找到你想要的electron文件
1
https://npm.taobao.org/mirrors/electron/
  • 把下载后的文件，放到以下文件夹下
1
%USERPROFILE%\AppData\Local\electron\Cache

End！