electron-vue-template
electron-vue-template copied to clipboard
electron+vue桌面应用开发快速开始模板.
electron+vue快速开始模板
此模板是用 vue-cli3 + vue-cli-plugin-electron-builder构建的.
搭建环境:
- nodejs v12.14.1
- electron 9.0.0
- vue 2.6.11
截图
已安装的插件:
已安装的UI库:
已安装的其他库:
SVG精灵图标:
"src\assets\svg-icons\UI-icons\svg"文件夹下的svg文件如:“vue.svg”可以调用svgIcon组件使用:
<svg-icon file-name="vue" size="20px" />
包含了 font-awesome 4.7 图标
<i class="fa fa-times"></i>
nsis基本打包配置:
nsis: {
"oneClick": false, // 是否一键安装
"allowElevation": true, // 允许请求提升。 如果为false,则用户必须使用提升的权限重新启动安装程序。
"allowToChangeInstallationDirectory": true, // 允许修改安装目录
"installerIcon": "public/favicon.ico",// 安装图标
"uninstallerIcon": "public/favicon.ico",//卸载图标
"installerHeaderIcon": "public/favicon.ico", // 安装时头部图标
"createDesktopShortcut": true, // 创建桌面图标
"createStartMenuShortcut": true,// 创建开始菜单图标
"shortcutName": "myapp", // 图标名称
'license': 'LICENSE.txt'
},
可在“vue.config.js”里自行修改配置
如何使用:
-1.前提:
-
全局安装nodejs v12.x
-
安装yarn
-
npm install -g yarn
-
-
安装cnpm代替npm并给npm和yarn配置淘宝镜像源:
- npm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
- yarn:
yarn config set registry https://registry.npm.taobao.org/
- npm:
-
全局安装vue-cli3或4
-
npm install -g @vue/cli 或者 yarn global add @vue/cli
-
0.克隆
git clone https://github.com/mark134340/electron-vue-template.git
1.安装依赖
npm install 推荐 yarn install
2.启动 开发模式
npm run electron:serve 推荐 yarn electron:serve
3.打包
npm run electron:build 推荐 yarn electron:build
注意:
favicon.ico图标大小为256*256,可以用IcoFX 3工具制作.
LICENSE.txt文件需要另存为ANSI格式,否则会出现乱码.
关于vue-cli-plugin-electron-builder插件的详细使用文档:
请阅读 配置文档.