vue-electron构建多窗口页面

1.用脚手架搭建框架

参考vue-cli2的webpack模板骨架搭建的electron和Vue结合。electron-vue是vue-cli和electron结合的项目，比单独使用vue构建起的electron项目要方便很多.（需要使用node 7或者更高的版本）官方推荐yarn作为包的管理器，能更好的处理依赖关系，并使用yarn clean 帮助减少最后的文件构建。我们需要检查的第一项是 npm 的版本，并确保它是最新的。这个可以使用 npm-windows-upgrade 来完成。如果你使用 yarn，则可以跳过此项检查。

# 安装 vue-cli 和 脚手架样板代码
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project# 安装依赖并运行你的程序
cd my-project
yarn # 或者 npm install
yarn run dev # 或者 npm run dev

2. 完成配置

（1).在配置文件下增加muti-page.config.js

const glob = require('glob');
const path = require('path');
const PAGE_PATH = path.resolve(__dirname, '../src/renderer');
const HtmlWebpackPlugin = require('html-webpack-plugin');exports.entries = function () {/*用于匹配 pages 下一级文件夹中的 index.js 文件 */var entryFiles = glob.sync(PAGE_PATH + '/*/main.js')var map = {}entryFiles.forEach((filePath) => {/* 下述两句代码用于取出 pages 下一级文件夹的名称 */var entryPath = path.dirname(filePath)var filename = entryPath.substring(entryPath.lastIndexOf('\/') + 1)/* 生成对应的键值对 */map[filename] = filePath})return map
}exports.htmlPlugin = function () {let entryHtml = glob.sync(PAGE_PATH + '/*/index.ejs')let arr = []entryHtml.forEach((filePath) => {var entryPath = path.dirname(filePath)var filename = entryPath.substring(entryPath.lastIndexOf('\/') + 1)let conf = {template: filePath,filename: filename + `/index.html`,chunks: ['manifest', 'vendor', filename],inject: true,nodeModules: path.resolve(__dirname, '../node_modules')}if (process.env.NODE_ENV === 'production') {let productionConfig = {minify: {removeComments: true,         // 移除注释collapseWhitespace: true,     // 删除空白符和换行符removeAttributeQuotes: true   // 移除属性引号 },chunksSortMode: 'dependency'    // 对引入的chunk模块进行排序}conf = {...conf, ...productionConfig} //合并基础配置和生产环境专属配置}arr.push(new HtmlWebpackPlugin(conf))})return arr
}

(2)在.electron-vue文件夹下的 webpack.renderer.config.js修改，修改后如下：

'use strict'process.env.BABEL_ENV = 'renderer'const path = require('path')
const { dependencies } = require('../package.json')
const webpack = require('webpack')const BabiliWebpackPlugin = require('babili-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
const {entries, htmlPlugin} = require('./muti-page.config')
/*** List of node_modules to include in webpack bundle** Required for specific packages like Vue UI libraries* that provide pure *.vue files that need compiling* https://simulatedgreg.gitbooks.io/electron-vue/content/en/webpack-configurations.html#white-listing-externals*/
let whiteListedModules = ['vue']
console.log()
let rendererConfig = {devtool: '#cheap-module-eval-source-map',// entry: {//   renderer: path.join(__dirname, '../src/renderer/main.js')// },entry: entries,externals: [...Object.keys(dependencies || {}).filter(d => !whiteListedModules.includes(d))],module: {rules: [// {//   test: /\.(js|vue)$/,//   enforce: 'pre',//   exclude: /node_modules/,//   use: {//     loader: 'eslint-loader',//     options: {//       formatter: require('eslint-friendly-formatter')//     }//   }// },{test: /\.scss$/,use: ['vue-style-loader', 'css-loader', 'sass-loader']},{test: /\.sass$/,use: ['vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax']},{test: /\.less$/,use: ['vue-style-loader', 'css-loader', 'less-loader']},{test: /\.css$/,use: ['vue-style-loader', 'css-loader']},{test: /\.html$/,use: 'vue-html-loader'},{test: /\.js$/,use: 'babel-loader',exclude: /node_modules/},{test: /\.node$/,use: 'node-loader'},{test: /\.vue$/,use: {loader: 'vue-loader',options: {extractCSS: process.env.NODE_ENV === 'production',loaders: {sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',scss: 'vue-style-loader!css-loader!sass-loader',less: 'vue-style-loader!css-loader!less-loader'}}}},{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,use: {loader: 'url-loader',query: {limit: 10000,name: 'imgs/[name]--[folder].[ext]',fallback: 'file-loader',outputPath: './',publicPath: '../'}}},{test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000,name: 'media/[name]--[folder].[ext]'}},{test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,use: {loader: 'url-loader',query: {limit: 10000,name: 'fonts/[name]--[folder].[ext]'}}}]},node: {__dirname: process.env.NODE_ENV !== 'production',__filename: process.env.NODE_ENV !== 'production'},plugins: [new VueLoaderPlugin(),new webpack.ProvidePlugin({$:'jquery',jQuery: 'jquery'}),new MiniCssExtractPlugin({filename: 'styles.css'}),// new HtmlWebpackPlugin({//   filename: 'index.html',//   template: path.resolve(__dirname, '../src/index.ejs'),//   minify: {//     collapseWhitespace: true,//     removeAttributeQuotes: true,//     removeComments: true//   },//   nodeModules: process.env.NODE_ENV !== 'production'//     ? path.resolve(__dirname, '../node_modules')//     : false// }),new webpack.HotModuleReplacementPlugin(),new webpack.NoEmitOnErrorsPlugin()// 注释原来的HtmlWebpackPlugin插件代码，在数组后添加.concat(htmlPlugin())].concat(htmlPlugin()),output: {// filename: '[name].js',修改filename的[name].js 为[name]/index.js，1、是为了将js文件和html文件归类在一起；2、[name].js时html访问的是绝对路径filename: '[name]/index.js',libraryTarget: 'commonjs2',path: path.join(__dirname, '../dist/electron')},resolve: {alias: {'@': path.join(__dirname, '../src/renderer'),'vue$': 'vue/dist/vue.esm.js'},extensions: ['.js', '.vue', '.json', '.css', '.node']},target: 'electron-renderer'
}/*** Adjust rendererConfig for development settings*/
if (process.env.NODE_ENV !== 'production') {rendererConfig.plugins.push(new webpack.DefinePlugin({'__static': `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"`}))
}/*** Adjust rendererConfig for production settings*/
if (process.env.NODE_ENV === 'production') {rendererConfig.devtool = ''rendererConfig.plugins.push(new BabiliWebpackPlugin(),new CopyWebpackPlugin([{from: path.join(__dirname, '../static'),to: path.join(__dirname, '../dist/electron/static'),ignore: ['.*']}]),new webpack.DefinePlugin({'process.env.NODE_ENV': '"production"'}),new webpack.LoaderOptionsPlugin({minimize: true}))
}module.exports = rendererConfig

(3)在src文件下增加渲染进程窗口的配置newPage.js


import { BrowserWindow, ipcMain, screen } from 'electron';let win = null;
const winURL = process.env.NODE_ENV === 'development' ? 'http://localhost:9080/newPage' : `file://${__dirname}/newPage/index.html`;function createNewPageWindow() {const size = screen.getPrimaryDisplay().workAreaSize; // 获取显示器的宽高// const winSize = win.getSize(); // 获取窗口宽高win = new BrowserWindow({width: size.width,height: size.height,minWidth: 500,minHeight: 130,type: 'toolbar', // 创建的窗口类型为工具栏窗口frame: true, // 要创建无边框窗口movable: true, // 窗口是否可以移动show: true, // 先不让窗口显示webPreferences: {devTools: true, // 关闭调试工具webSecurity: true},useContentSize: true});// 设置窗口的位置 注意x轴要桌面的宽度 - 窗口的宽度win.loadURL(winURL);// win.setPosition((size.width - winSize[0]) / 2, 350);// 监听渲染完成if (process.env.NODE_ENV === 'development') {win.webContents.on('did-frame-finish-load', () => {win.webContents.once('devtools-opened', () => {// win.focus();});win.webContents.openDevTools();});}win.once('ready-to-show', () => {win.show();});// 监听窗口关闭win.on('close', () => {win = null;});global.newPage = {id: win.id};
}/*** 监听创建新窗口*/
ipcMain.on('showNewPageWindow', () => {if (win) {if (win.isVisible()) {createNewPageWindow();} else {win.showInactive();}} else {createNewPageWindow();}
});/*** 监听隐藏新窗口*/
ipcMain.on('hideNewPageWindow', () => {if (win) {win.hide();}
});

（4）在主进程界面引入newPage.js

import { app, BrowserWindow } from 'electron' // eslint-disable-line/*** Set `__static` path to static files in production* https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html*/
if (process.env.NODE_ENV !== 'development') {global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\') // eslint-disable-line
}
let mainWindow;
const winURL = process.env.NODE_ENV === 'development'? 'http://localhost:9080/main': `file://${__dirname}/main/index.html`;function createWindow() {/*** Initial window options*/mainWindow = new BrowserWindow({height: 563,useContentSize: true,width: 1000,webPreferences: {webSecurity: false,devTools: true},show: false,title: 'vue-electron多界面',autoHideMenuBar: true,alwaysOnTop: true// backgroundColor: '#2e2c29'});mainWindow.loadURL(winURL);mainWindow.once('ready-to-show', () => {mainWindow.maximize(); // 最大化// mainWindow.show()});mainWindow.on('closed', () => {mainWindow = null;if (process.platform !== 'darwin') {app.quit();}});if (process.env.NODE_ENV === 'development') {mainWindow.webContents.on('did-frame-finish-load', () => {mainWindow.webContents.once('devtools-opened', () => {// mainWindow.focus();});mainWindow.webContents.openDevTools();});}// 引入newPage.js，负责悬浮窗口内主进程和渲染进程之间的通信require('./newPage');global.mainWindow = {id: mainWindow.id};
}app.on('ready', createWindow);app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit();}
});app.on('activate', () => {if (mainWindow === null) {createWindow();}
});/*** Auto Updater** Uncomment the following code below and install `electron-updater` to* support auto updating. Code Signing with a valid certificate is required.* https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-electron-builder.html#auto-updating*//*
import { autoUpdater } from 'electron-updater'autoUpdater.on('update-downloaded', () => {autoUpdater.quitAndInstall()
})app.on('ready', () => {if (process.env.NODE_ENV === 'production') autoUpdater.checkForUpdates()
})*/

参考自：https://blog.csdn.net/weixin_41855143/article/details/89408218

利用vue-electron构建多窗口页面应用相关推荐

Asp.net+Vue2构建简单记账WebApp之六（vue.js构建记账统计页面）
Asp.net+Vue2构建简单记账WebApp之一(设计) Asp.net+Vue2构建简单记账WebApp之二(使用ABP迅速搭建.Net后台) Asp.net+Vue2构建简单记账WebApp之 ...
利用vue编写一个后台管理页面
目录前期的准备: 项目的目录结构: 代码编辑: 1.登录界面(Login.vue文件)登录与注册切换的功能 2.注册界面(zhuce.vue文件) 3.首页(利用组件的方法完成) 兄弟们多话不说直接 ...
使用ASP.NE+VUE开发一款简单记账WebAPP之七（vue.js构建记账统计页面）
转载地址https://blog.csdn.net/yiershan1314/article/details/77970713 一.添加两个新页面 /components/ MonthCount.vu ...
vue安装Postcss_Flask和Vue.js构建全栈单页面web应用【通过Flask开发RESTful API】
前言: 看了一些国外的关于介绍flask和vue的前后端分离的文章,但没看到比较通俗易懂,代码完善的,直到昨天看到一篇新出的文章,而且内容非常棒,所以翻译过来,供大家一起学习. 原文来自Develop ...
利用vue进行页面滚动监听，上拉刷新
2019独角兽企业重金招聘Python工程师标准>>> 1.利用vue进行页面滚动监听,上拉刷新 methods: {handleScroll(){let page = docume ...
监听关闭页面事件 ajax,Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
网上很多博客说监听窗口关闭事件使用window.beforeunload,但是这个监听事件也会在页面刷新的时候执行,经过百度和自己的实际测试, 终于解决了这个问题,代码如下: mounted() { ...
iview构建基本html页面,写前端页面步骤----vue+iview
1:用iview构建基本HTML页面 2:在export default{ }中写一个data(){return:{变量:值}}全局对象,用于传递与绑定HTML参数. 3:在export defaul ...
如何利用Vue实现页面的局部刷新
利用Vue里面的provide+inject组合(走过路过,不要错过) 1. 首先需要修改App.vue 2. 到需要刷新的页面进行引用,使用inject导入引用reload,然后直接调用即可
Vue+Echarts构建可视化大数据平台实战项目（上）粒子动效，登录界面抖动，背景图轮播★
Vue+Echarts构建可视化大数据平台实战项目(上) 前言分享之前我们先来普及一下什么是数据可视化?数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理.数据可视化通俗来说就 ...

利用vue-electron构建多窗口页面应用

vue-electron构建多窗口页面

利用vue-electron构建多窗口页面应用相关推荐

最新文章

热门文章