組件基本介紹

main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

createApp(App).use(router).mount("#app");

main.js 為網站主程式的進入點，Vue 的初始化操作都在此設定
只要有使用到擴充功能，都要用.use 串接到主程式

拆分組件

App.vue
JS

import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
export default {
  components: {
    Header,
    Footer,
  },
};

template

1
2
3

<header />
<router-view></router-view>
<footer />

CSS

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: "Microsoft JhengHei", "Heiti TC", "sans-serif";
}
img {
  display: block;
}
html,
body {
  width: 100%;
  height: 100%;
}

@是給 VueJs 使用的，代表 src 資料夾，CSS 使用時須在前面加上波浪符~@，使用@取代../路徑，避免 bundle 的時候出錯

Header.vue
改寫成 SCSS 時須加上 lang="scss"，並將 RWD @media 放進自己的 class
scoped 只限制此檔案元素的 style

<style lang="scss" scoped>
h6 {
  color: greenyellow;
  font-size: 40px;
}
header {
  background-color: #373c3f;
  width: 100%;
  height: 97px;
  @media screen and (max-width: 640px) {
    transition: height 0.2s;
    height: 37px;
    overflow: hidden;
  }
  > nav {
    position: relative;
    width: 1024px;
    height: 100%;
    margin: 0 auto;
    @media screen and (max-width: 1044px) {
      width: 100%;
    }
    @media screen and (max-width: 640px) {
      width: 100%;
      height: 232px;
    }
  }
}
</style>