electron+vue3+element-plus基础搭建
1.安装vuenpm install -g @vue/cli
2.创建项目
vue create electron_project
根据喜好选择对应的配置
3.进入目录，安装element-plus
npm install --save element-plus
然后配置src/main.js为
引入element-plus
```javascript
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
createApp(App).use(ElementPlus).use(store).use(router).mount("#app");
```
4.安装electron
输入 vue add electron-builder
有一个警告There are uncommitted changes in the current repository, it's recommended to commit or stash them first.
可以直接忽略，选Y
选择最新的版本等待加载完毕
5.运行
输入npm run electron:serve
可能出现报错
```
TS2571: Object is of type 'unknown'.
60 | await installExtension(VUEJS3_DEVTOOLS);
61 | } catch (e) {
> 62 | console.error("Vue Devtools failed to install:", e.toString());
| ^
63 | }
64 | }
65 | createWindow();
\Bundling main process...
```
这个时候进入\src\background.ts的第62行新增选中代码
```javascript
app.on("ready", async () => {
if (isDevelopment && !process.env.IS_TEST) {
// Install Vue Devtools
try {
await installExtension(VUEJS3_DEVTOOLS);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
} catch (e: any) {
console.error("Vue Devtools failed to install:", e.toString());
}
}
createWindow();
});
```
如果继续报错
errorin ./src/background.ts
Module build failed (from ./node_modules/ts-loader/index.js):
TypeError: loaderContext.getOptions is not a function
则安装特定版本的ts-loader和webpack
先输入 npm install ts-loader@~8.2.0
然后再次尝试运行
如果还是不行就继续尝试运行
npm install webpack@5.40.0
然后继续运行
解决问题的详细链接参考下方
# 参考
https://stackoverflow.com/questions/68016372/webpack-ts-loader-error-loadercontext-getoptions-is-not-a-function
https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/1714
https://juejin.cn/post/7057516642426683399
页:
[1]