1
1
![ ] ( ../images/logo.png )
2
2
3
- > 使用 vue (基本上是它听起来的样子) 构造 electron 应用程序的样板代码 。
3
+ > 样板代码:基于 vue (基本上是它听起来的样子) 来构造 electron 应用程序 。
4
4
5
5
[ ![ Build Status] ( https://semaphoreci.com/api/v1/simulatedgreg/electron-vue/branches/master/badge.svg )] ( https://semaphoreci.com/simulatedgreg/electron-vue )
6
6
10
10
11
11
## 概要
12
12
13
- 该项目的目的是为了要去除使用 vue 手动设置 electron 应用程序的需要 。electron-vue 利用 ` vue-cli ` 的优势作为脚手架工具,拥有 ` vue-loader ` 的 ` webpack ` , ` electron-packager ` 或是 ` electron-builder ` ,一些最常用的插件 ,如` vue-router ` 、` vuex ` 等等。
13
+ 该项目的目的,是为了要避免使用 vue 手动建立起 electron 应用程序 。electron-vue 充分利用 ` vue-cli ` 作为脚手架工具,加上拥有 ` vue-loader ` 的 ` webpack ` 、 ` electron-packager ` 或是 ` electron-builder ` ,以及一些最常用的插件 ,如` vue-router ` 、` vuex ` 等等。
14
14
15
15
16
- #### 在[ 这里] ( https://simulatedgreg.gitbooks.io/electron-vue/content/index.html ) 查看文档 。
16
+ #### 在 [ 这里] ( https://simulatedgreg.gitbooks.io/electron-vue/content/index.html ) 查看其文档 。
17
17
18
18
你会在本样板代码中找到的东西...
19
19
20
- * 基本项目结构与 ** 单一的** ` package.json ` 设置
20
+ * 基本的项目结构与 ** 单一的** ` package.json ` 设置
21
21
* 详细的 [ 文档] ( https://simulatedgreg.gitbooks.io/electron-vue/content/ )
22
- * 使用 [ vue-cli] ( https://github.com/vuejs/vue-cli ) 的项目脚手架
22
+ * 使用 [ vue-cli] ( https://github.com/vuejs/vue-cli ) 作为项目脚手架
23
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
- * 能够为浏览器生成网页输出
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
28
* 便利的 [ NPM 脚本] ( /npm_scripts.md )
29
- * 使用 [ 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 预处理器支持
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
32
* 默认支持 [ ` stage-0 ` ] ( https://babeljs.io/docs/plugins/preset-stage-0/ ) 的 ES6
33
- * 使用 [ ` babili ` ] ( https://github.com/babel/babili ) 消除完全反编译到 ES5 的需要
33
+ * 使用 [ ` babili ` ] ( https://github.com/babel/babili ) 避免完全反编译到 ES5
34
34
* ESLint \( 支持 [ ` standard ` ] ( https://github.com/feross/standard ) 和 [ ` airbnb-base ` ] ( https://github.com/airbnb/javascript ) \)\*
35
35
* 单元测试 \( 使用 Karma + Mocha\)\*
36
36
* 端到端测试 \( 使用 Spectron + Mocha\)\*
39
39
40
40
### 起步
41
41
42
- 该样板代码被构建为 [ ` vue-cli ` ] ( https://github.com/vuejs/vue-cli ) 的模板,并包含自定义你的最终脚手架应用程序的选项。需要使用 ` node@^7 ` 或更高版本。electron-vue 官方推荐 [ ` yarn ` ] ( https://yarnpkg.org ) 作为组件管理器 ,因为它可以更好地处理依赖关系,并可以使用 ` yarn clean ` 帮助减少最后构建文件的大小。
42
+ 该样板代码被构建为 [ ` vue-cli ` ] ( https://github.com/vuejs/vue-cli ) 的一个模板,并且包含多个选项,可以自定义你最终的脚手架程序。本项目需要使用 ` node@^7 ` 或更高版本。electron-vue 官方推荐 [ ` yarn ` ] ( https://yarnpkg.org ) 作为软件包管理器 ,因为它可以更好地处理依赖关系,并可以使用 ` yarn clean ` 帮助减少最后构建文件的大小。
43
43
44
44
``` bash
45
45
# 安装 vue-cli 和 脚手架样板代码
@@ -58,19 +58,19 @@ yarn run dev # 或者 npm run dev
58
58
59
59
##### 希望使用 Vue 1?
60
60
61
- 只需指向 ` 1.0 ` 分支即可。请注意,electron-vue 已经正式废除了 ` vue@^1 ` 的使用,因此项目结构、功能和文档也将反映这些更改 \( [ ** 遗留文档** ] ( https://github.com/SimulatedGREG/electron-vue/tree/1.0/docs ) \) 。
61
+ 只需指向 ` 1.0 ` 分支即可。请注意,electron-vue 已经正式废除了 ` vue@^1 ` 的使用,因此,这些更改也同样会反映到项目结构、功能和文档上 \( [ ** 遗留文档** ] ( https://github.com/SimulatedGREG/electron-vue/tree/1.0/docs ) \) 。
62
62
63
63
``` bash
64
64
vue init simulatedgreg/electron-vue#1.0 my-project
65
65
```
66
66
67
67
### 下一步
68
68
69
- 请务必查看[ 文档 ] ( https://simulatedgreg.gitbooks.io/electron-vue/content/ ) 。文档里 ,你将找到有关项目配置、项目结构和构建应用程序的有用信息。还有一个便利的 [ FAQs ] ( https://simulatedgreg.gitbooks.io/electron-vue/content/en/faqs.html ) 部分 。
69
+ 请务必查看 [ 这个文档 ] ( https://simulatedgreg.gitbooks.io/electron-vue/content/ ) 。在这里 ,你将找到有关项目配置、项目结构和构建应用程序的有用信息。这里还有一个方便的 [ 常见问题 ] ( https://simulatedgreg.gitbooks.io/electron-vue/content/en/faqs.html ) 的部分 。
70
70
71
- ## 使用 electron-vue 制作
71
+ ## 基于 electron-vue 的作品
72
72
73
- 看看一些用 electron-vue 建造的了不起的的项目。想要列出你自己的项目吗 ?请随时提交 pull 请求。
73
+ 看看一些基于 electron-vue 建造的了不起的的项目。想要在此列出你自己的项目吗 ?请随时提交 pull 请求。
74
74
75
75
* [ ** Surfbird** ] ( https://github.com/surfbirdapp/surfbird ) : 一个基于 Electron 和 Vue 的 Twitter 客户端
76
76
* [ ** Lulumi-browser** ] ( https://github.com/qazbnm456/lulumi-browser ) : Lulumi-browser 是一个轻量级的浏览器,基于 Vue.js 2 和 Electron
0 commit comments