Electron Vue3 TypeScript 项目快速搭建指南基于 electron-vite-boilerplate | 在线演示: https://evite.netlify.app/github地址https://github.com/wuyongGitHub/electron-admin-template.git技术栈类别选型框架Electron前端Vue 3构建Vite语言TypeScriptUI 库Element Plus状态管理PiniaHTTPAxios一、项目初始化npx degit alex8088/electron-vite-boilerplate electron-appcdelectron-appnpminstallnpmrun dev如若无效直接进行git拉取gitconfig--global--unsethttp.proxygitconfig--global--unsethttps.proxygitclone https://github.com/alex8088/electron-vite-boilerplate.git electron-admin-app二、路由配置二次封装安装npminstallvue-router-S目录结构src/renderer/src/router/ ├── index.ts # 入口创建 router 挂载守卫 ├── routes.ts # 路由表 └── guards.ts # 导航守卫为什么二次封装路由表 导航守卫混在一个文件里项目大了难以维护。拆成三个职责单一的文件各管各的。router/index.tsimport{createRouter,createWebHashHistory}fromvue-routerimport{AppRoutes}from./routesimport{beforeEachGuard,afterEachGuard}from./guardsconstroutercreateRouter({history:createWebHashHistory(),routes:AppRoutes,})router.beforeEach(beforeEachGuard)router.afterEach(afterEachGuard)exportdefaultrouterrouter/routes.tsimporttype{RouteRecordRaw}fromvue-routerexportconstAppRoutes:RouteRecordRaw[][{path:/,name:layout,component:()import(renderer/layout/index.vue),},{path:/login,name:login,component:()import(renderer/views/login/Login.vue),meta:{title:登录},},]router/guards.tsimporttype{Router}fromvue-routerexportfunctionbeforeEachGuard(to:ReturnTypeRouter[resolve]){// 全局前置守卫权限校验、登录拦截等}exportfunctionafterEachGuard(){// 全局后置守卫页面标题更新、埋点等}main.ts 注册importrouterfrom./routerapp.use(router)三、状态管理 PiniaPinia vs VuexVuexPiniamutations有无直接改 statemodules有无天然拆分为多个 storeTS 支持一般原生良好体积较大轻量安装npminstallpinia pinia-plugin-persist-S目录结构src/renderer/src/store/ ├── index.ts # 统一导出 ├── useUserStore.ts # 用户模块 └── useAppStore.ts # 应用设置store/index.tsexport{useUserStore}from./useUserStoreexport{useAppStore}from./useAppStorestore/useUserStore.tsimport{defineStore}frompiniaexportconstuseUserStoredefineStore(user,{state:()({token:,rolePerm:[]asstring[],permissions:[]asstring[],}),getters:{isLoggedIn:(state)!!state.token,},actions:{setToken(token:string){this.tokentoken},},persist:{enabled:true,strategies:[{storage:localStorage,paths:[token,rolePerm,permissions],},],},})main.ts 注册import{createPinia}frompiniaimportpiniaPluginPersistfrompinia-plugin-persistconstpiniacreatePinia()pinia.use(piniaPluginPersist)app.use(pinia)四、路径别名在electron.vite.config.ts的renderer.resolve.alias中配置import{resolve}frompathalias:{renderer:resolve(src/renderer/src),views:resolve(src/renderer/src/views),router:resolve(src/renderer/src/router),store:resolve(src/renderer/src/store),utils:resolve(src/renderer/src/utils),api:resolve(src/renderer/src/api),layout:resolve(src/renderer/src/layout),}五、HTTP 请求封装安装 Axiosnpminstallaxios-S代理配置server:{proxy:{/api:{target:http://uat.crm.xuexiluxian.cn,changeOrigin:true,rewrite:(path)path.replace(/^\/api/,),},},},utils/request.tsimportaxiosfromaxiosimporttype{AxiosResponse}fromaxiosconstrequestaxios.create({baseURL:/api,timeout:10000,})// 请求拦截request.interceptors.request.use((config){// const user useUserStore()// if (user.token) config.headers.Authorization Bearer ${user.token}returnconfig},(error)Promise.reject(error))// 响应拦截request.interceptors.response.use((response:AxiosResponse){const{code,data,message}response.dataif(code200)returndatareturnPromise.reject(newError(message||请求失败))},(error)Promise.reject(error))exportdefaultrequestAPI 模块化src/renderer/src/api/ ├── login.ts └── user.ts// api/login.tsimportrequestfromutils/requestinterfaceLoginParams{username:stringpassword:string}exportfunctionloginByJson(data:LoginParams){returnrequest.post(/u/loginByJson,data)}六、Element Plus 按需引入安装npminstallelement-plus-Snpminstallunplugin-vue-components unplugin-auto-import-D配置importAutoImportfromunplugin-auto-import/viteimportComponentsfromunplugin-vue-components/viteimport{ElementPlusResolver}fromunplugin-vue-components/resolversplugins:[vue(),AutoImport({resolvers:[ElementPlusResolver()]}),Components({resolvers:[ElementPlusResolver()]}),]按需引入后组件直接用无需手动 importElMessage等 API 也会自动导入。七、完整electron.vite.config.tsimport{resolve}frompathimport{defineConfig}fromelectron-viteimportvuefromvitejs/plugin-vueimportAutoImportfromunplugin-auto-import/viteimportComponentsfromunplugin-vue-components/viteimport{ElementPlusResolver}fromunplugin-vue-components/resolversexportdefaultdefineConfig({main:{},preload:{},renderer:{resolve:{alias:{renderer:resolve(src/renderer/src),views:resolve(src/renderer/src/views),router:resolve(src/renderer/src/router),store:resolve(src/renderer/src/store),utils:resolve(src/renderer/src/utils),api:resolve(src/renderer/src/api),layout:resolve(src/renderer/src/layout),},},server:{proxy:{/api:{target:http://uat.crm.xuexiluxian.cn,changeOrigin:true,rewrite:(path)path.replace(/^\/api/,),},},},plugins:[vue(),AutoImport({resolvers:[ElementPlusResolver()]}),Components({resolvers:[ElementPlusResolver()]}),],},})八、项目结构总览electron-app/ └── src/renderer/src/ ├── main.ts # 入口 ├── App.vue ├── api/ # 接口按模块 │ └── login.ts ├── router/ # 路由 │ ├── index.ts │ ├── routes.ts │ └── guards.ts ├── store/ # 状态管理 │ ├── index.ts │ ├── useUserStore.ts │ └── useAppStore.ts ├── utils/ # 工具函数 │ └── request.ts ├── views/ # 页面 └── layout/ # 布局后续可补i18n 多语言、深色模式、IPC 主/渲染进程通信、自动更新等。