Electron整合VUE

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

mkdir electron-vue
cd electron-vue
npm init
# 安装时如果node install.js卡死，使用一下命令在安装
export ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
export ELECTRON_CUSTOM_DIR=8.0.1
npm i electron --save-dev
npm i electron-is-dev --save-dev
npm i concurrently wait-on --save-dev 
cd app/renderer/src/main
vue create main   # 创建vue项目

整个项目结构

electron-vue
├── app
│   ├── main
│   │   └── index.js
│   └── renderer
│       ├── pages
│       │   └── main   # VUE构建后的成果物
│       └── src
│           └── main
│               ├── README.md
│               ├── babel.config.js
│               ├── package-lock.json
│               ├── package.json
│               ├── public
│               │   ├── favicon.ico
│               │   └── index.html
│               ├── src
│               │   ├── App.vue
│               │   ├── assets
│               │   │   └── logo.png
│               │   ├── components
│               │   │   └── HelloWorld.vue
│               │   ├── main.js
│               │   ├── router
│               │   │   └── index.js
│               │   ├── store
│               │   │   └── index.js
│               │   └── views
│               │       ├── About.vue
│               │       └── Home.vue
│               └── vue.config.js
├── package-lock.json
└── package.json

pageage.json

{
  "name": "electron-vue",
  "version": "1.0.0",
  "description": "",
  "main": "app/main/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "concurrently \"npm run start:render\" \"wait-on http://localhost:8080 && npm run start:main\" ",
    "start:main": "electron .",
    "start:render": "cd app/renderer/src/main && npm run serve"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "concurrently": "^5.1.0",
    "electron": "^8.0.1",
    "electron-is-dev": "^1.1.0",
    "wait-on": "^4.0.0"
  }
}

app/main/index.js

const { app, BrowserWindow } = require('electron')
const isDev = require('electron-is-dev');
const path = require('path')
let win 
function createWindow() {
    win = new BrowserWindow({
        width: 800,
        height: 600
    })     
    if (isDev) {
        win.loadURL('http://localhost:8080')
    } else {
        win.loadFile(path.resolve(__dirname, '../renderer/pages/main/index.html'))
    }
}
app.on('ready', createWindow)

修改VUE Router模式为Hash模式
修改Vue.config.js 文件

module.exports = {
    outputDir: '../../pages/main',
    publicPath: './'
}

参考

https://github.com/warriorg/electron-vue

以上是 Electron整合VUE 的全部内容， 来源链接： utcz.com/z/380268.html

回到顶部