From 411408ab3a1fc06dc2c19c0047b93ba687f83836 Mon Sep 17 00:00:00 2001 From: xujianxiang Date: Mon, 26 Oct 2020 14:56:47 +0800 Subject: [PATCH 1/3] proofread: src/guide/single-file-component.md --- src/guide/single-file-component.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/guide/single-file-component.md b/src/guide/single-file-component.md index a79e49685..f316a66cb 100644 --- a/src/guide/single-file-component.md +++ b/src/guide/single-file-component.md @@ -4,12 +4,12 @@ 在很多 Vue 项目中，我们使用 `app.component` 来定义全局组件，紧接着用 `app.mount('#app')` 在每个页面内指定一个容器元素。 -这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显： +这对于中小型项目非常有效，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显： -- **全局定义 (Global definitions)** 强制要求每个 component 中的命名不得重复 -- **字符串模板 (String templates)** 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 `\` -- **不支持 CSS (No CSS support)** 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏 -- **没有构建步骤 (No build step)** 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如 Pug (formerly Jade) 和 Babel +- **全局定义 (Global definitions)** 强制要求每个 component 中的命名不得重复; +- **字符串模板 (String templates)** 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 `\`; +- **不支持 CSS (No CSS support)** 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏; +- **没有构建步骤 (No build step)** 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如 Pug (曾经的 Jade) 和 Babel。 所有这些都可以通过扩展名为 `.vue` 的 **single-file components (单文件组件)** 来解决，并且还可以使用 webpack 或 Browserify 等构建工具。 @@ -31,7 +31,7 @@ ### 怎么看待关注点分离？ -一个重要的事情值得注意，**关注点分离不等于文件类型分离**。在现代 UI 开发中，我们已经发现相比于把代码库分离成三个大的层次并将其相互交织起来，把它们划分为松散耦合的组件再将其组合起来更合理一些。在一个组件里，其模板、逻辑和样式是内部耦合的，并且把他们搭配在一起实际上使得组件更加内聚且更可维护。 +值得注意的是，**关注点分离不等于文件类型分离**。在现代 UI 开发中，我们已经发现相比于把代码库分离成三个大的层次并将其相互交织起来，把它们划分为松散耦合的组件再将其组合起来更合理一些。在一个组件里，其模板、逻辑和样式是内部耦合的，并且把他们搭配在一起实际上使得组件更加内聚且更可维护。 即便你不喜欢单文件组件，你仍然可以把 JavaScript、CSS 分离成独立的文件然后做到热重载和预编译。 @@ -46,7 +46,7 @@ ## 起步 -### 例子沙箱 +### 在线演示 如果你希望深入了解并开始使用单文件组件，请来 CodeSandbox [看看这个简单的 todo 应用](https://codesandbox.io/s/vue-todo-list-app-with-single-file-component-vzkl3?file=/src/App.vue)。 @@ -60,7 +60,7 @@ 在你花一天时间了解这些资源之后，我们建议你参考 [Vue CLI](https://cli.vuejs.org/)。只要遵循指示，你就能很快地运行一个带有 `.vue` 组件、ES2015、webpack 和热重载 (hot-reloading) 的 Vue 项目！ -### 针对高阶用户 +### 针对高级用户 CLI 会为你搞定大多数工具的配置问题，同时也支持细粒度自定义[配置项](https://cli.vuejs.org/config/)。 From c654e7669d94991336934a1d33a8310b93363503 Mon Sep 17 00:00:00 2001 From: Godpu <908662421@qq.com> Date: Mon, 26 Oct 2020 15:21:56 +0800 Subject: [PATCH 2/3] update src/guide/single-file-component.md --- src/guide/single-file-component.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/single-file-component.md b/src/guide/single-file-component.md index f316a66cb..319b43278 100644 --- a/src/guide/single-file-component.md +++ b/src/guide/single-file-component.md @@ -60,7 +60,7 @@ 在你花一天时间了解这些资源之后，我们建议你参考 [Vue CLI](https://cli.vuejs.org/)。只要遵循指示，你就能很快地运行一个带有 `.vue` 组件、ES2015、webpack 和热重载 (hot-reloading) 的 Vue 项目！ -### 针对高级用户 +### 针对高阶用户 CLI 会为你搞定大多数工具的配置问题，同时也支持细粒度自定义[配置项](https://cli.vuejs.org/config/)。 From 9207dce5f351c84a1c5c0baead0c01b797fd34b8 Mon Sep 17 00:00:00 2001 From: Godpu <908662421@qq.com> Date: Mon, 26 Oct 2020 15:26:48 +0800 Subject: [PATCH 3/3] update: src/guide/single-file-component.md (close #231) --- src/guide/single-file-component.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/single-file-component.md b/src/guide/single-file-component.md index 319b43278..7b6684c0d 100644 --- a/src/guide/single-file-component.md +++ b/src/guide/single-file-component.md @@ -4,7 +4,7 @@ 在很多 Vue 项目中，我们使用 `app.component` 来定义全局组件，紧接着用 `app.mount('#app')` 在每个页面内指定一个容器元素。 -这对于中小型项目非常有效，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显： +这对于中小型项目非常有效，在这些项目里 JavaScript 只被用来增强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显： - **全局定义 (Global definitions)** 强制要求每个 component 中的命名不得重复; - **字符串模板 (String templates)** 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 `\`;