基于electron、vue和antd开发一个桌面应用
其实electron+vue开发桌面应用早有先例electron-vue项目，但是这个项目已经好久没有维护，于是乎想自己集成一下，纯为练手，本文主要记录下了electron集成vue和antd的过程。 一、开发环境 Node版本：node(v10.16.0) + npm(6.13.0) + vue-cli(@vue/cli 4.5.4) 编辑器：VSCode 操作系统：macos(10.14.6) 二、初始化一个vue项目 打开命令行，执行以下代码，创建一个项目文件夹，然后在这个文件夹里初始化一个vue项目 cd desktop mkdir electron-demo && cd electron-demo vue create ftms-app 执行vue create时，vue-cli会通过交互文本的形式引导我们自定义vue项目的初始配置 第一步 选择预设配置或者手动配置，这里我们选择Manually select features，接着会手动选择项目特性 第二步 选择项目特性，这里选择Babel Router Vuex 第三步 选择vue版本，这里选择2.x，3.x为预览版 第四步 是否启用history mode，这里选择启用 第五步 选择Babel ESlint等插件的配置文件位置，这里选择package.json 第六步 是否将这些配置设置为预设，这里选择否 等初始化完成后执行以下代码进入项目根目录，启动vue项目 cd ftms-app npm run serve 至此，一个基本的vue项目初始化完毕，访问链接http://localhost:8080可看到如下页面 三、添加electron支持 命令行执行以下命令添加electron-builder插件 vue add electron-builder 会提示选择electron版本，这里选择最新版^9.0.0 安装成功后项目根目录会自动生成一个background.js文件，并且在package.json文件会添加以下代码 现在执行如下命令可以启动electron了 npm run electron:serve 启动的过程会相对漫长（这个界面要Fuck GFW5次，曾让我一度怀疑我的配置有问题） 看到这个页面就证明vue和electron集成成功了 四、添加antd支持 执行如下命令添加antd npm i --save ant-design-vue 修改项目中main.js,添加antd插件，修改后main.js如下...