electron-vue使用serialport串口通信及踩过的坑(已解决!)
一、配置环境
·
打工S,上周小T说公司需要开发一个安卓ipad应用,于是百度electron-vue[皱眉]...
言归正传...
一、配置环境
node -v
npm -v
python 2.7// 我这里安装版本2.7,并添加到系统-环境变量 据说其他版本会有诡异的问题...
二、创建
(官网也有一个简单demo 可以直接git clone https://github.com/electron/electron-quick-start,我这里手动创建
vue init simulatedgreg/electron-vue my-project
三、安装
// 依赖
npm install || cnpm install
// 安装node-gyp 用于调用其他语言编写的程序
npm install -g node-gyp
// 安装 serialport 库
npm install serialport -save
// 通过 electron-rebuild 包重新编译原生模块
npm install --save-dev electron-rebuild
// 编译
.\node_modules.bin\electron-rebuild.cmd
到 .\node_modules.bin\electron-rebuild.cmd 这一步一般会出问题了 如果没有 略过..直接下一步(天选之子啊![羡慕泪水])
到这里出现报错,这里其实是electron与node版本不匹配的原因,之前还有其他报错 具体原因具体分析
解决方法:
这里可以看到electron支持的node版本,由于我本地安装的electron为23.0.0 所以出现报错 遂删除并重新安装electron22.0.0,此时electron -v居然仍然出现23.0.0(再次玉玉了...)但重新尝试编译发现
.\node_modules\.bin\electron-rebuild.cmd
√ Rebuild Complete
成功了![转圈]
四、调用serialport开始开发
const { SerialPort } = require('serialport')
// 注意这里 也是一个坑,必须是{ SerialPort }!!
// const SerialPort = require('serialport') 你将会得到 require is defined
// 获取串口列表
SerialPort.list().then(
ports => {
//ports 串口信息
_this.portsList = ports
}
)
五、连接串口通信
// 连接
async connectBtn() {
if (this.btnType === 'primary') {
// 串口参数
this.ports = new SerialPort({
path: this.form.port,
baudRate: Number(this.form.baudRate),
dataBits: this.form.dataBits,
parity: this.form.parity,
stopBits: this.form.stopBits,
autoOpen: false
})
// const parser = this.ports.pipe(new Delimiter({delimiter: Buffer.from([0x03, 0x02])}))
await this.ports.open(error => {
if (error) {
console.log('打开串口失败, ' + error)
this.$message.error('串口连接失败')
}
else {
console.log('打开串口成功')
this.$message.success('串口连接成功')
this.btnType = 'danger'
this.btnText = '关闭串口'
this.ports.on('data', data => {console.log('收到串口数据:' + data)})
}
})
} else {
this.myserialport.openPort(this.form.port, false, this.callBack)
this.$message.success('串口关闭成功')
this.btnType = 'primary'
this.btnText = '连接串口'
}
},
六、其他
如果想要使用其他依赖 比如element
// 安装element
npm i element-ui -S
在main.js引入
import Vue from 'vue'
import axios from 'axios'
import App from './App'
import router from './router'
import '@/style/index.css' // global css
// 配置element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
此时在引用过程中也遇到了意外...
el-table显示空白(数据及安装都正常的情况下),于是又开始漫长寻找解决办法...
webpack.renderer.config.js文件,将
let whiteListedModules = ['vue']
改为
let whiteListedModules = ['vue', 'element-ui']
七、后续...
到这里就可以进行漫长的开发啦(。。。过关斩将,有bug通通解决!),这里还没有打包编译进行运用,猜测后续打包运行应该又会遇到各种问题[00不是/没有/不可能00]
打包过程会继续记录,期待吧...
更新:
打包过程文档
更多推荐
已为社区贡献1条内容
所有评论(0)