首先看看vuedemo的入口函式main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue' // 引入vue
import App from './App' // 引入src目錄下的App.vue
// import router from './router' 為了方便觀察，先把這個路由去掉

Vue.config.productionTip = false // 來關閉生產模式下給出的提示

/* eslint-disable no-new */
new Vue({
  el: '#app', // index.html中的id=app的div
  // router,
  template: '<App/>', // 這裡是把'./App'的內容加到這個模板中
  components: { App } // 這裡的App等於App: App ，名稱要和模板名稱一樣，上面的template中寫的App,這裡也要是App
})
 

在main_header.vue中我們就寫必須要的程式碼。

<template>
	<div>vue的元件化開發</div>
</template>

<script>
	export default {
	  name: 'main_header'
	}
</script>

<style>
</style>
 

看看效果

在寫程式碼的時候要注意 ES6的語法  由於是用ESLint檢查程式碼的，所以也要了解一下