:::
4. 安裝 node.js 及 vue-cli 
4-1 Component 組件開發
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')- 其中
App2.vue就是一個 Component 組件 import { createApp } from 'vue'若有{}表示是從組建中拆分出來的import App2 from './App2.vue'若沒有表示是該組件預設匯出的（一般和檔名一致）- 亦可
import共用的 css 檔@來代表以組件的src目錄為起點
- 其中
- 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>export default 組件名稱{}若是沒寫名稱，預設就是檔名import { ref } from "vue";中的{ref}表示從 vue 組建中拆分出ref函式return { isOpen, HandOpenMenu };中放常數、函式等，以便讓<template>樣板中的{{文字樣板}}或v-bind、v-model、v-if、v-on...等修飾符使用<style lang="scss" scoped>代表要用 scss 預編譯器，且樣式設定只限定在此組件中
- 引入組件
<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>import Header from "@/components/Header.vue";中用import來引入Header表示組件預設匯出的內容，所以無須放到{}中，路徑的@來代表以組件的src目錄為起點（若是放在<style>中要引入素材的話，要用~@來代表src目錄為起點）components:{ Header }中的Header表示要放到<template>樣板中去使用的組件名稱，可用<Header></Header>或<Header />來呈現
- SCSS用法：
