第 1 步：yarn镜像配置

yarn config set registry https://registry.npmmirror.com -g
yarn config set disturl https://npmmirror.com/dist -g
yarn config set electron_mirror https://npmmirror.com/mirrors/electron/ -g
yarn config set sass_binary_site https://npmmirror.com/mirrors/node-sass/ -g
yarn config set phantomjs_cdnurl https://npmmirror.com/mirrors/phantomjs/ -g
yarn config set chromedriver_cdnurl https://cdn.npmmirror.com/dist/chromedriver -g
yarn config set operadriver_cdnurl https://cdn.npmmirror.com/dist/operadriver -g
yarn config set fse_binary_host_mirror https://npmmirror.com/mirrors/fsevents -g

第 2 步：创建新应用程序

yarn create electron-app projectname --template=vite

第 3 步：设置 Vue 依赖项

yarn add -D @vitejs/plugin-vue
yarn add vue

第 4 步：整合vue

  1. 修改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>
  1. 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>
  1. 修改src/renderer.js文件，修改后内容如下：
import './index.css';
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

console.log('👋 This message is being logged by "renderer.js", included via Vite');
  1. 修改vite.renderer.config.mjs文件

import相关包

import vue from '@vitejs/plugin-vue';

把

plugins: [pluginExposeRenderer(name)],

改成

plugins: [pluginExposeRenderer(name), vue()],

第 5 步：整合element-plus

yarn add element-ui

import相关包

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

修改

createApp(App).mount('#app')

为

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

第 6 步：整合vue router

yarn add vue-router@4

创建router.js文件，路由模式使用 createWebHashHistory，内容如下：

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component:  () => import('../views/HomeView.vue')
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

renderer.js文件添加代码如下：

import router from './router'

app.use(router)

标签: Javascript