jh186789/electron-vue-template

electron+vue桌面应用开发快速开始模板.

electron+vue快速开始模板

 此模板是用 vue-cli3 + vue-cli-plugin-electron-builder构建的.

搭建环境：

• nodejs v12.14.1
• electron 9.0.0
• vue 2.6.11

截图

 已安装的插件：

• babel
• router
• vuex
• eslint
• sass
• svg-sprite-loader
• terser-webpack-plugin 代码压缩

 已安装的UI库：

• Element-UI

 已安装的其他库：

• vue-router-tab
• is-url

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/

• 全局安装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插件的详细使用文档：

请阅读 配置文档.