用electron-vue实现跨平台桌面应用程序完整教学

简介

从第一节开始，以后每期都会同步更新（本人在社交媒体上第一次发布原创教学，创作不易，还望支持[作揖]）

ELECTRON 带你了解它，传送门https://www.electronjs.org/

使用JavaScript,HTML和CSS构建跨平台桌面应用程序

开发案例，vsCode,FacebооkMessenger等桌面程序

第一小节：（环境搭建，您需要配置以下环境）

• 安装node.js环境，下载node.js SDK 链接地址：https://nodejs.org/zh-cn/ （推荐安装最新稳定版本）

2.安装vue 环境

• 第一步：使用npm包管理工具安装淘宝镜像
• 执行命令：npm install -g cnpm –registry=https://registry.npm.taobao.org 然后回车等待终端给出响应。
• 第二步：全局安装vue/cli脚手架
• 执行命令： cnpm install –global vue-cli,安装全局vue-cli脚手架，用于快速搭建大型单页应用。
• vue -v 检查是否安装成功，如果返回版本号则说明安装成功。
• 所有环境安装完毕展示如下图显示：

显示出node与vue版本号信息表明部署完成

3.环境搭建完成后创建vue项目(自定义)

• 第一步：创建一个项目文件夹并cd到根目录
• 第二步：输入 vue create electron-vue-demo 按下回车等待项目创建目录打开
• 第三步：选择需要配置，如图显示

根据图中配置项选择

4.vue项目创建成功后，窗口显示信息，如下图

我们在本地浏览器打开 http://localhost:8080 看到如下界面说明我们已经成功创建了一个vue项目。

好啦，谢谢您的阅读，本期教程就到这里啦，后续将持续发布，有兴趣的小伙伴与正在学习开发或者已经是一名开发工程师的朋友可以一起探讨IT开发技术，本小哥哥职业IT，技术方向主MS.NET后端开发，前端也不赖[大笑]，谢谢支持。