Vue+vite+electron创建桌面应用

dong147258369

于 2025-05-19 22:45:02 发布

阅读量167

点赞数 3

文章标签： vue.js electron javascript

本文链接：https://blog.csdn.net/dong147258369/article/details/148076230

版权

环境搭建

npx create-electron-app@latest my-vue-app --template=vite
npm install vue
npm install --save-dev @vitejs/plugin-vue

修改以下文件

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()]
});