4-1 Component 組件開發

1. main.js：程式的進入點

   import { createApp } from 'vue'
   import App2 from './App2.vue'
   import router from './router'
   import '@/assets/css/reset.css'
   
   createApp(App2).use(router).mount('#app')

   Copy
   1. 其中 App2.vue 就是一個 Component 組件
   2. import { createApp } from 'vue' 若有{}表示是從組建中拆分出來的
   3. import App2 from './App2.vue' 若沒有表示是該組件預設匯出的（一般和檔名一致）
   4. 亦可 import 共用的 css 檔 @ 來代表以組件的 src 目錄為起點
2. Component 的基本架構（可放在 components 目錄下，檔案字首大寫 ）

   <script>
   import { ref } from "vue";
   // import some from "@/components/some.vue";
   export default {
     props: {},
     emits: {},
     components: {},
     setup(props, {emit}) {
       return {};
     },
   };
   </script>
   
   <template>
   </template>
   
   <style lang="scss" scoped>
   </style>

   Copy
   1. export default 組件名稱{} 若是沒寫名稱，預設就是檔名
   2. import { ref } from "vue"; 中的 {ref} 表示從 vue 組建中拆分出 ref 函式
   3. return { isOpen, HandOpenMenu }; 中放常數、函式等，以便讓 <template> 樣板中的 {{文字樣板}} 或 v-bind、v-model、v-if、v-on...等修飾符使用
   4. <style lang="scss" scoped> 代表要用 scss 預編譯器，且樣式設定只限定在此組件中
3. 引入組件

   <script>
   import Header from "@/components/Header.vue";
   import Footer from "@/components/Footer.vue";
   export default {
     components: {
       Header,
       Footer,
     },
   };
   </script>
   
   <template>
     <div>
       <Header></Header>
       <Footer></Footer>
     </div>
   </template>
   <style lang="scss">
   * {
     margin: 0;
     padding: 0;
     background-image: url("~@/assets/images/rightbtn2.jpg");
   }
   </style>

   Copy
   1. import Header from "@/components/Header.vue"; 中用 import 來引入 Header 表示組件預設匯出的內容，所以無須放到 {} 中，路徑的 @ 來代表以組件的 src 目錄為起點（若是放在<style>中要引入素材的話，要用 ~@ 來代表 src 目錄為起點）
   2. components:{ Header } 中的 Header 表示要放到 <template> 樣板中去使用的組件名稱，可用<Header></Header>或<Header />來呈現
4. SCSS用法：
   1. 練習網站：https://www.sassmeister.com/
   2. 用法：https://blog.techbridge.cc/2017/06/30/sass-scss-tutorial-introduction/