Bootstrap

electron-vue开发,介绍

开发


开始开发环境设置

在你使用yarn 或者npm install 安装依赖之后,运行.....

yarn run dev # (yarn run dev) 或者 npm run dev

此样板代码附带了几个易于移除的登录页面组件。

 

入口


在产品阶段,electron-vue 使用 html-webpack-plugin 创建 index.html。在开发过程中,你将在 src/ 目录中找到一个 index.ejs。在这里,你可以更改 HTML 入口文件。

如果你不熟悉这个插件的工作原理,那么我鼓励你看看它的 文档。简而言之,这个插件会自动将产品阶段的资源(包括 renderer.js 和 styles.css)注入到最终压缩版的 index.html 中。

开发阶段的 index.ejs

产品阶段的 index.html (非压缩版)

 

关于 CDNs 的使用

虽然使用 CDN 提供的资源有益于你的应用程序的最终版本的大小,但我建议不要使用它们。主要原因是,通过这样做,你其实是在假设你的应用程序始终可以访问互联网,而 Electron 应用程序并不总是如此。这成为使用 CSS 框架(如 bootstrap)的一个相当重要的问题,因为没有互联网,你的应用程序将迅速变得没有任何样式并且乱七八糟。

“我不在乎,我还是想用CDN。”

如果你坚持使用 CDN,那么你仍可以通过将标签添加到 src/index.ejs 文件中达到目的。只是当你的应用程序处于离线模式时,请确保设置适当的 UI/UX 流程。

 

Vue插件


electron-vue 包含以下 vue 插件,可以使用 vue-cli 脚手架安装...

 

axios(基于 Promise,用于浏览器和 node.js 的 HTTP 客户端)

如果你熟悉 vue-resource,那么你也会觉得 axios 并不陌生,因为大部分 API 几乎是一样的。你可以在 main 进程脚本中轻松导入 axios,或者在 renderer

;