---
tags: Mike課程
---
# 拆分組件

### 新增與引入組件
* 當我們要拆成一個一個組件時可將需要的HTML結構拆分到components資料夾下面(第一個字為大寫)。
* 當使用原件時 可使用 < Header /> 標籤方式加載使用。


* ==引入組件==時需要先告知components 引入內容。

<script>
import Header from "./components/Header.vue";
export default {
// 宣告引入元件內容
  components: {
    Header,
  },
};
</script>

### 載入css及圖片路徑方式
* 載入一些資源時、以前常用到"/...xxx"方式引入，vue因為cli架構 所以直接使用 ~@、直接從src路徑下方式來載入
,如果只用一個 @ 就是從最外層開始尋找。
> css

background-image: url("~@/assets/images/banner.png");

> js

import Header from "@/components/Header.vue";

### scoped CSS區域性

* 若不要組件與組件中css相互影響、可在標籤後面下 scoped ，就只會影響到目前組件範圍。

<style lang="scss" scoped>

### 全域的載入方式

import '@/assets/css/reset.css'