【electron-vite】搭建electron+vue3框架基础

最新推荐文章于 2025-04-30 15:23:49 发布

我有满天星辰

最新推荐文章于 2025-04-30 15:23:49 发布

阅读量4.2k

点赞数 58

分类专栏：【前端】学习博客文章标签： electron

本文链接：https://blog.youkuaiyun.com/beiluoL/article/details/144155328

版权

一、拉取项目 electron-vite

中文文档地址： https://cn-evite.netlify.app/guide/

官网网址：https://evite.netlify.app/

版本

vue版本：vue3
构建工具：vite
框架类型：Electron
JS语法：TypeScript （目前未使用，TS限制太麻烦，我没有采用，当前版本JavaScript）

使用包管理器（如 NPM、Yarn 或 pnpm）安装 ，如果你的网络环境不佳，推荐使用 cnpm 或使用 npmmirror

安装

前提条件

electron-vite 需要 Node.js 版本 18+，20+ 和 Vite 版本 4.0+

npm i electron-vite -D

搭建第一个 electron-vite 项目

npm create @quick-start/electron@latest

在这里插入图片描述

运行项目：

	cd electron-app

	npm install
	npm run dev

二、安装路由和二次封装

路由vue-router

npm install vue-router -S

在这里插入图片描述

二次封装路由

二次封装路由：为了方便后期维护和管理

1.在新建 electron-app\src\renderer\src目录下新增文件夹 views，存放vue页面。

2.在views目录下新增Login.vue,Home.vue文件用于测试。

<script setup></script>

<template>
  <div>首页/登录</div>
</template>

在这里插入图片描述

3.清理App.vue里面的无关的代码，添加router-view 标签

<template>
  <router-view></router-view>
</template>

4.electron-app\src\renderer\src 下新增router目录，存放路由相关配置文件

在这里插入图片描述

5.router目录下新增 index.js （配置入口）

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

//引入路由表
import {
    AppRoutes } from './routes'
//引入导航守卫
import {
    beforeEach, afterEach } from './guards'

const router = createRouter({
   
  history: createWebHashHistory(), //hash模式
  routes: AppRoutes
})

//全局前置导航守卫
router.beforeEach(beforeEach)

//全局后置导航守卫
router.afterEach(afterEach)

export default router

6.router目录下新增routes.js （路由表）

/**
 * 路由表
 */

export const AppRoutes = [
  {
   
    path: '/',
    name: '登录',
    component: () => import('../views/Login.vue')
  },
  {
   
    path: '/',
    name: '首页',
    component: () => import('../views/Home.vue')
  }
]

7.router目录下新增 guards.js （导航守卫）

/**
 *
 *导航守卫
 */

//前置
export const beforeEach = () => {
   
  console.log('前置')
  return true
}

//后置
export const afterEach = () => {
   
  console.log('后置')
}

8.在src\renderer\src\main.js 中引入路由

//import './assets/main.css'

import {
    createApp } from 'vue'
import App from './App.vue'

import router from './router'

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