关于vue.js:VueElectron项目简洁快速搭建教程

3次阅读

共计 1009 个字符,预计需要花费 3 分钟才能阅读完成。

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 简略入门的教程

正文完
 0