1. 新建項(xiàng)目
根據(jù) Electron Forge 的文檔，可以在要?jiǎng)?chuàng)建項(xiàng)目的路徑下，控制臺(tái)執(zhí)行以下兩條命令之一。命令在執(zhí)行的過程中會(huì)在當(dāng)前路徑下新建一個(gè)文件夾，并在其中初始化項(xiàng)目。
yarn
yarn create electron-app my-vue-app --template=vite
npm
npm init electron-app@latest my-vue-app -- --template=vite
2. 添加依賴
進(jìn)入上述命令執(zhí)行所生成的文件夾，然后相應(yīng)地執(zhí)行以下命令。
yarn
yarn add vue
yarn add --dev @vitejs/plugin-vue
npm
npm install vue
npm install --save-dev @vitejs/plugin-vue
3. 整合 Vue 3 代碼
以下展示各文件更改后的內(nèi)容作為參考。
~/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World!</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/renderer.js"></script>
</body>
</html>
~/src/App.vue（新建文件）
<template>
<h1>?? Hello World!</h1>
<p>Welcome to your Electron application.</p>
</template>
<script setup>
console.log('?? This message is being logged by "App.vue", included via Vite');
</script>
~/src/renderer.js
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
~/vite.renderer.config.mjs
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
// https://vitejs.dev/config
export default defineConfig({
plugins: [vue()]
});
此時(shí)項(xiàng)目就可以運(yùn)行了。如果用的 IDE 是 WebStorm，那么在 package.json 中 "start" 所在行前可看到一個(gè)綠色的播放按鈕。點(diǎn)擊即可運(yùn)行。
4. 安裝 Element Plus
根據(jù) Element Plus 的文檔，有以下幾種建議的安裝方式。
yarn
yarn add element-plus
npm
npm install element-plus --save
pnpm
pnpm install element-plus
5. 完整引入
完整導(dǎo)入 Element Plus 之后使用起來會(huì)比較方便，不容易出現(xiàn)樣式丟失的問題。
用法可參考 Element Plus 的文檔，在本項(xiàng)目中應(yīng)當(dāng)修改 src/renderer.js 文件。
以下是文件修改后的內(nèi)容。
~/src/renderer.js
import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
createApp(App).use(ElementPlus).mount('#app');
