• 欢迎访问1024小神,一个只会Python的程序猿不是一个好司机
  • 有什么想对我说的可以在留言板里给我留言哦~
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏1024小神吧

Vue+Electron项目简洁快速搭建教程

JS/JQ/Vue 1024小神 10个月前 (01-14) 424次浏览 5个评论

Vue+Electron项目搭建教程

最近写一个项目,需要使用Electron集成Vue,特此记录搭建过程

Vue+Electron 常用搭建方式

在之前,通常我们会使用electron-vue脚手架来快速搭建,但是这个脚手架搭建的Electron版本已经太旧了,目前github已经一年没提交更新了,所以我们需要使用其他新的方式来搭建。

Vue CLI Plugin Electron Builder

本教程使用Vue CLI Electron插件,快速的搭建Electron+Vue项目,关于插件的信息可进入Vue CLI Plugin Electron Builder官网自行了解,下面我们开始搭建

开始搭建

1:使用Vue脚手架创建Vue项目
1. 安装Vue脚手架,若已安装则可以跳过,未安装可用如下方式安装
npm install -g @vue/cli
# OR
yarn global add @vue/cli
2. 创建项目
# 下方 myproject 为项目名,可自己定义
vue create myproject

执行之后,出现如下选项:

其实就是默认配置和自定义配置,主要是代码检查、语言(js or ts)、路由、CSS(Scss等)等等…,我这边直接选择default,如果有特殊需求你可以自定义设置

Vue脚手架模式选择

如图,安装完成,我这边安装的有yarn,所以vue默认用yarn作包管理了,如果你使用的npm或cnpm,使用npm run serve 运行即可

Vue安装完成

2.配置Electron

接下来就开始配置Electron

首先进入项目目录
cd myproject
然后通过运行以下命令安装并调用vue-cli-plugin-electron-builder的生成器:
vue add electron-builder

如下图所示,提示我们选择Electron版本,直接选择最新9.0.0版本即可

选择Electron版本

接下来根据您的网络情况,安装时间各异,一般为15-60秒左右,安装成功后如下提示:

Electron安装成功

启动

如果您使用yarn(强烈推荐),则直接执行

yarn electron:serve

或者,如果您使用NPM,则执行:

npm run electron:serve

启动成功


到此为止,整合完毕启动成功,整体还是比较简单的,感谢脚手架大佬们的贡献者,方便了像我这样的搬砖者,向大佬们学习,向大佬们致敬!

如果您安装过程中遇到了问题,欢迎留言,我看到会尽量及时回复,若有需要,接下来我会再写一遍关于Electron简单入门的教程


如有失效,请留言告知丨转载请注明原文链接:Vue+Electron项目简洁快速搭建教程
点赞 (1)

您必须 登录 才能发表评论!

(5)个小伙伴在吐槽
  1. tompeng
    谢谢分享
    2021-03-08 15:02
  2. 啦啦啦啦啦
    十分强大
    2021-02-16 08:17
  3. ssjsjsjjsjsjs
    顶一下啦啦
    2021-02-02 17:29
  4. tompeng
    VUE挺实用的
    2021-02-02 11:43
  5. 妖灵二四
    VUE挺实用的
    2021-01-19 14:06