From a319086d373e0e1ae6bdcb8fc279ecd4f84330e3 Mon Sep 17 00:00:00 2001
From: wangyi7099 <wy564654798@126.com>
Date: Sat, 21 Apr 2018 21:43:53 +0800
Subject: [PATCH 1/3] feat(Docs): Add usage for Using Components section

---
 docs/guide/using-vue.md | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/docs/guide/using-vue.md b/docs/guide/using-vue.md
index 3090b1cd06..c8b739a339 100644
--- a/docs/guide/using-vue.md
+++ b/docs/guide/using-vue.md
@@ -103,7 +103,9 @@ Any `*.vue` files found in `.vuepress/components` are automatically registered a
 └─ .vuepress
    └─ components
       ├─ demo-1.vue
-      └─ OtherComponent.vue
+      ├─ OtherComponent.vue
+      └─ Foo
+         └─ Bar.vue
 ```
 
 Inside any markdown file you can then directly use the components (names are inferred from filenames):
@@ -111,12 +113,15 @@ Inside any markdown file you can then directly use the components (names are inf
 ``` md
 <demo-1/>
 <OtherComponent/>
+<Foo-Bar/>
 ```
 
 <demo-1></demo-1>
 
 <OtherComponent/>
 
+<Foo-Bar/>
+
 ::: warning IMPORTANT
 Make sure a custom component's name either contains a hyphen or is in PascalCase. Otherwise it will be treated as an inline element and wrapped inside a `<p>` tag, which will lead to hydration mismatch because `<p>` does not allow block elements to be placed inside it.
 :::

From 13de53a13fad7c68c968329c09cea44642355936 Mon Sep 17 00:00:00 2001
From: wangyi7099 <wy564654798@126.com>
Date: Sat, 21 Apr 2018 22:02:12 +0800
Subject: [PATCH 2/3] git commit -m "feat(docs): add useage components"

---
 docs/.vuepress/components/Foo/Bar.vue | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 docs/.vuepress/components/Foo/Bar.vue

diff --git a/docs/.vuepress/components/Foo/Bar.vue b/docs/.vuepress/components/Foo/Bar.vue
new file mode 100644
index 0000000000..ab16351156
--- /dev/null
+++ b/docs/.vuepress/components/Foo/Bar.vue
@@ -0,0 +1,15 @@
+<template>
+  <p class="demo">
+    {{ msg }}
+  </p>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      msg: 'Hello this is <Foo-Bar>'
+    }
+  }
+}
+</script>

From 05138ed3a5270959ac06d32dd0529144af8bd1bc Mon Sep 17 00:00:00 2001
From: wangyi7099 <wy564654798@126.com>
Date: Sat, 21 Apr 2018 22:03:17 +0800
Subject: [PATCH 3/3] Update using-vue.md

---
 docs/zh/guide/using-vue.md | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/docs/zh/guide/using-vue.md b/docs/zh/guide/using-vue.md
index 107213c628..f217192c30 100644
--- a/docs/zh/guide/using-vue.md
+++ b/docs/zh/guide/using-vue.md
@@ -103,7 +103,9 @@ export default {
 └─ .vuepress
    └─ components
       ├─ demo-1.vue
-      └─ OtherComponent.vue
+      ├─ OtherComponent.vue
+      └─ Foo
+         └─ Bar.vue
 ```
 
 你可以直接使用这些组件在任意的 Markdown 文件中（组件名是通过文件名取到的）：
@@ -111,12 +113,15 @@ export default {
 ``` md
 <demo-1/>
 <OtherComponent/>
+<Foo-Bar/>
 ```
 
 <demo-1></demo-1>
 
 <OtherComponent/>
 
+<Foo-Bar/>
+
 ::: warning 重要！
 请确保一个自定义组件的名字包含连接符或者是 PascalCase，否则，它将会被视为一个内联元素，并被包裹在一个 `<p>` 标签中，这将会导致 HTML 渲染紊乱，因为 HTML 标准规定， `<p>` 标签中不允许放置任何块级元素。
 :::