2020-11-27 vue2-electron9-开发模板

模板下载：百度网盘
提取码：hp4r

1. 创建app

vue create qq
choose: vue2,less,vuex,router,no-history
加入.yarnrc文件

registry "https://registry.npm.taobao.org"

sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"
phantomjs_cdnurl "http://cnpmjs.org/downloads"
electron_mirror "https://npm.taobao.org/mirrors/electron/"
sqlite3_binary_host_mirror "https://foxgis.oss-cn-shanghai.aliyuncs.com/"
profiler_binary_host_mirror "https://npm.taobao.org/mirrors/node-inspector/"
chromedriver_cdnurl "https://cdn.npm.taobao.org/dist/chromedriver"

vue add electron-builder
选择9.0
用vscode打开项目
去掉background.js中installExtension相关代码
yarn run electron:serve

2. vue-svg-icon

yarn add vue-svg-icon -D
main.js添加

import Icon from 'vue-svg-icon/Icon.vue'
Vue.component('Icon',Icon)

src目录下添加一个svg文件夹，把下载的svg都放进去，注意把svg中的fill、width、height都去掉，使用的时候才能自定义。

使用

<Icon name="add" class="myicon"></Icon>
.myicon{
  width: 30px;
  height: 30px;
  color: rgb(153, 21, 214);
}

3.配置vue.config.js

根目录添加vue.config.js文件，添加一下内容

const path = require('path');
const resolve = (dir) => path.join(__dirname, dir);
module.exports = {
    chainWebpack: config => {
        config.resolve.symlinks(true);
        config.resolve.alias
            .set('@assets', resolve('src/assets'))
            .set('@components', resolve('src/components'))
            .set('@views', resolve('src/views'))
            .set('@store', resolve('src/store'));
    },
    pluginOptions: {
        electronBuilder: {
        	nodeIntegration: true,//解决错误Uncaught ReferenceError: __dirname is not defined
            builderOptions: {
                "extraResources":  { // 拷贝静态文件到指定位置
                    "from": "./extraResources/",
                    "to": "extraResources"
                },
            }
        }
    }
}

4.自定义无边框最大最小化按钮

<template>
<div class="mytitlebar">
    <div class="ctrl" id="close" @click="send('close')">
        <Icon name="close" class="myicon"></Icon>
    </div>

    <div class="ctrl" id="max" @click="send('max')">
        <Icon name="maxmize" class="myicon"></Icon>
    </div>

    <div class="ctrl" id="min" @click="send('min')">
        <Icon name="minimize" class="myicon"></Icon>
    </div>
</div>
</template>
<style lang="less" scoped>
.mytitlebar{
    -webkit-app-region: drag;
    margin-top: 2px;
    width: 100%;
    height: 25px;
    .ctrl{
        margin-top: -2px;
        -webkit-app-region: no-drag;
        float: right;
        width: 30px;
        height: 22px;
        line-height: 22px;
    }
    .ctrl:hover{
        background: rgba(32, 32, 32, 0.178);
    }
    #close:hover{
        background: red;
        color: white;
    }
}

</style>
<script>

const ipc = require('electron').ipcRenderer;

export default {
  name: 'MyTitleBar',
  methods: {
      send(e){
          console.log(e)
          ipc.send(e)
      }
  },
}
</script>

background.js

'use strict'

import { app, protocol, BrowserWindow, ipcMain  } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'

const isDevelopment = process.env.NODE_ENV !== 'production'

// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
  { scheme: 'app', privileges: { secure: true, standard: true } }
])
let win

async function createWindow() {
  // Create the browser window.
  win = new BrowserWindow({
    width: 800,
    height: 600,
    frame:false,
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      enableRemoteModule:true
    }
  })

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) win.webContents.openDevTools()
  } else {
    createProtocol('app')
    // Load the index.html when not in development
    win.loadURL('app://./index.html')
  }
}

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', async () => {
  createWindow()
  ipcMain.on('min', e=> win.minimize());
  ipcMain.on('max', e=> {
      if (win.isMaximized()) {
          win.unmaximize()
      } else {
          win.maximize()
      }
  });
  ipcMain.on('close', e=> win.close());
})

// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
  if (process.platform === 'win32') {
    process.on('message', (data) => {
      if (data === 'graceful-exit') {
        app.quit()
      }
    })
  } else {
    process.on('SIGTERM', () => {
      app.quit()
    })
  }
}

设置transparent：true 会导致关闭按钮不起作用，因此就没有设置，也就无法实现无边框圆角窗口了。

5.统一设置滚动条样式

<template>
  <div id="app">
    <my-title-bar style="position:absolute;top:0px;left:0px;"></my-title-bar>
    <router-view/>
  </div>
</template>

<style lang="less">
html,body{
  margin: 0;
  padding: 0;
  height: 100%;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  overflow: auto;
  background: white;
  height: 100%;
  user-select: none;
}
::-webkit-scrollbar{
  width:8px;
  height:8px;
}
::-webkit-scrollbar-thumb{
  border-radius: 8px;
  background-color: rgba(27, 27, 27, 0.363);
} /* 滑块颜色 */
::-webkit-scrollbar-track{
  //border-radius: 1em;
  background-color: transparent;
} /* 滚动条的滑轨背景颜色 */

::-webkit-scrollbar-button {
  background-color: transparent;
  height: 0px;
  width: 0px
} /* 滑轨两头的监听按钮颜色 */

::-webkit-scrollbar-corner {
  background-color: transparent;
  height: 0px;
  width: 0px;
} /* 横向滚动条和纵向滚动条相交处尖角的颜色 */

</style>

<script>
import MyTitleBar from '@components/MyTitleBar'
export default {
  components:{
    MyTitleBar
  }
}
</script>