Component 組件開發

4. 安裝 node.js 及 vue-cli

4-2 scss 用法 next

Vue.js 3.0 筆記

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')
```
1. 其中 App2.vue 就是一個 Component 組件
2. import { createApp } from 'vue' 若有{}表示是從組建中拆分出來的
3. import App2 from './App2.vue' 若沒有表示是該組件預設匯出的（一般和檔名一致）
4. 亦可 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>
```
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 預編譯器，且樣式設定只限定在此組件中
引入組件
```
<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>
```
1. import Header from "@/components/Header.vue"; 中用 import 來引入 Header 表示組件預設匯出的內容，所以無須放到 {} 中，路徑的 @ 來代表以組件的 src 目錄為起點（若是放在<style>中要引入素材的話，要用 ~@ 來代表 src 目錄為起點）
2. components:{ Header } 中的 Header 表示要放到 <template> 樣板中去使用的組件名稱，可用<Header></Header>或<Header />來呈現
SCSS用法：
1. 練習網站：https://www.sassmeister.com/
2. 用法：https://blog.techbridge.cc/2017/06/30/sass-scss-tutorial-introduction/