模板下载:百度网盘
提取码: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>