【Vue】将元件输出到画面｜专案实作

输出完 header 元件後，试着在 App.vue 引入 TaiHeader.vue。
App.vue*

<template>
 <div id="app">
   <tai-header></tai-header>
 </div>
</template>

<script>
// @ is an alias to /src
import TaiHeader from '@/components/TaiHeader.vue';

export default {
 components: {
   TaiHeader,
 }
}
</script>

• import: 先从 TaiHeader.vue 引入 header 元件
• export: 目前输出的有 header 元件

需要注意 template 引入的元件要以小写作为 tag 名称，中间以连接号相连。还有可能出现的错误讯息是 tag 没有正确结尾，整个网页翻遍了原来是不小心出现两次</div>。

19:15 error Parsing error: end-tag-with-attributes vue/no-parsing-error
48:5 error Parsing error: x-invalid-end-tag vue/no-parsing-error
50:3 error Parsing error: x-invalid-end-tag

</div class="home">
   <tai-header></tai-header>
</div>

这时候马上搜寻 Visual studio code plugins，找到套件 auto close tag ，输入 tag 时可以自动产生结尾符号！

实际建立元件到输出到画面，对 Vue 架构的了解是:

1.建立单一元件档(Single File Components, SFC) ➡️ 多个元件组成各个 View
2.建立、输出、引入，将各个元件拆分开来，不仅是重复利用，切分开来的元件在维护时更容易找到问题所在。

资料来源：
https://www.jianshu.com/p/d5eec7c90b43
https://blog.goodjack.tw/2018/03/visual-studio-code-extensions.html