当前位置：首页 > news >正文

使用electron-vite生成一个桌面应用以及引入必要插件

news 2025/10/28 10:42:40

如果是已有的项目需要构建为桌面应用推荐vue3+vite项目引入electron运行为桌面项目

一、创建项目

npm create @quick-start/electron@latest

按照提示选择
在这里插入图片描述
执行命令：

// 进入项目文件夹目录
cd electron-app
// 安装依赖
npm install
// 运行项目
npm run dev

运行成功：
在这里插入图片描述

二、为项目引入路由

1、执行命令安装vue3的路由：

npm install vue-router@4

2、在渲染进程src/renderer创建路由文件rouer/index.ts
在这里插入图片描述
在index.ts配置路由：

// renderer/src/router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'// 导入你的页面组件
import Home from '../views/Home.vue'
import About from '../views/About.vue'const routes = [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: About}
]const router = createRouter({history: createWebHashHistory(), // 或者 createWebHistory() 如果你配置了服务器支持routes
})export default router

3、在一下目录创建两个页面：
在这里插入图片描述
About.vue:

<template><div><h1>About Page</h1><router-link to="/">Go to Home</router-link></div>
</template><script setup>
</script>

Home.vue:

<template><div><h1>Home Page</h1><router-link to="/about">Go to About</router-link></div>
</template><script setup>
// 这里可以写逻辑
</script>

4、app.vue中添加路由
在这里插入图片描述

<div id="app"><!-- 路由视图 --><router-view /></div>

效果
5、在main.ts中引入路由

import './assets/main.css'
import router from './router' // 引入路由
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.use(router) // 使用路由插件
app.mount('#app')

在这里插入图片描述
运行项目后效果：

三、引入unocss

1、在项目根目录执行命令：

npm i -D unocss
npm install -D @unocss/preset-wind3

2、项目根目录文件electron.vite.config.ts，引入unocss

import UnoCSS from 'unocss/vite'
import { presetAttributify } from 'unocss'
import presetWind3 from '@unocss/preset-wind3'plugins: [vue(),UnoCSS({presets: [presetWind3(),presetAttributify()]}),]

3、在渲染层目录，引入：
在这里插入图片描述

import 'virtual:uno.css'

测试：
在这里插入图片描述
由于配置了presetAttributify，也可以直接写成：<span text-red text-60px>unocss</span>

四、安装element-plus和自动导入插件

1、执行命令：

npm install element-plus --save
npm install @element-plus/icons-vue
npm install -D unplugin-vue-components unplugin-auto-import

2、在根目录文件electron.vite.config.ts 中添加配置：

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'// plugins中：
plugins: [vue(),UnoCSS(),AutoImport({include: [/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx/\.vue$/,/\.vue\?vue/, // .vue/\.md$/ // .md],imports: ['vue'],resolvers: [ElementPlusResolver()]}),Components({resolvers: [ElementPlusResolver()]})]

3、在渲染进程的main.ts中添加引入图标：

import './assets/main.css'
import router from './router' // 引入路由
import 'virtual:uno.css'
import { createApp } from 'vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import App from './App.vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}
app.use(router) // 使用路由插件
app.mount('#app')

测试：
在这里插入图片描述