File tree Expand file tree Collapse file tree 4 files changed +19
-19
lines changed Expand file tree Collapse file tree 4 files changed +19
-19
lines changed Original file line number Diff line number Diff line change 1
1
# 读写本地文件
2
2
3
- 使用 ` electron ` 的一大好处是可以访问用户的文件系统。这使你可以读取和写入本地系统上的文件。为了避免 Chromium 限制以及对应用程序内部文件的改写 ,请确保使用 ` electron ` 的 API,特别是 [ ` app.getPath(name) ` ] ( https://electron.atom.io/docs/api/app/#appgetpathname ) 函数。这个帮助函数可以使你获得指向系统目录的文件路径,如用户的桌面、系统临时文件 等等。
3
+ 使用 ` electron ` 的一大好处是可以访问用户的文件系统。这使你可以读取和写入本地系统上的文件。为了避免 Chromium 的限制以及对应用程序内部文件的改写 ,请确保使用 ` electron ` 的 API,特别是 [ ` app.getPath(name) ` ] ( https://electron.atom.io/docs/api/app/#appgetpathname ) 函数。这个帮助函数可以使你获得指向系统目录的文件路径,如用户的桌面、系统临时文件 等等。
4
4
5
5
### 使用案例
6
6
7
- 假设我们想为我们的应用程序提供本地数据库存储 。在这个例子中,我们将用 [ ` nedb ` ] ( https://github.com/louischatriot/nedb ) 演示 。
7
+ 假设我们想为我们的应用程序提供本地的数据库存储 。在这个例子中,我们将用 [ ` nedb ` ] ( https://github.com/louischatriot/nedb ) 作为演示 。
8
8
9
9
``` bash
10
10
yarn add nedb # 或 npm install nedb --save
11
11
```
12
12
13
13
** src/renderer/datastore.js**
14
14
15
- 这里,我们设置 NeDB 并将其指向我们的 ` userData ` 目录。这个空间专门为我们的应用程序保留 ,所以,我们可以确信,其他程序 或 与其他用户的交互不应该篡改这个文件空间。至此,我们可以在 ` renderer ` 进程中导入 ` datastore.js ` 并使用它。
15
+ 这里,我们设置 NeDB 并将其指向我们的 ` userData ` 目录。这个空间专门为我们的应用程序所保留 ,所以,我们可以确信,其他程序 或 与其他用户的交互不应该篡改这个文件空间。至此,我们可以在 ` renderer ` 进程中导入 ` datastore.js ` 并使用它。
16
16
17
17
``` js
18
18
import Datastore from ' nedb'
@@ -27,7 +27,7 @@ export default new Datastore({
27
27
28
28
** src/renderer/main.js**
29
29
30
- 为了更进一步,我们可以将数据存储导入到 ` src/renderer/main.js ` 里,并将其附加到 Vue 的原型上 。通过在所有组件文件中使用 ` this.$db ` ,我们现在可以访问数据存储的 API。
30
+ 为了更进一步,我们可以将数据存储导入到 ` src/renderer/main.js ` 里,并将其附加到 Vue 的 原型 (prototype) 上 。通过在所有组件文件中使用 ` this.$db ` ,我们现在可以访问数据存储的 API。
31
31
32
32
``` js
33
33
import db from ' ./datastore'
Original file line number Diff line number Diff line change 1
1
# 静态资源的使用
2
2
3
- 如果你以前使用过官方的 ` vuejs-templates/webpack ` 样板,那么你应该对 ` static/ ` 目录很熟悉。这里面,你可以放置可供 ` main ` 和 ` renderer ` 进程使用的静态资源。在 Vue 应用程序中使用这些资源很简单,但是使用 ` fs ` 和其他需要完整路径的模块可能会有点棘手。 幸运的是,electron-vue 提供了一个 ` __static ` 变量,它可以在开发和产品阶段产生 ` static/ ` 目录的路径。
3
+ 如果你以前使用过官方的 ` vuejs-templates/webpack ` 样板,那么你应该对 ` static/ ` 目录很熟悉。这里面,你可以放置可供 ` main ` 和 ` renderer ` 进程使用的静态资源。在 Vue 应用程序中使用这些资源很简单,但是使用 ` fs ` 和其他需要完整路径的模块可能会有点棘手。 幸运的是,electron-vue 提供了一个 ` __static ` 变量,它可以在开发和产品阶段生成 ` static/ ` 目录的路径。
4
4
5
5
### Vue 组件里 ` src ` 标签的使用案例
6
6
23
23
</script >
24
24
```
25
25
26
- 此处,` webpack ` 不会捆绑图像 ` unsplash.png ` ,并且应用程序会看到 ` static/imgs/unsplash.png ` 目录里的资源。感谢 ` vue-loader ` 为我们完成了所有繁琐的工作。
26
+ 此处,` webpack ` 并不会捆绑图像 ` unsplash.png ` ,并且应用程序可以看到 ` static/imgs/unsplash.png ` 目录里的资源。感谢 ` vue-loader ` 为我们完成了所有繁琐的工作。
27
27
28
28
### JS 搭配 ` fs ` 、` path ` 和 ` __static ` 的使用案例
29
29
30
- 假设我们有一个静态资源,我们需要使用 ` fs ` 将它读入到我们的应用程序中,但是我们如何在开发和产品阶段为 ` static/ ` 目录获得可靠的路径呢?electron-vue 提供一个名为 ` __static ` 的全局变量,它将产生一个指向 ` static/ ` 目录的正确路径。以下是我们在开发和产品阶段如何使用它读取一个简单的文本文件。
30
+ 假设我们有一个静态资源,我们需要使用 ` fs ` 将它读入到我们的应用程序中,但是我们如何在开发和产品阶段为 ` static/ ` 目录获得可靠的路径呢?electron-vue 提供了一个名为 ` __static ` 的全局变量,它将产生一个指向 ` static/ ` 目录的正确路径。以下是我们在开发和产品阶段如何使用它读取一个简单的文本文件。
31
31
32
32
** static/someFile.txt**
33
33
@@ -47,6 +47,6 @@ console.log(fileContents)
47
47
// => "foobar"
48
48
```
49
49
50
- 请注意,在产品阶段,默认情况下,所有文件都包含 [ ` asar ` ] ( https://github.com/electron/asar ) ,它是被极力推荐的 。因此,` static/ ` 文件夹中的资源只能在 ` electron ` 内部访问,因为 ` electron ` 了解此特性 。由此,如果你打算将文件分发给用户,例如在外部程序中打开文件,那么,首先你需要将这些资源从应用程序复制到用户的文档空间或桌面中。从那里,你可以使用 electron 的 API [ ` shell.openItem() ` ] ( https://electron.atom.io/docs/api/shell/#shellopenitemfullpath ) 来打开这些资源。
50
+ 请注意,在产品阶段,默认情况下,所有文件都包含 [ ` asar ` ] ( https://github.com/electron/asar ) ,因为它是被极力推荐的 。因此,` static/ ` 文件夹中的资源只能在 ` electron ` 内部访问,因为只有 ` electron ` 了解此行为 。由此,如果你打算将文件分发给用户,例如在外部程序中打开文件,那么,首先你需要将这些资源从应用程序复制到用户的文档空间或桌面中。从那里,你可以使用 electron 的 API [ ` shell.openItem() ` ] ( https://electron.atom.io/docs/api/shell/#shellopenitemfullpath ) 来打开这些资源。
51
51
52
- 这种情况的一种替代方法是配置 ` electron-packager ` / ` electron-builder ` ,设置特定文件,用来 “解压缩” 在产品阶段的 ` asar ` 存档。electron-vue 并没有计划支持这种方法; 任何与此或如何设定此事项相关的问题将被关闭 。
52
+ 这种情况的一种替代方法,是配置 ` electron-packager ` 或 ` electron-builder ` ,设置特定文件,用来 “解压缩” 在产品阶段的 ` asar ` 存档。electron-vue 并没有计划支持这种方法; 任何与此或与如何设定此事项相关的问题将被关闭 。
Original file line number Diff line number Diff line change 1
1
# CSS 框架的使用
2
2
3
- 虽然这可能看起来并不明智,但我建议你使用 [ ` style-loader ` ] ( https://github.com/webpack/style-loader ) 将第三方 CSS 库导入 webpack,这一点已经为你做到了 。
3
+ 虽然这可能看起来并不明智,但我建议你使用 [ ` style-loader ` ] ( https://github.com/webpack/style-loader ) 将第三方 CSS 库导入 webpack,其实这一点我们已经为你做了 。
4
4
5
- ## 实际情况
5
+ ## 使用案例
6
6
7
- 假设你要为你的程序使用 [ bootstrap] ( http://getbootstrap.com/ ) 、[ bulma] ( http://bulma.io/ ) 或者 [ materialize] ( http://materializecss.com/ ) 。你可以仍旧像通常情况下一样,从 ` npm ` 安装你的库,而不是将资源附加到 ` index.ejs ` ,我们将在我们的 JavaScript 中导入 CSS,特别是在 ` src/renderer/main.js ` 中。
7
+ 假设你要为你的程序使用 [ bootstrap] ( http://getbootstrap.com/ ) 、[ bulma] ( http://bulma.io/ ) 或者 [ materialize] ( http://materializecss.com/ ) 。你可以仍旧像通常情况下一样,从 ` npm ` 安装你的库,而不是将资源附加到 ` index.ejs ` 上 ,我们将在我们的 JavaScript 中导入 CSS,具体在 ` src/renderer/main.js ` 中。
8
8
9
9
#### 例子
10
10
11
- 让我们安装 ` bulma `
11
+ 让我们安装 ` bulma ` 如下
12
12
13
13
``` bash
14
14
npm install bulma --save
@@ -20,7 +20,7 @@ npm install bulma --save
20
20
import ' bulma/css/bulma.css'
21
21
```
22
22
23
- 替代方案是, 你也可以在你的组建文件中引用 ` bulma ` 。
23
+ 替代方案是, 你也可以在你的组件文件中引用 ` bulma ` 。
24
24
25
25
** App.vue**
26
26
@@ -30,4 +30,4 @@ import 'bulma/css/bulma.css'
30
30
</style >
31
31
```
32
32
33
- 现在,` webpack ` 会为我们的应用程序加载 ` bulma ` ,并使其可用于产品构建中 .
33
+ 现在,` webpack ` 会为我们的应用程序加载 ` bulma ` ,并使其在产品构建中可用 .
Original file line number Diff line number Diff line change @@ -26,7 +26,7 @@ npm install --save-dev sass-loader node-sass
26
26
</style >
27
27
```
28
28
29
- ...现在变成了...
29
+ ... 现在变成了 ...
30
30
31
31
``` html
32
32
<style lang =" scss" >
@@ -36,17 +36,17 @@ npm install --save-dev sass-loader node-sass
36
36
</style >
37
37
```
38
38
39
- 相同的原理适用于任何其他预处理器。那么也许你的 JS 需要 coffeescript?只需安装 [ coffeescript-loader] ( https://github.com/webpack/coffee-loader ) ,并将 ` lang =“coffeescript” ` 属性应用到你的 ` <script> ` 标签上。
39
+ 相同的原理适用于任何其他预处理器。那么,也许你的 JS 需要 coffeescript?只需安装 [ coffeescript-loader] ( https://github.com/webpack/coffee-loader ) ,并将属性 ` lang=“coffeescript” ` 应用到你的 ` <script> ` 标签上。
40
40
41
41
要获得该功能更高级的使用情况,请转到 [ vue-loader 的文档] ( http://vue-loader.vuejs.org/en/configurations/pre-processors.html ) 了解更多信息。
42
42
43
43
## Sass/SCSS 全局变量的使用
44
44
45
- 当使用 Sass/SCSS 作为你的 CSS 语法时,在整个 Vue 组件文件中使用 全局变量/ 混合嵌套 是非常有益的。以下是如何实现此方法 。
45
+ 当使用 Sass/SCSS 作为你的 CSS 语法时,在整个 Vue 组件文件中使用 全局变量 与 混合嵌套 是非常有益的。以下是此方法的实现 。
46
46
47
47
### 使用案例
48
48
49
- 此示例演示了如何将 ` globals.scss ` 应用于所有的 Vue 组件文件 。本文档假设你已经在开发环境中如上所述地设置了 ` sass-loader ` 。
49
+ 此示例演示了如何将 ` globals.scss ` 应用于所有的 Vue 组件文件中 。本文档假设你已经在开发环境中如上所述地设置了 ` sass-loader ` 。
50
50
51
51
#### 定义你的全局变量
52
52
You can’t perform that action at this time.
0 commit comments