vue3+typescript+electron+NodeSerialport开发环境搭建

最新推荐文章于 2025-11-18 00:27:44 发布

原创

最新推荐文章于 2025-11-18 00:27:44 发布 · 1.2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #typescript #electron #javascript #npm

本文档详细介绍了如何在最新技术栈下，包括vue3、typescript和electron，设置NodeSerialport的开发环境。过程中涵盖了安装node.js、vue-cli、创建vue项目、集成electron、配置npm源、解决下载问题，以及安装和配置node-gyp、python和C++环境等步骤。

由于现在网上的教程文档使用的版本还有发布时间过于久远，前端技术更新较快，所以有了这一篇开发环境搭建

安装NodeSerialport的准备工作

安装node.js

node官网网址

点击进入node官网网址，下载16.13.0 LTS长期支持版本

默认一路安装

使用Win+R键打开运行窗口，输入powershell，敲击回车

在powrshell窗口中输入：node -v

node -v

安装vue-cli

vue-cli官网网址

点击网址进入官网，点击起步

侧边栏目录找到安装

往下浏览找到此页面

这里我是喜欢用yarn介于刚刚开始学习的同学，我这里使用npm

在使用npm之前，由于众所周知的原因我们需要切换npm的仓库地址

在powrshell窗口中输入：npm config set registry https://registry.npm.taobao.org

npm config set registry https://registry.npm.taobao.org

接下来按照vue-cli教程全局安装vue-cli

创建一个vue项目

找到一个合适的目录下

在powrshell窗口中输入：vue create vue-electron-serialport

vue create vue-electron-serialport

选择第三个自定义配置

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Havoc_Z

关注关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

electron+vue+elementui+serialport实现串口通信

defore2008的专栏

04-03

2464

网上的教程确实很多，但大多数基于框架版本比较老旧，不适用于现在高版本的electron。经过2个星期的淬炼，终于把这个electron+vue+elementui+serialport环境给搞透了。我的电脑环境版本如下。

NodeSerialport如何在vue3+electron中使用

Havoc_Z的博客

11-05

1189

前面讲了如何搭建开发环境，接下来我们讲如何使用NodeSerialport vue3+typescript+electron+NodeSerialport开发环境搭建 NodeSerialport接口说明引入NodeSerialport const SerialPort = require('serialport') 这里我们讲两个概念主线程，渲染线程由于Electron包含了浏览器环境、Node环境、系统原生的一些API，意味着在Electron里写的js，必须要分运行环境...

1 条评论您还未登录，请先登录后发表或查看评论

Vue3 + Electron 快速构建桌面应用：从环境配置到项目运行

最新发布

2301_79843130的博客

11-18

967

本文详细介绍如何在国内环境下快速搭建Vue3+Electron项目。重点解决版本兼容性问题（需严格匹配Electron与Node.js版本）和网络下载问题。

vue3+electron+typescript 项目安装、打包、多平台踩坑记录-mac+linux（包括国产化系统）

东扯葫芦西扯瓜——前端小菜鸟的博客

06-03

2936

vite+electron_vue3。在mac开发环境下打包mac应用，打包linux应用；在linux（ubantu)开发环境下打包linux应用；国产化系统统信、麒麟、深之度等系统应用打包安装

electronic-vue-typescript-starter：支持VueJS + TypeScript的电子启动器

02-04

:nut_and_bolt: Electron-Vue-TypeScript入门 Electron Shell启动程序要比您键入npm start更快地告诉您“这些天的孩子”。警告：电子编译（此启动程序的核心依赖之一）将不再被主动维护。请考虑直接使用启动您的项目！产品特点支持的所有编程/样式/标记语言：编程： TypeScript，ES6，ES7，CoffeeScript，GraphQL 风格：更少，无礼，手写笔标记/其他： Jade和Vue 特别是，将TypeScript调整为尽可能严格。良好的TypeScript代码完成！（这里有一些怪癖要解决）用分发包装：运行npm run mak

搭建 Vite + Vue3 + TypeScript + Electron 项目

biaov

07-20

1556

搭建 Vite + Vue3 + TypeScript + Electron 项目

第一章快速搭建Electron+Vite3+Vue3+TypeScript5脚手架 (无需梯子，快速安装Electron)

Etc.End的博客

04-29

4533

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验(这段话是来自官网)。

Electron+vite+vue3+ts+pinia+sqlite项目开发框架及案例

06-30

Electron、Vite、Vue 3、TypeScript (TS)、Pinia 和 SQLite 是当前流行的前端开发技术和工具。下面将围绕这些技术展开详细的知识点介绍。 1. Electron是一个使用Web技术（HTML、CSS和JavaScript）构建跨平台的桌面...

electron + vue3 + typescript + monorepo + github releas 桌面开发脚手架，快速初始化新建项目

言小溪的博客

01-28

940

替换 packages/app/electron.builder.json 里的 appId 为自己的项目域名，例如 electron.baidu.com。修改 scripts/release.sh 里的 37 行分支名，如果提交分支是默认的 main 则无需修改。打开两个终端分别启动 vue 和 electron。下载/初始化项目模版。

vue3+electron+typescript 项目安装、打包、多平台踩坑记录

东扯葫芦西扯瓜——前端小菜鸟的博客

05-26

2300

vue3+electron+typscript 项目搭建、平台兼容踩坑（win7 32)

精选资源

