一般在開發中，我們會人為把元件分2個目錄存放，一個代表的頁面元件，另一個代表頁面一部分的子元件。

src/
  |- views/
     |- Home.vue
  |- components/
  |- App.vue
  |- main.js

在元件中編輯三個標籤，編寫檢視、vm物件和css樣式程式碼。

1、template 編寫html程式碼的地方

<template>
  <!-- template標籤裡面有且只有一個子標籤 -->
  <div>
    <h1>Home頁面</h1>
    <button @click="num--">-</button>
    <input type="text" size="1" v-model="num" id="">
    <button @click="num++">+</button>
  </div>
</template>

2、script編寫vue.js程式碼

<script>
export default {
  name: "Home",   // 定義元件名，元件名和檔名一致，每個單詞首字母大寫
  data(){  // 注意：data必須是一個函式，函式的返回值必須是一個json物件
    return {
      num: 10
    }
  }
};
</script>

3、style編寫當前元件的樣式程式碼

<style scoped>
/*
  scoped 聲明當前style的css樣式只能在當前元件中有效，不會影響其他的元件
  如果不宣告，則變成全域性樣式，會汙染其他元件的外觀效果
 **/
h1{
  color: red;
}
button {
  border-radius: 5px;
  border: 1px solid #ccc;
}
</style>

接下來，就可以把Home頁面匯入到App.vue，讓使用者可以直接訪問。App.vue，程式碼：

<template>
  <div id="app">
    <Home></Home>
  </div>
</template>

<script>
// import 變數名 from '包路徑'
// import {變數名1, 變數名2,...} from '包路徑'
import Home from "./views/Home";
export default {
  name: 'App',  // 元件名，
  components: { // 子元件
    Home,
  }
}
</script>

<style>

</style>

效果：

從上面可以看到，雖然我們現在使用了單檔案元件，但是之前我們在指令碼化階段學習過的所有語法，在這裡都是通用的。