Vue中 components和template 關係 單文件組件 原

有兩種格式文件  .js和.vue文件（單文件組件）

一般寫法是這樣子的   

main.js   

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<div>11111<app></app></div>'
})

這樣子寫css代碼肯定不合理的，所以採用單文件組件 這個在vue高級教程中，最下方纔有介紹。

.vue

<template>
  <div id="zujian">
    組件1
    <HelloWorld></HelloWorld>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>