Electron + Vue + Mdui

Fri, 22 Jul 2022 16:23:03 +0000

文章迁移计划，样式可能出错

开始前注意,这是将 Electron 集成到 Vue 项目中的演示,如果你没有基础,建议使用样板代码

Part 0.1: 什么是 Electron #

**Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。**你可以把它看作一个专注于桌面应用的 Node.js 的变体，而不是 Web 服务器。

这不意味着 Electron 是绑定了 GUI 库的 JavaScript。相反，Electron 使用 web 页面作为它的GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。

Part 0.5: 先决条件 #

良好的网络

Part 1: 安装 Node.js #

Electron 是基于 Node.js 构建的 / 并且使用 Node.js 还能完成平时 Web 程序所做不到的事情: 与系统打交道

Node.js

进入上述地址下载并安装 Node.js

Part 2: 安装 Vue-cli #

由于我更喜欢 Vue,所以我选择用 Vue 创建项目

$ npm install @vue/cli --global

安装 vue-cli

Part 3: 创建项目 #

$ vue create electron-vue-mdui

创建自己的项目

这里选择最后一项(Manually select features)

这里依照自己的需要,我选择了 Babel(语法编译器) | Router(Vue 路由) | CSS Pre-processors(CSS预处理器) Linter / Formatter(代码风格、格式校验)

这一步选择 3.x(或更高版本)

History 模式选择 Y

CSS 预处理器我更喜欢 Stlyus, 这里依照自己的喜好选择

这里墙裂建议使用 ESLint

我选择的是 ESLint + Prettier

在这一步建议两个都选择

这一步我们选择单独放置在文件夹下

然后这里是最后一步,让你选择下一次是否要用同样的配置, 我选择的是 N

等待安装完成就创建好了一个 Vue 项目

Part4: 集成 Electron 至 Vue 项目中 #

进入项目文件夹,打开终端

安装 electron 插件

$ vue add vue-cli-plugin-electron-builder

版本选择 ^13.0.0 就可

等待它安装完成,在安装的过程中它会重构项目架构

等到安装完成你就拥有了一个 Electron + Vue 的 App

运行 Electron 试试看吧!

$ yarn electron:serve

如果弹出一个程序就成功了

Part 5: 用 MDUI 写前端 #

MDUI - Material Design 样式的前端框架

MDUI 漂亮、轻量且好用，它能让你更轻松地开发 Material Design 网页应用

首先安装它

$ yarn add mdui

然后我们需要引用它

编辑入口文件

加入一些代码

import mdui from 'mdui';
import '../vendor/mdui/css/mdui.css'; // 注意修改 css 文件的路径

在其他需要使用 MDUI 提供的 api 的 JS 文件头部导入 mdui 的 JS 文件 (来自 MDUI 作者)

然后 MDUI 就已经添加进你的项目了,接下来只需要简单写一下,就可以让你的项目使用上 MDUI

比如添加一个按钮

<button @onclick="javascript;;" class="mdui-btn mdui-color-teal mdui-ripple">button</button>

或者一个导航栏

    <div class="mdui-toolbar mdui-color-teal">
      <a href="javascript:;" class="mdui-btn mdui-btn-icon">
        <i class="mdui-icon material-icons">menu</i>
      </a>
      <span class="mdui-typo-title">Test App</span>
      <div class="mdui-toolbar-spacer"></div>
      <a href="javascript:;" class="mdui-btn mdui-btn-icon">
        <i class="mdui-icon material-icons">search</i>
      </a>
      <a href="window.onload();" class="mdui-btn mdui-btn-icon">
        <i class="mdui-icon material-icons">refresh</i>
      </a>
      <a href="javascript:;" class="mdui-btn mdui-btn-icon">
        <i class="mdui-icon material-icons">more_vert</i>
      </a>
    </div>

(代码从 VSCODE 编辑)

Part 6: 打包 #

在终端内输入打包命令进行打包

$ yarn electron:build

请注意,在打包过程中需要下载一些文件,但由于天朝网络特性,可能会 timeout,请自行替换源或使用科学上网

Electron on FloatSheep's Blog