开发知识点-Vue-Electron

Electron+Vue打包.exe桌面程序

---

---

---

---

为了不报错 卸载以前的脚手架

 npm uninstall -g vue-cli
1

安装最新版脚手架

cnpm install -g @vue/cli
1

创建一个 vue 随便起个名

 vue create electron-vue-example (随便起个名字electron-vue-example)
1

进入 创建过的 vue文件

vue3
cnpm C:\Users\xxx\AppData\Roaming\npm
https://npmmirror.com/

C:\Users\xxxx\electron-vue-example.

cd electron-vue-example
 
cnpm install electron -g
1
2
3

运行 vue

npm run serve
1

将vue 添加 electron模块

vue add electron-builder
1

运行 electron 模块 是否 可以弹出窗口

npm run electron:serve
1

 // 这个错误 网上说必须科学上网才可以安装  所以我临时没有进行安装  后继没有发现有异常错误
Vue Devtools failed to install: ReferenceError: installExtension is not defined
// 全局搜索 这个 注释掉 VUEJS_DEVTOOLS  VUEJS3_DEVTOOLS
 
1
2
3
4

最终 打包exe

npm run electron:build
1

报错安装一下插件

npm install -g yarn
1

electron-reload

electron-store

简单的Electron本地持久化存储库

cnpm install electron-store

在你的 Electron 主进程文件中创建一个 store 实例：

const Store = require('electron-store');

const store = new Store();
1
2
3

你现在可以使用以下方法读取和写入数据：

// 写入数据
store.set('name', 'John Doe');

// 读取数据
console.log(store.get('name'));
// 输出: John Doe

// 移除数据
store.delete('name');

// 检查数据是否存在
console.log(store.has('name'));
// 输出: false

// 一次写入多个键值对
store.set({
    foo: 'bar',
    baz: 42
});

// 读取所有数据
console.log(store.store);
// 输出: { foo: 'bar', baz: 42 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

你还可以设置默认值，这样如果键不存在，将返回默认值：

const store = new Store({
    defaults: {
        windowBounds: { width: 800, height: 600 }
    }
});

console.log(store.get('windowBounds'));
// 输出: { width: 800, height: 600 }
1
2
3
4
5
6
7
8

你可以使用 .on() 方法，监听 store 的变化：

store.onDidChange('name', (newValue, oldValue) => {
    console.log(`name的值已从 ${oldValue} 更改为 ${newValue}`);
});
1
2
3

axios

Webpack 5 不提供自带的 HTTP 请求模块

https://www.w3cschool.cn/electronmanual/

cnpm install --save-dev electron-rebuild