Skip to content
This repository was archived by the owner on Aug 8, 2022. It is now read-only.

Commit 411408a

Browse files
committed
proofread: src/guide/single-file-component.md
1 parent a591633 commit 411408a

File tree

1 file changed

+8
-8
lines changed

1 file changed

+8
-8
lines changed

src/guide/single-file-component.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@
44

55
在很多 Vue 项目中,我们使用 `app.component` 来定义全局组件,紧接着用 `app.mount('#app')` 在每个页面内指定一个容器元素。
66

7-
这种方式在很多中小规模的项目中运作的很好,在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中,或者你的前端完全由 JavaScript 驱动的时候,下面这些缺点将变得非常明显:
7+
这对于中小型项目非常有效,在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中,或者你的前端完全由 JavaScript 驱动的时候,下面这些缺点将变得非常明显:
88

9-
- **全局定义 (Global definitions)** 强制要求每个 component 中的命名不得重复
10-
- **字符串模板 (String templates)** 缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 `\`
11-
- **不支持 CSS (No CSS support)** 意味着当 HTML 和 JavaScript 组件化时,CSS 明显被遗漏
12-
- **没有构建步骤 (No build step)** 限制只能使用 HTML 和 ES5 JavaScript,而不能使用预处理器,如 Pug (formerly Jade) 和 Babel
9+
- **全局定义 (Global definitions)** 强制要求每个 component 中的命名不得重复;
10+
- **字符串模板 (String templates)** 缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 `\`;
11+
- **不支持 CSS (No CSS support)** 意味着当 HTML 和 JavaScript 组件化时,CSS 明显被遗漏;
12+
- **没有构建步骤 (No build step)** 限制只能使用 HTML 和 ES5 JavaScript,而不能使用预处理器,如 Pug (曾经的 Jade) 和 Babel
1313

1414
所有这些都可以通过扩展名为 `.vue`**single-file components (单文件组件)** 来解决,并且还可以使用 webpack 或 Browserify 等构建工具。
1515

@@ -31,7 +31,7 @@
3131

3232
### 怎么看待关注点分离?
3333

34-
一个重要的事情值得注意**关注点分离不等于文件类型分离**。在现代 UI 开发中,我们已经发现相比于把代码库分离成三个大的层次并将其相互交织起来,把它们划分为松散耦合的组件再将其组合起来更合理一些。在一个组件里,其模板、逻辑和样式是内部耦合的,并且把他们搭配在一起实际上使得组件更加内聚且更可维护。
34+
值得注意的是**关注点分离不等于文件类型分离**。在现代 UI 开发中,我们已经发现相比于把代码库分离成三个大的层次并将其相互交织起来,把它们划分为松散耦合的组件再将其组合起来更合理一些。在一个组件里,其模板、逻辑和样式是内部耦合的,并且把他们搭配在一起实际上使得组件更加内聚且更可维护。
3535

3636
即便你不喜欢单文件组件,你仍然可以把 JavaScript、CSS 分离成独立的文件然后做到热重载和预编译。
3737

@@ -46,7 +46,7 @@
4646

4747
## 起步
4848

49-
### 例子沙箱
49+
### 在线演示
5050

5151
如果你希望深入了解并开始使用单文件组件,请来 CodeSandbox [看看这个简单的 todo 应用](https://codesandbox.io/s/vue-todo-list-app-with-single-file-component-vzkl3?file=/src/App.vue)
5252

@@ -60,7 +60,7 @@
6060

6161
在你花一天时间了解这些资源之后,我们建议你参考 [Vue CLI](https://cli.vuejs.org/)。只要遵循指示,你就能很快地运行一个带有 `.vue` 组件、ES2015、webpack 和热重载 (hot-reloading) 的 Vue 项目!
6262

63-
### 针对高阶用户
63+
### 针对高级用户
6464

6565
CLI 会为你搞定大多数工具的配置问题,同时也支持细粒度自定义[配置项](https://cli.vuejs.org/config/)
6666

0 commit comments

Comments
 (0)