---
# System prepended metadata

title: 拆分組件
tags: [Mike課程]

---

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

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

![](https://i.imgur.com/l8siwnT.png)

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

```javascript=
<script>
import Header from "./components/Header.vue";
export default {
// 宣告引入元件內容
  components: {
    Header,
  },
};
</script>
```
### 載入css及圖片路徑方式
* 載入一些資源時、以前常用到"/...xxx"方式引入，vue因為cli架構 所以直接使用 ~@、直接從src路徑下方式來載入
,如果只用一個 @ 就是從最外層開始尋找。
> css
```css=
background-image: url("~@/assets/images/banner.png");
```
> js

```javascript=
import Header from "@/components/Header.vue";

```

### scoped CSS區域性

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

```css=
<style lang="scss" scoped>
```

### 全域的載入方式

```javascript=
import '@/assets/css/reset.css'
```