Electron+Vue+ElementUI+Iconify项目使用指南

约455字预计需要1分钟

¶前言

⚓该文档是写个小白师弟看的，放在博客里存个档~

首先在VSCode中拉取最新项目（源代码管理>拉取）

打开终端，使用npm install指令，安装项目所需要的依赖包

在终端中使用npm run electron:serve 指令，运行项目即可

项目整体目录结构如下图所示：

主要文件功能说明如下：

dist_electron：存放electron打包后的文件

public：存放公共资源

⭐src：存放主要代码文件

.eslintrc.js：设置语法规则

package.json：规定项目需要的依赖包版本

上述目录中，src文件夹最为重要，主要界面都存放在其中，其结构如下图所示：

主要文件功能说明如下：

⭐components：存放构成该项目的各个页面组件

router：存放路由相关文件，其中index.js设置了各界面之间的跳转路径

App.vue：整个项目的根界面，其他所有界面都是以组件的形式插入进去

background.js：控制electron的主进程，可以控制各窗口的状态

index.js：主界面的入口文件，涉及全局引入部件、注册挂载根节点等

本项目中使用的组件库为ElementUI和iView，已在整体引用，在项目中直接使用即可

具体使用方法请参考其官方文档：

本项目中使用的图标库为iconify

文件存放在src>components>Icons文件夹中，使用方法和组件一样