构建Electron+Vue项目记录

2022年11月19日

约1.4k字预计需要5分钟

¶一、搭建项目

¶1、使用vue-cli搭建项目

npm uninstall vue-cli -g 先卸载已有的vue2.x脚手架，因为其无法使用vue create创建项目

npm install vue-cli -g 全局安装vue-cli5.x脚手架

¶2、使用vue create创建项目

在控制台输入vue create + 你的项目名

vue create desktop_test

选择需要的vue版本(2/3)即可

¶3、使用electron-builder安装Electron

vue add electron-builder

选择安装版本后，继续安装就报错了

此时要将electron下载地址指向taobao镜像：

npm config set electron_mirror "https://npm.taobao.org/mirrors/electron/"

再次安装

使用指令启动electron（如果此时报错找不到electron模块，npm install 一下即可）

yarn run electron:serve

¶二、引入组件

想要引入IView组件

首先使用指令安装ivew

npm install iview --save

然后在main.js文件中引入即可

import iView from 'iview'
import 'iview/dist/styles/iview.css'

Vue.use(iView)

¶三、引入路由

npm install vue-router@3.5.2

由于本次使用的是的Vue2.x，一定一定要指定vue-router@3.x版本，不然会报错！

详情见：“export ‘default‘ (imported as ‘VueRouter‘) was not found in ‘vue-router‘报错分析 (yaotu.net)

新建文件夹Router，与Component文件夹同级，在其中新建index.js文件，引入路由并设置路由跳转

参考文档：(3条消息) vue路由router的基本使用及路由跳转的方式_ꪤ、匿名的博客-CSDN博客_router 跳转

在main.js中也引入一下路由

详情见：Vue报错：Unknown custom element: router-view - did you register the component correctly_Chanel-L的博客-CSDN博客

设置默认路由

参考文档：(3条消息) Vue默认路由_红丽*的博客-CSDN博客_vuerouter默认路由

文件命名报错：Component name “index“ should always be multi-word

新建.eslintrc.js文件，关闭组件命名规则

详情见：(3条消息) 【vue eslint】报错Component name “xxxxx“ should always be multi-word.eslintvue/四种解决方案_wally94的博客-CSDN博客

¶四、功能实现

¶1、打开本地文件&读取信息

使用dialog.showOpenDialog()方法

参考文档：

src/views/file.vue · bear/vue3+electron - 码云 - 开源中国 (gitee.com)

(3条消息) electron实现打开本地文件接口（返回文件大小、文件名及文件后缀名和文件流等）_lbn2676043895的博客-CSDN博客

使用fs.stat()方法读取文件大小，单位为字节：

Node.js fs.stat()实例讲解 - 码农教程 (manongjc.com)

node获取单个指定文件得大小 - 升级打怪 - 博客园 (cnblogs.com)

¶2、实现右键菜单

v-contextmenu通过该包实现

vue-runtime-helpers同时也要装哦

安装参考文档：(4条消息) vue中，右键菜单组件v-contextmenu的使用_viceen的博客-CSDN博客_vue右键菜单组件

基础实现参考文档：【鼠标右击组件】v-contextmenu - WANGHUAN- - 博客园 (cnblogs.com)

具体案例参考文档:(4条消息) vue在el-table内结合v-contextmenu对行添加鼠标右键自定义菜单_Magic cape的博客-CSDN博客_v-contextmenu

🦋常用的鼠标点击方法：

属性名	功能
@click() / @dblclick()	单击事件 / 双击事件
@rightClick()	右击触发事件
@mousedown() / @mouseup()	按下触发 / 抬起触发事件
@mousemove()	当鼠标指针在指定的元素中移动时移动一个像素，就会发生一次 mousemove事件
@mouseleave()	当鼠标指针离开被选元素时，会发生 mouseleave 事件
@mouseout()	当鼠标指针从元素上移开时，发生 mouseout 事件
@mouseenter()	当鼠标指针进入`被选元素`时，会发生 mouseenter 事件
@mouseover()	当鼠标指针位于元素上方时，会发生 mouseover 事件