Vue3 + Element Plus + Electron 项目搭建流程

初始化 Vue3 项目

更新 vue-cli 版本

npm install -g @vue/cli

创建项目， vue3-electron-element 为项目名

vue create vue3-electron-element

选择 Manually select features

选择配置项

配置项相应的配置选择

集成 element-plus

官方指南

安装依赖

npm install element-plus --save

安装按需加载插件

npm install babel-plugin-import -D

修改 babel.config.js

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
+  plugins: [
+    [
+      "import",
+      {
+        libraryName: "element-plus",
+        customStyleName: (name) => {
+          return `element-plus/lib/theme-chalk/${name}.css`;
+        },
+      },
+    ],
+  ],
};

完整组件引入，创建单独文件 src/utils/registerComponent.ts，完整的组件列表参考 element-plus 官方文档

import { App } from "@vue/runtime-core";
import {
  ElAlert,
  // ...省略
  ElUpload,
  ElInfiniteScroll,
  ElLoading,
  ElMessage,
  ElMessageBox,
  ElNotification,
} from "element-plus";

const components = [
  ElAlert,
  // ...省略
  ElUpload,
];

const plugins = [
  ElInfiniteScroll,
  ElLoading,
  ElMessage,
  ElMessageBox,
  ElNotification,
];

export default (app: App): void => {
  components.forEach((component) => {
    app.component(component.name, component);
  });

  plugins.forEach((plugin) => {
    app.use(plugin);
  });
};

修改 mian.ts

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "element-plus/lib/theme-chalk/index.css";
import registerComponent from "@/utils/registerComponent";

const app = createApp(App);
app.use(store);
app.use(router);
registerComponent(app);
app.mount("#app");

效果查看，添加了一个按钮

集成 electron

使用了 vue-cli 插件 vue-cli-plugin-electron-builder。

vue add electron-builder

选择版本 ^12.0.0

安装成功过后，运行

npm run electron:serve

效果查看