1 Star 2 Fork 0

sxgan / electron-vite-example

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

持续更新中。。。@sxgan

所有资源来源于网络公开资源,仅供学习

中文 | English

项目启动

安装依赖

npm install

启动命令

注意:dev使用的为本地环境,pro为线上环境,图片采用云端,请使用pro环境启动,pro环境启动会存在图片无法加载, 但使用build构建后正常, 原因可能和本地开发有关,也可自行添加图片到本地,注意修改路径

npm run pro

构建命令

npm run build

注意:初次启动加载会较慢,打包后的文件在dist-electron/release/目录下,该目录下一般会存打包版本, 根据版本进入对应的安装执行文件,win-unpacked为绿色版免安装,可直接运行exe文件,其他系统环境同理

解决进程残留并快速重启

TASKKILL /F /IM electron.exe  | npm run dev

项目结构说明

+ ├─┬ electron
+ │ ├── electron-env.d.ts             # Electron 变量声明文件   
+ │ ├── main.ts                       # Electron Main文件  
+ │ ├── ipcMain.ts                    # Electron ipcMain文件,用于IPC通信  
+ │ └── preload.ts                    # Electron 预加载脚本
+ │ └── env                           # vite 环境变量文件夹
+ │ └── other                         # vite 其他配置文件夹,自动导入等
+ │ └── public                        # Electron 静态资源文件夹
  ├─┬ src
  │ └── main.ts                       # vue 入口ts文件
  │ └── App.vue                       # Vue 单页面,用于挂载到index.html
  │ └── vite-env.d.ts                 # vite 变量声明文件
  │ └─┬ assets
  │   └── css                         # vue 公共css文件夹
  │   └── fonts                       # vue 字体文件夹
  │   └── iconfonts                   # vue 字体图标文件夹
  │   └── images                      # vue 图片文件夹
  │ └── components                    # vue 组件-用于view目录的单页面组件
  │ └── router                        
  │ │   └── index.ts                  # vue-router 配置文件
  │ └── store                         # 存放pinia store文件目录
  │ └── hooks                         # 存放 hook 公共封装方法
  │ └── utils                         
  │ │   └── CommonUtils.ts            # vue 公共ts文件-通用方法
  │ │   └── http.ts                   # axios http配置文件
  │ └── views                         # 存放vue单页面
  ├── index.html
  ├── electron-builder.json5          # electron 构建配置文件
  ├── tsconfig.json                   # TypeScript 配置文件
  ├── tsconfig.node.json
  ├── package.json                    # 依赖
  └── vite.config.ts                  # vite 配置文件

svg图片可直接放入src/assets/images/common/svg目录下,将自动加载到svgplugin.vue页面

镜像及部分包管理工具安装

1、安装 cnpm 淘宝镜像:

npm install -g cnpm --registry=https://registry.npm.taobao.org

npm install -g cnpm --registry=https://registry.npmmirror.com

2、将npm设置为淘宝镜像:

npm config set registry https://registry.npm.taobao.org

npm config set registry https://registry.npmmirror.com

3、通过npm查看cnpm镜像设置:

npm config get registry

4、通过cnpm查看cnpm镜像设置:(相当于使用cnpm)

cnpm config get registry

5、安装yarn

npm install -g yarn --registry=https://registry.npmmirror.com

构建问题

使用npm run build 时无法下载github必要构建包,此时我们需要使用yarn来构建下载,下载后的包 一般会在c盘,构建一次即可永久使用,所以再使用npm构建是就不会再去下载了

yarn run build

后续使用npm run build即可,上述命令只是为了方便下载

MIT License Copyright (c) 2024 sxgan 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.

简介

Electron26+Vite4+Vue3+TypeScript整合模版,以及axios、vue-router4、pinia、sass、highlight.js、element-plus等技术整合,在此基础进行案例开发 展开 收起
TypeScript 等 5 种语言
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
TypeScript
1
https://gitee.com/sxgan/electron-vite-example.git
git@gitee.com:sxgan/electron-vite-example.git
sxgan
electron-vite-example
electron-vite-example
upgrade

搜索帮助