wordpress 模板获取数据,一键优化,黄石公司网站建设,网站怎么做的防采集本篇我们仅实现Electron和vue3通过先运行起vue3项目#xff0c;再将vue3的url地址交由Electron打开的方案#xff0c;仅由Electron在vue3项目上套一层壳来达到脱离本机浏览器运行目的
1、参考快速上手 | Vue.js搭建起vue3初始项目
npm install -g vue
npm install -g vue/c…本篇我们仅实现Electron和vue3通过先运行起vue3项目再将vue3的url地址交由Electron打开的方案仅由Electron在vue3项目上套一层壳来达到脱离本机浏览器运行目的
1、参考快速上手 | Vue.js搭建起vue3初始项目
npm install -g vue
npm install -g vue/cli-service
npm create vuelatestProject name: 项目名称
以下选项我选了Yes
Add TypeScript
Add JSX Support
Add Vue Router for Single Page Application development
Add Pinia for state managementcd 项目目录
2、参考快速入门 | Electron在vue项目里添加Electron
npm install -g electron
npm install -g electron-forge/cli
npx electron-forge import
在项目目录下执行npm init按Electron的要求修改一下package.json
npm initpackage name: 项目名称
version: 版本
entry point: 改为main.js
author: 程序作者
3、项目根目录下编辑一个Electron的入口文件main.js
const { app, BrowserWindow } require(electron)
const path require(path)function createWindow () {const win new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, preload.js)}})//win.loadFile(index.html)win.loadURL(http://127.0.0.1:5173/) //载入vue访问地址win.maximize() //窗口最大化win.setMenu(null) //清除顶部菜单
}app.whenReady().then(() {createWindow()app.on(activate, () {if (BrowserWindow.getAllWindows().length 0) {createWindow()}})
})app.on(window-all-closed, () {if (process.platform ! darwin) {app.quit()}
})
4、项目根目录下编辑一个preload.js
window.addEventListener(DOMContentLoaded, () {const replaceText (selector, text) {const element document.getElementById(selector)if (element) element.innerText text}for (const type of [chrome, node, electron]) {replaceText(${type}-version, process.versions[type])}
})
5、为了使vue和electron正常运行需要先运行vue使得其url可以正常访问然后再开启electron去加载url
此处需要安装两个库
concurrently阻塞运行多个命令-k参数用来清除其它已经存在或者挂掉的进程wait-on等待资源此处用来等待url可访问
npm install -S concurrently wait-on
接着修改package.jsonscripts里修改dev命令vite后添加host、port参数指定主机名和端口新增两条命令其中tcp:127.0.0.1:5173指定监听的端口就是前面vue运行的端口
scripts: {dev: vite --host 127.0.0.1 --port 5173,electron: wait-on tcp:127.0.0.1:5173 npm run start,serve: concurrently -k \npm run dev\ \npm run electron\
},
6、现在来运行整个项目
npm run serve
界面出现了ok
