Skip to content

mark134340/electron-vue-template

Repository files navigation

electron+vue快速开始模板

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

搭建环境:

  • nodejs v12.14.1
  • electron 9.0.0
  • vue 2.6.11

截图

页面1 页面2 结构

 已安装的插件:

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

请阅读 配置文档.

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published