electron+vue3+typeScript+vite+element plus+echarts

09-07

此项目是之前公司有做桌面端应用的需求，自己研究了下electron，当时在网上找的都是vue2版本，当时想能不能结合vue3.0和vite。然后自己研究了一下，再然后就搭建了这个项目，此项目里面比较干净，只有一个页面是我...

vue-electron-serialport

05-14

我的项目电子战项目构建设置 # install dependencies npm install # serve with hot reload at localhost:9080 npm run dev # build electron application for production npm run build 该项目是通过使用 @ 生成的。关于原始结构的文档可以在找到。

electron-vue-serialport:electron-vue serialport 串口读取

05-24

项目参考项目运行环境 1，必须安装nodejs node下载地址- 2，安装node-gyp node-gyp是用来编译c++模块的工具，这里用来编译serialport， node-gyp的github文档- 全局安装 npm install -g node-gyp 通过命令npm install --global --production windows-build-tools,但是要注意的是必须以管理员的身份启动CMD窗口安装完成之后执行一下命令 npm config set msvs_version 2017 其他安装方法……百度项目的安装与使用 clone到本地 # clone到本地 git clone https://github.com/648702308/electron-vue-serialport.git # 切换到项目目录 npm install`或者`cnp

关于vue-cli3 搭建 typescript electrron应用小结（1）

m0_37556952的博客

04-24

469

关于vue-cli3 搭建 typescript electrron应用小结（1）（1）国际惯例，首先建议npm跟node更新到最新，然后安装vue-cli，记得cli一定要3.0.0+ npm install -g @vue/cli 或 yarn global add @vue/cli （2）怀着忐忑的心情，创建一个新的项目，会发现很多繁琐而必要的配置 vue create project...

【electron-todo】【bug】vue.js3.0 + typescript 挂载全局对象

qq_47993287的博客

01-20

533

electron-todo系列文章目录文章目录electron-todo系列文章目录前言一、问题背景二、不同版本Vue引入全局对象三、bug的复现和解决最后前言最近在学习electron，想要做一个TODO list的应用，第一篇文章也不知道怎么写，就随便划一下了，这里就写一下遇见的第一个bug 一、问题背景 vue.js 最近升级到了3.0的预览版，然而很多API都和原来的2.x版本有较大的改动。再加上我的开发使用的是typescript，文档和说明就更少，总之也是折腾了一段时间才搞定这个

electron+vue3实现串口调试助手

qq_42297012的博客

01-23

3194

使用到的库 node-serial electron vue3 node-serial简单使用 1.获取串口列表 const serialport = require("serialport"); serialport.list().then(list => { console.log(list); }); 2.建立串口连接 // 串口配置 const option = { baudRate: 9600, // 波特率 dataBits: 8, // 数据位 parity: '

Electron+Vue3+TypeScript+Vite桌面应用程序项目初始化

web秀

05-12

2182

https://www.webxiu.com.cn/post/10005241 初始化vite项目 yarn create vite todolist --template vue-ts cd todolist yarn yarn dev 浏览器访问3000端口安装Electron yarn add -D electron electron-builder rimraf vite-plugin-electron electron-devtools-installer 如果觉得安装慢，可以改为淘宝

electron-vue中使用serialport串口

Shuanger112的博客

02-19

2953

第一步：配置环境 1.安装 Python2.7 配置环境变量（官网下载）看网上说明必须是2.7版本，3不支持 2.安装 npm install --global --production windows-build-tools 3.安装 node-gyp npm install -g node-gyp 第二步：安装 1.安装 serialport npm install --save serial...

electron使用typescript

于坤

04-25

1772

引入 TypeScript 到 Electron 项目中是一个增强代码质量和开发体验的好方法，因为 TypeScript 提供了静态类型检查、接口和类等强大的语言特性。

vue3+typescript+vite

03-13

### Vue 3 with TypeScript and Vite Project Setup For setting up a project using Vue 3, TypeScript, and Vite, one can start by ensuring the development environment is ready for these technologies. The `package.json` file plays an essential role in configuring scripts that facilitate various tasks within the project lifecycle[^1]. For instance, including specific script commands like `"dev": "vite"` allows developers to run the application in development mode easily. To initialize such a project, installing Vite as well as its dependencies through npm or yarn is necessary: ```bash npm init vite@latest my-vue-app --template vue-ts cd my-vue-app npm install ``` After installation, running the following command starts the server for development purposes: ```bash npm run dev ``` The configuration of the build process also benefits from customizations made inside the `package.json`. Adding particular scripts ensures smooth integration between different tools used during development, such as Electron rebuilds which might be required when working on desktop applications involving native modules. In addition to basic setup instructions provided above, exploring official documentation resources offers deeper insights into advanced configurations and best practices associated with building modern web apps leveraging Vue 3 alongside TypeScript powered by Vite's performance optimizations. #### Example Directory Structure A typical directory structure may look similar to this after completing initial steps mentioned earlier: ``` my-vue-app/ ├── node_modules/ ├── public/ │ └── favicon.ico ├── src/ │ ├── assets/ │ │ └── logo.png │ ├── components/ │ │ └── HelloWorld.vue │ ├── App.vue │ └── main.ts ├── .gitignore ├── index.html ├── package.json └── tsconfig.json ``` This layout supports organizing source files logically while adhering to conventions recommended both by Vue CLI templates and community standards around structuring projects built upon these frameworks.