开始前注意,这是将 Electron 集成到 Vue 项目中的演示,如果你没有基础,建议使用样板代码
Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。你可以把它看作一个专注于桌面应用的 Node.js 的变体,而不是 Web 服务器。
这不意味着 Electron 是绑定了 GUI 库的 JavaScript。相反,Electron 使用 web 页面作为它的GUI,所以你能把它看作成一个被 JavaScript 控制的,精简版的 Chromium 浏览器。
Electron 是基于 Node.js 构建的 / 并且使用 Node.js 还能完成平时 Web 程序所做不到的事情: 与系统打交道
进入上述地址下载并安装 Node.js
由于我更喜欢 Vue,所以我选择用 Vue 创建项目
$ npm install @vue/cli --global
安装 Vue-cli
$ 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 项目
进入项目文件夹,打开终端
安装 electron 插件
$ vue add vue-cli-plugin-electron-builder
版本选择 ^13.0.0
就可
等待它安装完成,在安装的过程中它会重构项目架构
等到安装完成你就拥有了一个 Electron + Vue 的 App
运行 Electron 试试看吧!
$ yarn electron:serve
如果弹出一个程序就成功了
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 编辑)
在终端内输入打包命令进行打包
$ yarn electron:build
请注意,在打包过程中需要下载一些文件,但由于天朝网络特性,可能会 timeout,请自行替换源或使用科学上网