Electron + Vue3 + ElementPlus 完整搭建教程

1.快速创建项目 

npm create electron-vite@latest

2. 按提示选择

输入项目名
框架选择：Vue
语言选择：JavaScript / TypeScript 都可以

3. 进入项目 & 安装依赖　

cd 你的项目名
npm install

二、安装 ElementPlus　　

npm install element-plus

在 Vue 中全局引入  打开 src/renderer/src/main.js（或 main.ts），修改为：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

测试运行　　

<template>
  <div class="container">
    <h1>Electron + Vue3 + ElementPlus</h1>

    <!-- ElementPlus 按钮 -->
    <el-button type="primary" @click="showMessage">点击我</el-button>

    <!-- ElementPlus 输入框 -->
    <el-input v-model="inputValue" placeholder="请输入内容" style="width: 300px; margin: 20px 0" />

    <!-- ElementPlus 表格 -->
    <el-table :data="tableData" border style="width: 500px">
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="age" label="年龄" />
    </el-table>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const inputValue = ref('')
const tableData = ref([
  { name: '张三', age: 20 },
  { name: '李四', age: 22 }
])

const showMessage = () => {
  ElMessage.success('ElementPlus 运行成功！')
}
</script>

<style scoped>
.container {
  padding: 30px;
}
</style>

打包成桌面软件（exe/dmg）　　

npm run build