vue-cli3搭配vue-cli-plugin-electron-builder构建桌面端程序

简介: vue-cli3搭配vue-cli-plugin-electron-builder构建桌面端程序

注意:本项目使用的是vue3的脚手架配合vue-cli-plugin-electron-builder插件搭建

第一步:用vue-cli3.0创建一个项目

vue create projectName

当前步骤就是安装vue-cli3.0,一步步按照程序走安装就好。

第二步:安装vue-cli-plugin-electron-builder

vue add vue-cli-plugin-electron-builder

当前步骤安装好后会自动在package.json里生成几行代码如下:


image.png


WX20220313-155227@2x.png

第三步:运行项目

npm run electron:serve

image.png

1.png

第四步:打包项目

npm run electron:build

打包成功后的文件如下:


image.png


3.png

到此一个简单的项目就搭建完成了;当然这只是理想的情况,而且是比较基础和简单的场景。当你在配置或者打包的时候会遇到安装或者打包报错的问题,这些问题需要自己手动解决。后续会逐步补充在使用中遇到的常见的一些问题。

相关文章
|
22天前
第34节: Vue3 调用内联处理程序中的方法
第34节: Vue3 调用内联处理程序中的方法
31 1
|
7月前
|
前端开发 JavaScript Java
Vue系列教程(07)- Vue第一个程序(MVVM)
Vue系列教程(07)- Vue第一个程序(MVVM)
61 0
|
22天前
|
移动开发 开发框架 JavaScript
Vue3 Vite electron 开发桌面程序
Vue3 Vite electron 开发桌面程序
103 0
|
22天前
|
JavaScript
第32节: Vue3 方法处理程序
第32节: Vue3 方法处理程序
18 0
|
6月前
|
JavaScript
Vue报错:‘vue-cli-service‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件。
Vue报错:‘vue-cli-service‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件。
|
8月前
|
移动开发 JavaScript 小程序
Vue3之程序初始化(createApp)
Vue3之程序初始化(createApp)
123 0
|
10月前
|
JavaScript
vue快速入门(一) 之 第一个vue程序
vue快速入门(一) 之 第一个vue程序
|
10月前
|
前端开发 JavaScript API
Vue----单页面应用程序
Vue----单页面应用程序
|
11月前
|
JavaScript
|
11月前
|
JavaScript 前端开发 数据安全/隐私保护
建立你的第一个vue程序
建立你的第一个vue程序
58 0