electron+vue3全家桶+vite项目搭建【一】使用开源项目快速搭建基础工程

文章目录

指引
1.创建工程
2.安装依赖
3.运行工程
4.打包工程

指引

项目地址
视频讲解

1.创建工程

直接用开源的electron构建脚手架：https://github.com/electron-vite/electron-vite-vue

1.使用命令创建工程

npm create electron-vite

2.输入工程的名称

2.安装依赖

工程下载好后，我们打开工程，并在根目录打开终端，然后安装对应的依赖

1.配置镜像

# 指定 npm 国内镜像
npm config set registry=https://registry.npm.taobao.org/
# 指定 Electron 的国内镜像地址
npm config set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/

2.安装依赖

npm i

3.如果npm下载出错，可以使用cnpm进行安装

# 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 使用cnpm安装依赖
cnpm i

遇到问题：

vite-plugin-electron-renderer 版本找不到，降低一下版本为 0.13.10 即可

3.运行工程

执行dev脚本，运行成功显示如图所示

npm run dev

4.打包工程

执行build脚本，打包工程

npm run build

运行成功后，可以看到根目录下多了一个release目录，如下图所示

其中1.0.0对应package.json中的配置，如下图所示：

之后我们进行版本迭代的时候只需要修改version即可打出不通版本的包
多个版本的包放在服务器上再结合代码，就可以实现electron的自动更新

electron+vue3全家桶+vite项目搭建【一】使用开源项目快速搭建基础工程相关推荐

electron+vue3全家桶+vite项目搭建【九】集成vite-plugin-mock-server 模拟后端请求
文章目录引入 1.引入依赖 2.集成插件 3.测试接口请求引入后端接口出的太慢?问题不大,咱们可以借助vite-plugin-mock-server插件自己写接口,返回商量好的格式,后续联调直接 ...
electron+vue3全家桶+vite项目搭建【八】集成mockjs模拟数据
引入造数据是很麻烦的事情,我们可以把造数据的流程交给mockjs去做视频讲解 mock.js官网 demo项目地址 1.引入依赖 # 安装mockjs的依赖 npm install mockjs ...
推荐一个 Vue3 全家桶 + TS+ Vite2 + element-plus 的网站实战项目
五一期间,花了 3 天时间,边学 Vue3 和 Vite2,边重构自己的项目,终于都用 Vue3 + TypeScript + Vite2 + Vuex4 + Vue-Router4 + elemen ...
Vue3 全家桶 + Element Plus + Vite + TypeScript + Eslint 项目配置最佳实践
尤大的 Vue3.0 已经发布有一阵子了,已经很成熟了. 而且 Element Plus + Vite 也出了一段时间了,是时候该上手体验分享一波了. 主要是要熟练一下 Vue3,好准备用 Vue3 ...
猿创征文 | 开箱即用 yyg-cli：快速创建 vue3 组件库和vue3 全家桶项目
1 yyg-cli 是什么 yyg-cli 是优雅哥开发的快速创建 vue3 项目的脚手架.在 npm 上发布了两个月,11月1日进行了大升级,发布 1.1.0 版本:支持创建 vue3 全家桶项目和 ...
助你上手Vue3全家桶之Vue3教程
目录前言 1,setup 1.1,返回值 1.2,注意点 1.3,语法 1.4,setup的参数 2,ref 创建响应式数据 3,reactive 创建响应式数据 4,computed 计算属性 5 ...
可以快速搭建的免费开源项目：直播带货、富文本笔记、思维导图、声音克隆、消息推送服务、文档协作等等
可以快速搭建的免费开源项目:直播带货.富文本笔记.思维导图.声音克隆.消息推送服务.文档协作等等. 01 Pure Live 一个想让直播回归纯粹的项目,没有礼物.粉丝团.弹窗,只有直播和弹幕.这是国 ...
直播视频搭建平台----如何短期实现快速搭建上线占据市场吸取流量
直播视频搭建平台----如何短期实现快速搭建上线占据市场吸取流量在过去的2017年与2018年到来之交,当下做火热的直播行业焕发了第二春,让越来越多团队投入直播行业,到底是采用开源的直播软件系统,还 ...
【fly-iot飞凡物联】（5）：开源项目Apache IoTDB，开源项目学习，原来还有这样的项目，关于IOT的几个开源项目汇总下
目录前言 1,关于:开源项目Apache IoTDB 2,还有个admin后台 3,thinglinks项目 4,thingsboard-ui-vue项目 5,apache pulsar项目 6,A ...

electron+vue3全家桶+vite项目搭建【一】使用开源项目快速搭建基础工程

文章目录

指引

1.创建工程

2.安装依赖

3.运行工程

4.打包工程

electron+vue3全家桶+vite项目搭建【一】使用开源项目快速搭建基础工程相关推荐

最新文章

热门文章