iT邦幫忙

0

【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 時可以自動產生結尾符號!
https://ithelp.ithome.com.tw/upload/images/20211126/20144231uGE3cK7XmG.png

實際建立元件到輸出到畫面,對 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


尚未有邦友留言

立即登入留言