2 Star 22 Fork 13

编程小龙 / electron-vue3-template

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

star stars

介绍

该工程已集成 所有使用案例均放在 compoents/demo 目录

技术栈

技术 描述 学习地址
electron 写前端的方式开发桌面端 官网
vite 新一代前端构建工具 官网
vue3 渐进式前端框架 官网
typescript js 的超集,强类型语言 菜鸟教程
element-plus 前端 ui 框架 文档地址
axios 请求发送 官网
pinia 全局状态管理 官网
Vue Router 路由管理 官网
vue-i18n 国际化 官网
sass Sass 是 CSS 的一种预编译语言,提供变量、嵌套规则等 官网
mockjs 模拟数据 官网

开始

  1. 该项目开发使用的node环境为 16.19.0,建议node版本在其之上

  2. 配置 npm 镜像

# 指定 npm 国内镜像
npm config set registry=https://registry.npmmirror.com/
# 指定 Electron 的国内镜像地址
npm config set electron_mirror=https://npmmirror.com/mirrors/electron/

或者简单粗暴,直接改 C:\Users[用户].npmrc

registry=https://registry.npmmirror.com/
ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
  1. 安装依赖
npm i
  1. 快速删除 node_modules
# 全局安装依赖
npm install rimraf -g
# 项目根目录执行
rimraf node_modules

工程目录结构

+ ├─┬ electron
+ │ ├─┬ main
+ │ │ └── index.ts    Electron主进程入口
+ │ └─┬ preload
+ │   └── index.ts    预加载ts脚本
  ├─┬ src
  │ ├── main.ts       Electron-渲染进程入口[即vue相关页面构建代码]
  | ├── assets        静态资源目录
  | ├── components    封装的vue组件目录
  | ├── directive     自定义指令
  | ├── hooks         组合式函数封装
  | ├── locales       国际化,多语言支持
  | ├── store         全局状态管理
  | └── utils         ts工具类
  ├── index.html
  ├── package.json
  └── vite.config.ts

必装插件

  • eslint 语法检测
  • prettier 代码格式化
  • volar [安装两个]
    • 一个基础 vue 语法提示
    • 一个 ts 版语法提示

推荐插件

  • Markdown All in One [预览 md 文件]
  • Markdown Preview GitHub Styling [github 风格的 md 预览]

已集成实现功能

i18n多语言+多窗口语言同步

多语言

mock模拟数据

demo位置

模拟数据

多主题切换+窗口主题同步

多主题切换

pinia多窗口状态同步

pinia多窗口状态主动同步更新

pinia多窗口状态被动同步更新

自定义窗口移动

对应组件DragTool

自定义窗口移动

窗口事件广播

窗口事件广播

MIT License Copyright (c) 2023 草鞋没号 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

electron+vue3全家桶+vite搭建的快速开发模板工程 展开 收起
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/longzipeng/electron-vue3-template.git
git@gitee.com:longzipeng/electron-vue3-template.git
longzipeng
electron-vue3-template
electron-vue3-template
master

搜索帮助