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

一、拉取项目 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-appnpm installnpm 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')

9.测试路由是否正常访问

npm run dev 启动项目，访问是否正常显示内容。

三、安装store (pinia) 和持久化存储

安装插件pinia

pinia的优点

更好的支持vue3和Ts
vuedevtools更好的支持pinia
支持服务端渲染
支持插件扩展功能

1.下载安装pinia

npm install pinia -S

在这里插入图片描述

安装插件pinnia-plugin-persist

2.下载安装pinnia-plugin-persist 用于持久化存储

pinnia-plugin-persist 是一个用于 Vue.js 应用的状态管理库 Pinnia 的一个插件，它用于在浏览器中持久化状态。有时候我们需要持久化state数据，vue2我们采用localstorage多一点，这里我们推荐使用pinia-plugin-persist，安装 pinia-plugin-persist。

npm i pinia-plugin-persist

在这里插入图片描述

持久化存储

3.src目录下新增store目录，新增modules目录，这里存放模块的store文件。

举例新增useUserStore.js文件，配置persist

import { defineStore } from 'pinia'// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const useUserStore = defineStore('userStore', {// 推荐使用 完整类型推断的箭头函数state: () => {return {token: 'xxxxxxxxxxxxxxxxxxabcd'}},actions: {},getters: {},persist: {// 开启持久化enabled: true,// 选择存储方式和内容strategies: [{storage: localStorage, //默认走sessionpaths: ['token']}]}
})

增加全局store ：新建index.js文件，存放公共配置，引入useUserStore。模块少的话其实可以不用写，可以忽略这个。

import { defineStore } from 'pinia'import { useUserStore } from './modules/useUserStore'export const useStore = defineStore('storeId', {// 推荐使用 完整类型推断的箭头函数state: () => {return {user: useUserStore() //用户}},actions: {},getters: {},
})

在这里插入图片描述

4.在mian.js中引入并use 引入注册

// 使用持久化插件
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia()
store.use(piniaPluginPersist)createApp(App).use(router).use(store).mount('#app')

5.测试，修改Login.vue文件如下。npm run dev 运行后，在浏览器打开，控制台调试模式，点击按钮，查看浏览器的Local storage是否生效

<script setup name="">
import { useUserStore } from '../store/modules/useUserStore'
const userStore = useUserStore()const getToken =()=>{userStore.token = '测试'
}
</script><template><div>首页</div><button @click="getToken">token</button><div>{{ userStore.token}}</div>
</template>

测试运行如下：

在这里插入图片描述

四、路径别名

配置文件 electron.vite.config.mjs

import { resolve } from 'path'
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({main: {plugins: [externalizeDepsPlugin()]},preload: {plugins: [externalizeDepsPlugin()]},renderer: {resolve: {alias: {'@renderer': resolve('src/renderer/src'),//增加路径别名'@store': resolve('src/renderer/src/store'),'@views': resolve('src/renderer/src/views'),'@router': resolve('src/renderer/src/router'),'@components': resolve('src/renderer/src/components')}},plugins: [vue()]}
})

在这里插入图片描述

之前文件的引入都可以修改为别名的形式

export const AppRoutes = [{path: '/',name: '登录',component: () =>import ('@views/Login.vue')},{path: '/',name: '首页',component: () =>import ('@views/Home.vue')}
]import { useUserStore } from '@store/modules/useUserStore'//引入路由表
import { AppRoutes } from '@router/routes'
//引入导航守卫
import { beforeEach, afterEach } from '@router/guards'

五、配置代理和请求二次封装

配置代理

配置文件 electron.vite.config.mjs中 renderer下面的

resolve:同级新增配置

 server: {proxy: {'/api': {target: 'http://127.0.0.1:3000', //访问地址changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}}},

安装插件axious

1.下载安装 axious

npm install axios

在这里插入图片描述

请求二次封装

2.src目录下新增 utils/request.js文件

配置请求拦截器，响应拦截器

import axios from 'axios'//创建axious对象
const request = axios.create({baseURL: '/api'
})// 添加请求拦截器
request.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config},function (error) {// 对请求错误做些什么return Promise.reject(error)}
)// 添加响应拦截器
request.interceptors.response.use(function (response) {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么return response},function (error) {// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么return Promise.reject(error)}
)export default request

3.electron.vite.config.mjs文件内配置api目录和utils目录的路径别名。

alias: {'@renderer': resolve('src/renderer/src'),//增加路径别名'@store': resolve('src/renderer/src/store'),'@views': resolve('src/renderer/src/views'),'@router': resolve('src/renderer/src/router'),'@components': resolve('src/renderer/src/components'),'@utils': resolve('src/renderer/src/utils'),'@api': resolve('src/renderer/src/api'),}

4.src目录下新增 api目录，存放api请求文件。举例新增login.js

import request from '../utils/request'
export const loginByJson = (data) => {return request({url: '/u/loginByJson',method: 'post',data})
}

5.测试

六、安装使用Element Plus

官网：一个 Vue 3 UI 框架 | Element Plus

安装element-plus

1.安装element-plus

npm install element-plus --save

在这里插入图片描述

完整引入

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'const app = createApp(App)app.use(ElementPlus)
app.mount('#app')

按需引入

按需导入：您需要使用额外的插件来导入要使用的组件。

自动导入推荐

2.首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

3.配置你的 Vite 的配置文件，即electron.vite.config.mjs 文件中，引入

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})

所有代码如下 electron.vite.config.mjs

import { resolve } from 'path'
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import vue from '@vitejs/plugin-vue'//引入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({main: {plugins: [externalizeDepsPlugin()]},preload: {plugins: [externalizeDepsPlugin()]},renderer: {resolve: {alias: {'@renderer': resolve('src/renderer/src'),//增加路径别名'@store': resolve('src/renderer/src/store'),'@views': resolve('src/renderer/src/views'),'@router': resolve('src/renderer/src/router'),'@components': resolve('src/renderer/src/components'),'@utils': resolve('src/renderer/src/utils'),'@api': resolve('src/renderer/src/api')}},server: {proxy: {'/api': {target: 'http://127.0.0.1:3000',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}}},plugins: [AutoImport({resolvers: [ElementPlusResolver()]}),Components({resolvers: [ElementPlusResolver()]}),vue()]}
})

4.测试，Login.vue中添加组件，运行查看页面效果

<script setup name="">
import { useUserStore } from '@store/modules/useUserStore'const userStore = useUserStore()const getToken =()=>{userStore.token = '测试'
}import { loginByJson } from '@api/login';
const getLogin = async()=>{
let res = await loginByJson({"password": "Admin",//密码"username": "Admin",//用户名}
)
}
</script><template><div>首页</div><button @click="getToken">token</button><button @click="getLogin">登录</button><el-button type="primary" >Primary</el-button><div>{{ userStore.token}}</div>
</template>

下载引入icon

1.安装

npm install @element-plus/icons-vue

在这里插入图片描述

2.main.js中引入

// main.js// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}