手动搭建vue-electron框架

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

步骤

• 引入electron-builder，执行完命令以后，文件结构会有些改变，具体是修改了package.json以及增长了background.js文件

vue add electron-builder

• 修改router.js文件，将helloworld的页面的路径设置为根路径。以便electron启动的时候就能看到效果，修改以后，routers变量的值以下

var routes = [
    {
        path: '/',
        component: HW
    }
]

• 运行一下命令，启动electron项目，能够看到效果

npm run electron:serve

经过以上方式就成功把electron-vue-element-ui结合在一块儿了。大多数状况下，因为网络缘由，可能没法下载成功下载electron，具体的解决方案能够查看个人往期文章《解决npm网络下载问题》
，若是还不行，或者继续往下看

解决electron下载慢的问题

• 经过下面的网站去找到你想要的electron文件

https://npm.taobao.org/mirrors/electron/

• 把下载后的文件，放到如下文件夹下

%USERPROFILE%\AppData\Local\electron\Cache

End！

原文《手动搭建vue-electron框架》