1. 新建项目
根据 Electron Forge 的文档，可以在要创建项目的路径下，控制台执行以下两条命令之一。命令在执行的过程中会在当前路径下新建一个文件夹，并在其中初始化项目。
yarn
yarn create electron-app my-vue-app --template=vite
npm
npm init electron-app@latest my-vue-app -- --template=vite
2. 添加依赖
进入上述命令执行所生成的文件夹，然后相应地执行以下命令。
yarn
yarn add vue
yarn add --dev @vitejs/plugin-vue
npm
npm install vue
npm install --save-dev @vitejs/plugin-vue
3. 整合 Vue 3 代码
以下展示各文件更改后的内容作为参考。
~/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()]
});
此时项目就可以运行了。如果用的 IDE 是 WebStorm，那么在 package.json 中 "start" 所在行前可看到一个绿色的播放按钮。点击即可运行。
4. 安装 Element Plus
根据 Element Plus 的文档，有以下几种建议的安装方式。
yarn
yarn add element-plus
npm
npm install element-plus --save
pnpm
pnpm install element-plus
5. 完整引入
完整导入 Element Plus 之后使用起来会比较方便，不容易出现样式丢失的问题。
用法可参考 Element Plus 的文档，在本项目中应当修改 src/renderer.js 文件。
以下是文件修改后的内容。
~/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');
网友评论