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，如果有特殊需求你可以自定义设置

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

2.配置Electron

接下来就开始配置Electron了

首先进入项目目录

cd myproject

然后通过运行以下命令安装并调用vue-cli-plugin-electron-builder的生成器：

vue add electron-builder

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

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

启动

如果您使用yarn（强烈推荐），则直接执行

yarn electron:serve

或者，如果您使用NPM，则执行：

npm run electron:serve

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

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

快速简洁的Vue+Electron项目搭建教程相关推荐

vue3+vite+electron项目搭建
vue3+vite+electron项目搭建一.vite创建新项目二.安装项目依赖三.修改package.json文件添加build节点修改scripts节点添加main节点 packag ...
手牵手系列之搭建Vue+Electron项目
https://blog.csdn.net/weixin_41549915/article/details/110931264 前言 electron:使用 JavaScript,HTML 和 CSS ...
vue2.0 项目搭建和vue 2.0 electron 项目搭建
1.关于electron vue 项目的搭建全局或者局部安装项目vue:脚手架指令生成: npm install -g vue-cli vue init simulatedgreg/electron ...
vue dplayer 加载失败_最新vue脚手架项目搭建，并解决一些折腾人的问题
话不多说,跟好lz的操作!!! 2020/8/1 第一步: ~~~~质问三连: ~~~~~~~~1.node.js安装了吗?:ht tp://nodejs.cn/download/ ~~~~~~~~2 ...
Vue + element项目搭建与使用
Vue项目搭建与使用新建vue项目引入 element 第一个请求(axios) vue路由 vue项目打包部署自定义组件 vuex入门 mockjs的使用新建vue项目 1.首先我们需要下载 ...
Vue+element 项目搭建
文章目录前言环境 vue -cli 项目创建改造一改造二改造三测试使用 elementui 安装 loader 测试总结前言最近有点小动作了,有两个项目需要推进,要把前端的玩意捡起 ...
小白快速上手前后端分离项目开发教程(springboot+vue)
本文基于springboot+vue,实现一个前后端分离项目的实操.通俗易懂,保证一学就会.同时能帮助大家更好的理解,什么是前后端分离开发?这个开发跟之前使用jsp或者模板引擎开发有什么不同. 一.为 ...
golang后台管理系统GoFrame+Vue+ElementUI框架搭建教程
项目介绍一款 Go 语言基于GoFrame.Vue.ElementUI.MySQL等框架精心打造的一款模块化.插件化.高性能的前后端分离架构敏捷开发框架,可快速搭建前后端分离后台管理系统,本着简化开 ...
vue的项目搭建demo
一.安装node环境 1.下载地址为:https://nodejs.org/en/ 2.检查是否安装成功:如果输出版本号,说明我们安装node环境成功 3.为了提高我们的效率,可以使用淘宝的镜像:ht ...

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