Skip to content

Commit ab9f198

Browse files
SimulatedGREGSimulatedGREG
committed
Merge branch 'master' of github.com:simulatedgreg/electron-vue into dev
2 parents 2913303 + 0116bae commit ab9f198

32 files changed

+1113
-0
lines changed

‎docs/LANGS.md

+1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
* [English](en/)
22
* [日本語](ja/)
3+
* [中文](cn/)

‎docs/cn/README.md

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
![](../images/logo.png)
2+
3+
> 基于 vue (基本上是它听起来的样子) 来构造 electron 应用程序的样板代码。
4+
5+
[![Build Status](https://semaphoreci.com/api/v1/simulatedgreg/electron-vue/branches/master/badge.svg)](https://semaphoreci.com/simulatedgreg/electron-vue)
6+
7+
[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)
8+
9+
[![forthebadge](http://forthebadge.com/images/badges/built-with-love.svg)](http://forthebadge.com) [![forthebadge](http://forthebadge.com/images/badges/uses-js.svg)](http://forthebadge.com) [![forthebadge](http://forthebadge.com/images/badges/makes-people-smile.svg)](http://forthebadge.com)
10+
11+
## 概要
12+
13+
该项目的目的，是为了要避免使用 vue 手动建立起 electron 应用程序。electron-vue 充分利用 `vue-cli` 作为脚手架工具，加上拥有 `vue-loader` 的 `webpack`、`electron-packager` 或是 `electron-builder`，以及一些最常用的插件，如`vue-router`、`vuex` 等等。
14+
15+
16+
#### 在 [这里](https://simulatedgreg.gitbooks.io/electron-vue/content/index.html) 查看其文档。
17+
18+
你会在本样板代码中找到的东西...
19+
20+
* 基本的项目结构与 **单一的** `package.json` 设置
21+
* 详细的 [文档](https://simulatedgreg.gitbooks.io/electron-vue/content/)
22+
* 使用 [vue-cli](https://github.com/vuejs/vue-cli) 作为项目脚手架
23+
* 立即可用的 Vue 插件 \([axios](https://github.com/mzabriskie/axios), [vue-electron](https://github.com/SimulatedGREG/vue-electron), [vue-router](https://github.com/vuejs/vue-router), [vuex](https://github.com/vuejs/vuex)\)\*
24+
* 预装开发工具 [vue-devtools](https://github.com/vuejs/vue-devtools) 和 [devtron](https://github.com/electron/devtron)
25+
* 使用 [electron-packager](https://github.com/electron-userland/electron-packager) 或 [electron-builder](https://github.com/electron-userland/electron-builder) 轻松打包你的应用程序\*
26+
* `appveyor.yml` 与 `.travis.yml` 配置用于 [electron-builder](https://github.com/electron-userland/electron-builder) 的自动部署\*
27+
* 能够生成用于浏览器的网页输出
28+
* 便利的 [NPM 脚本](/npm_scripts.md)
29+
* 使用携带模块热更新 (Hot Module Replacement) 的 [webpack](https://github.com/webpack/webpack) 和 [vue-loader](https://github.com/vuejs/vue-loader)
30+
* 在工作在 electron 的 `main` 主进程时重启进程
31+
* 支持使用 [vue-loader](https://github.com/vuejs/vue-loader/) 的 HTML/CSS/JS 预处理器
32+
* 默认支持 [`stage-0`](https://babeljs.io/docs/plugins/preset-stage-0/) 的 ES6
33+
* 使用 [`babili`](https://github.com/babel/babili) 避免完全反编译到 ES5
34+
* ESLint \(支持 [`standard`](https://github.com/feross/standard) 和 [`airbnb-base`](https://github.com/airbnb/javascript)\)\*
35+
* 单元测试 \(使用 Karma + Mocha\)\*
36+
* 端到端测试 \(使用 Spectron + Mocha\)\*
37+
38+
\* 在`vue-cli`脚手架中可定制
39+
40+
### 起步
41+
42+
该样板代码被构建为 [`vue-cli`](https://github.com/vuejs/vue-cli) 的一个模板，并且包含多个选项，可以自定义你最终的脚手架程序。本项目需要使用 `node@^7` 或更高版本。electron-vue 官方推荐 [`yarn`](https://yarnpkg.org) 作为软件包管理器，因为它可以更好地处理依赖关系，并可以使用 `yarn clean` 帮助减少最后构建文件的大小。
43+
44+
```bash
45+
# 安装 vue-cli 和 脚手架样板代码
46+
npm install -g vue-cli
47+
vue init simulatedgreg/electron-vue my-project
48+
49+
# 安装依赖并运行你的程序
50+
cd my-project
51+
yarn # 或者 npm install
52+
yarn run dev # 或者 npm run dev
53+
```
54+
55+
##### 你是一个 Windows 用户？
56+
57+
请务必查看 [**Windows 用户注意事项**](https://simulatedgreg.gitbooks.io/electron-vue/content/en/getting_started.html#a-note-for-windows-users) 来确保你拥有 electron 和其他依赖关系所需的所有必要构建工具。
58+
59+
##### 希望使用 Vue 1？
60+
61+
只需指向 `1.0` 分支即可。请注意，electron-vue 已经正式废除了 `vue@^1` 的使用，因此，这些更改也同样会反映到项目结构、功能和文档上 \([**遗留文档**](https://github.com/SimulatedGREG/electron-vue/tree/1.0/docs)\)。
62+
63+
```bash
64+
vue init simulatedgreg/electron-vue#1.0 my-project
65+
```
66+
67+
### 下一步
68+
69+
请务必查看 [这个文档](https://simulatedgreg.gitbooks.io/electron-vue/content/)。在这里，你将找到有关项目配置、项目结构和构建应用程序的有用信息。这里还有一个方便的 [常见问题](https://simulatedgreg.gitbooks.io/electron-vue/content/en/faqs.html) 的部分。
70+
71+
## 基于 electron-vue 的作品
72+
73+
看看一些基于 electron-vue 建造的了不起的的项目。想要在此列出你自己的项目吗？请随时提交 pull 请求。
74+
75+
* [**Surfbird**](https://github.com/surfbirdapp/surfbird): 一个基于 Electron 和 Vue 的 Twitter 客户端
76+
* [**Lulumi-browser**](https://github.com/qazbnm456/lulumi-browser): Lulumi-browser 是一个轻量级的浏览器，基于 Vue.js 2 和 Electron
77+
* [**Space-Snake**](https://github.com/ilyagru/Space-Snake): 使用 Electron 和 Vue.js 构建的桌面游戏。
78+
* [**Forrest**](https://github.com/stefanjudis/forrest): 一个 npm 脚本的桌面客户端
79+
* [**miikun**](https://github.com/hiro0218/miikun): 一个简单的 Markdown 编辑器
80+
* [**Dakika**](https://github.com/Madawar/Dakika): 超省时的应用程序，使写作变得轻而易举
81+
* [**Dynamoc**](https://github.com/ieiayaobb/dynamoc): Dynamoc 是一个 dynamodb-local、 dynalite 和 AWS dynamodb 的图形化界面客户端
82+
* [**Dockeron**](https://github.com/dockeron/dockeron): Dockeron 项目, 基于 Electron + Vue.js 的 Docker 桌面客户端
83+
* [**Easysubs**](https://github.com/matiastucci/easysubs): 快速简单地下载字幕

‎docs/cn/SUMMARY.md

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# 概要
2+
3+
* [简介](./README.md)
4+
* [起步](getting_started.md)
5+
* [项目结构](project_structure.md)
6+
* [文件树](file-tree.md)
7+
* [渲染器进程](renderer-process.md)
8+
* [主进程](main-process.md)
9+
* [Webpack 配置](webpack-configurations.md)
10+
* [开发](development.md)
11+
* [入口 index.html](entry_indexhtml.md)
12+
* [Vue 插件](vue_accessories.md)
13+
* [NPM 脚本](npm_scripts.md)
14+
* [CSS 框架的使用](using_css_frameworks.md)
15+
* [预处理器的使用](using_pre-processors.md)
16+
* [静态资源的使用](using-static-assets.md)
17+
* [读写本地文件](savingreading-local-files.md)
18+
* [建立你的应用](building_your_app.md)
19+
* [electron-packager 的使用](using-electron-packager.md)
20+
* [electron-builder 的使用](using-electron-builder.md)
21+
* [测试](testing.md)
22+
* [单元测试](unittesting.md)
23+
* [端到端测试](end-to-end_testing.md)
24+
* [更多](meta.md)
25+
* [常见问题](faqs.md)
26+
* [新版本](new-releases.md)
27+
* [迁移指南](migration-guide.md)
28+
* [贡献](contributing.md)

‎docs/cn/book.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"root": ""
3+
}

‎docs/cn/building_your_app.md

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# 构建你的应用程序
2+
3+
electron-vue 支持使用 [electron-packager](https://github.com/electron-userland/electron-packager) 和 [electron-builder](https://github.com/electron-userland/electron-builder) 来构建和分发你的产品阶段的程序。两个构建工具都由了不起的 [@electron-userland](https://github.com/electron-userland) 社区支持，每个都有详尽的文档。在 `vue-cli` 脚手架过程中，你会被问到你想要使用哪个构建器。
4+
5+
## [`electron-packager`](using-electron-packager.md)
6+
7+
如果你刚开始制作 electron 应用程序或只需要创建简单的可执行文件，那么 `electron-packager` 就可以满足你的需求。
8+
9+
## [`electron-builder`](using-electron-builder.md)
10+
11+
如果你正在寻找完整的安装程序、自动更新的支持、使用 Travis CI 和 AppVeyor 的 CI 构建、或本机 node 模块的自动重建，那么你会需要 `electron-builder`。

‎docs/cn/contributing.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# 贡献
2+
3+
想要贡献你的力量？随时提交 pull 请求。在准备提交任何内容之前，请务必查看以下内容...
4+
5+
### JavaScript 标准规范
6+
7+
为确保所有 JS 代码遵循基本的 ***风格标准***，请务必遵循这些 [规则](http://standardjs.com/#rules)。
8+
9+
[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)

‎docs/cn/development.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# 开发
2+
3+
### 开始开发环境设置
4+
5+
在你使用 `yarn` 或 `npm install` 安装了依赖之后， 运行...
6+
7+
```bash
8+
yarn run dev # 或者 npm run dev
9+
```
10+
11+
...然后 轰! 现在，你就在运行一个 electron-vue 应用程序.
12+
![](../images/landing-page.jpg)
13+
14+
此样板代码附带了几个易于移除的登录页面组件。

‎docs/cn/end-to-end_testing.md

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# 端对端测试
2+
3+
对于端到端测试，electron-vue 使用 [Spectron](http://electron.atom.io/spectron/) 和 测试框架 [Mocha](https://mochajs.org/) \(以及 [Chai](http://chaijs.com/)\)。Mocha 和 Chai 的 API (包括 `expect`、`should` 以及 `assert` 在内) 均在全局范围内可用。
4+
5+
### 运行测试
6+
7+
```bash
8+
# 开始 Mocha
9+
npm run e2e
10+
```
11+
12+
##### 注意
13+
14+
在运行端到端测试之前，为了使 Spectron 在测试的时候可用，请调用 `npm run pack` 来创建一个产品构建。
15+
16+
### 文件结构
17+
18+
```
19+
my-project
20+
├─ test
21+
| ├─ e2e
22+
│ │ ├─ specs/
23+
│ │ ├─ index.js
24+
└─ └─ └─ utils.js
25+
```
26+
27+
**在大多数情况下，你可以忽略** `index.js` **，只专注于编写** `specs/` **。**
28+
29+
#### `specs/`
30+
31+
这个目录里面是编写实际测试代码的地方。由于 `babel-register` 的强大功能，你可以完全依照 ES2015 进行编写。
32+
33+
#### `index.js`
34+
35+
这是 Mocha 入口文件，并收集加载在 `specs/` 内的所有测试代码用于测试。
36+
37+
#### `utils.js`
38+
39+
在这里，你会发现一些通用的函数，你可以在 `specs/` 中使用。其基本功能包括处理 electron 创建/销毁过程的 `beforeEach` 和 `afterEach`。
40+
41+
### 关于 Spectron
42+
43+
Spectron 是使用 [ChromeDriver](https://sites.google.com/a/chromium.org/chromedriver/) 和 [WebDriverIO](http://webdriver.io/) 来操作 DOM 元素的 [electron]（http://electron.atom.io）官方测试框架。
44+
45+
#### WebDriverIO 的使用
46+
47+
如 Spectron 的 [文档](https://github.com/electron/spectron#client) 中所述，你可以通过访问 `this.app.client` 来访问 [WebDriverIO APIs](http://webdriver.io/api.html)。 由于 electron-vue 使用了 Mocha，`this` 在 `afterEach`、`beforeEach` 和 `it` 之间共享。 因此，值得注意的是，ES2015 的 箭头函数 (arrow function) 不能在某些情况下使用，因为 `this` 的语境将被覆盖 \([更多信息](https://mochajs.org/#arrow-functions)\)。

‎docs/cn/entry_indexhtml.md

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# 入口 `index.html`
2+
3+
在产品阶段，electron-vue 使用 [**`html-webpack-plugin`**](https://github.com/ampedandwired/html-webpack-plugin) 创建 `index.html`。在开发过程中，你将在 `src/` 目录中找到一个 `index.ejs`。在这里，你可以更改 HTML 入口文件。
4+
5+
如果你不熟悉这个插件的工作原理，那么我鼓励你看看它的 [文档](https://www.npmjs.com/package/html-webpack-plugin)。简而言之，这个插件会自动将产品阶段的资源（包括 `renderer.js` 和 `styles.css`）注入到最终压缩版的 `index.html` 中。
6+
7+
### 开发阶段的 `index.ejs`
8+
9+
```html
10+
<!DOCTYPE html>
11+
<html>
12+
<head>
13+
<meta charset="utf-8">
14+
<title><%= htmlWebpackPlugin.options.title %></title>
15+
<%= ... %>
16+
</head>
17+
<body>
18+
<div id="app"></div>
19+
<!-- webpack 的构建会被自动注入 -->
20+
</body>
21+
</html>
22+
```
23+
24+
### 产品阶段的 `index.html` \(非压缩版\)
25+
26+
```html
27+
<!DOCTYPE html>
28+
<html>
29+
<head>
30+
<meta charset="utf-8">
31+
<title>app</title>
32+
<link href="styles.css" rel="stylesheet">
33+
</head>
34+
<body>
35+
<div id="app"></div>
36+
<script type="text/javascript" src="renderer.js"></script>
37+
</body>
38+
</html>
39+
```
40+
41+
### 关于 CDNs 的使用
42+
43+
虽然使用 CDN 提供的资源有益于你的应用程序的最终版本的大小，但我建议不要使用它们。主要原因是，通过这样做，你其实是在假设你的应用程序始终可以访问互联网，而 Electron 应用程序并不总是如此。这成为使用 CSS 框架（如 bootstrap）的一个相当重要的问题，因为没有互联网，你的应用程序将迅速变得没有任何样式并且乱七八糟。
44+
45+
> “我不在乎，我还是想用CDN。”
46+
47+
如果你坚持使用 CDN，那么你仍可以通过将标签添加到 `src/index.ejs` 文件中达到目的。只是当你的应用程序处于离线模式时，请确保设置适当的 UI/UX 流程。

‎docs/cn/faqs.md

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
# 常见问题
2+
3+
* [为什么运行 `npm run dev` 之后我的 electron 应用程序是空白的？](#why-is-my-electron-app-blank-after-running-npm-run-dev)
4+
* [为什么我的 electron 程序显示了文件浏览器？](#why-does-my-electron-app-show-a-file-explorer)
5+
* [为什么没有 `vue-devtools` 或 `devtron`？](#why-is-vue-devtoolsdevtron-missing)
6+
* [在哪里放置我的静态资源？](#where-do-i-put-static-assets)
7+
* [为什么 `npm run lint` 会出现错误？](#why-did-npm-run-lint-end-with-an-error)
8+
* [为什么我无法在网页浏览器中加载应用程序？](#why-cant-i-load-my-app-in-a-web-browser)
9+
* [如何导入 `jquery`？](#how-do-import-jquery)
10+
* [如何调试 `main` 进程？](#how-can-i-debug-the-main-process)
11+
12+
---
13+
14+
## 为什么运行 `npm run dev` 之后我的 electron 程序是空白的？
15+
16+
#### 简要
17+
18+
请确认你没有设置可能篡改 `webpack-dev-server` 的个人 **代理**。
19+
20+
## 为什么我的 electron 程序显示了文件浏览器？
21+
22+
#### 简要
23+
24+
你的 `src/renderer` 包含错误。请检查 控制台 (console)，修复错误，然后用 `CommandOrControl+R` 刷新 electron。
25+
26+
##### 详述
27+
28+
如果你的 `src/renderer` 中出现错误，则会在首次运行时与 ESLint 产生冲突。接着，一个无效的 webpack 的 `renderer.js` 会被生成出来，它会打断 `HtmlWebpackPlugin` 创建 `index.html`。由于 `webpack-dev-server` 没有 `index.html` 可以提供服务，所以服务器失败，程序返回到文件浏览器。
29+
30+
## 为什么没有 `vue-devtools` 或 `devtron`？
31+
32+
如果缺少 `vue-devtools` 或 `devtron`，请确保首次启动时，关闭并重新打开开发者工具面板。另外，请检查你的终端，检查是否在安装过程中有任何可能的错误消息。
33+
34+
## 在哪里放置我的静态资源？
35+
36+
[**静态资源的使用**](/using-static-assets.md)
37+
38+
## 为什么 `npm run lint` 会出现错误？
39+
40+
eslint 的默认属性是将控制台的错误打印出来，如果发现脚本以非零值退出结束时 \(它会产生 npm 错误\)。这是正常的行为。
41+
42+
## 为什么我无法在网页浏览器中加载应用程序？
43+
44+
[\#195](https://github.com/SimulatedGREG/electron-vue/issues/195)
45+
46+
## 如何导入 `jquery`？
47+
48+
如果你想使用 `bootstrap`，我将不得不在此打住你。在同一环境中使用 `vue` 和 `jquery` 并不是一个好的做法，这导致两个框架的相互冲突。我强烈建议使用一个 `bootstrap` 的替代方法，并使用 `vue` 提供的 JavaScript 的功能。一些建议包括使用 [`bootstrap-vue`](https://github.com/bootstrap-vue/bootstrap-vue) 和 [`vue-strap`](https://github.com/yuche/vue-strap)。若有任何原因使你必须使用 `jquery`，记得从 `webpack` 的文档里寻求有关 `ProvidePlugin` 的指导，或者参见 [\#192](https://github.com/SimulatedGREG/electron-vue/issues/192)。
49+
50+
## 如何调试 `main` 进程？
51+
52+
当使用 `electron@^1.7.2` 时，你可以打开 Goog​​le Chrome，然后转到 `chrome://inspect`，在应用程序以开发模式运行时，弹出远程的 electron 进程。
53+
54+
[Electron 文档]（https://github.com/electron/electron/blob/master/docs/tutorial/debugging-main-process.md）

‎docs/cn/file-tree.md

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# 文件树
2+
3+
### 在开发过程中
4+
5+
**注意**: 某些文件或文件夹可能会根据在 `vue-cli` 脚手架中所选设置的不同而有所不同。
6+
7+
```
8+
my-project
9+
├─ .electron-vue
10+
│ └─ <build/development>.js files
11+
├─ build
12+
│ └─ icons/
13+
├─ dist
14+
│ ├─ electron/
15+
│ └─ web/
16+
├─ node_modules/
17+
├─ src
18+
│ ├─ main
19+
│ │ ├─ index.dev.js
20+
│ │ └─ index.js
21+
│ ├─ renderer
22+
│ │ ├─ components/
23+
│ │ ├─ router/
24+
│ │ ├─ store/
25+
│ │ ├─ App.vue
26+
│ │ └─ main.js
27+
│ └─ index.ejs
28+
├─ static/
29+
├─ test
30+
│ ├─ e2e
31+
│ │ ├─ specs/
32+
│ │ ├─ index.js
33+
│ │ └─ utils.js
34+
│ ├─ unit
35+
│ │ ├─ specs/
36+
│ │ ├─ index.js
37+
│ │ └─ karma.config.js
38+
│ └─ .eslintrc
39+
├─ .babelrc
40+
├─ .eslintignore
41+
├─ .eslintrc.js
42+
├─ .gitignore
43+
├─ package.json
44+
└─ README.md
45+
```
46+
47+
#### 产品构建
48+
49+
```
50+
app.asar
51+
├─ dist
52+
│ └─ electron
53+
│ ├─ static/
54+
│ ├─ index.html
55+
│ ├─ main.js
56+
│ └─ renderer.js
57+
├─ node_modules/
58+
└─ package.json
59+
```
60+
61+
可以说，几乎所有的东西都在最终的产品构建中被删除。在分发 electron 应用程序时，这几乎是强制性的，因为你不希望用户下载拥有庞大文件的臃肿的软件。

0 commit comments

Comments
 (0)