App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</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>

这是用vue-cli搭建项目后的App.vue文件
template 里是模板代码，这里一般是一个闭合的html标签，比如一个div
style 里是css代码，这个代码是作用到整个页面的，如果只想作用到当前的模板中，需要用scoped属性

<style scoped>

如果想用一些css预处理器，比如sass，只需要声明lang，然后vue-loader就会自动的加载，当然，前提是对应的 sass-loader安装好。

<style lang="sass">

template不仅是模板最外面的标签，同时，它也可以作为一个普通的标签使用。比如，当我们需要用 v-if 来控制部分区域的显示与隐藏时，就可以这样。

<template>
    <template v-if="valid">
        <div></div>
   </template>
   <template v-else>
      <div></div>
   </template>
</template>

而且，template是不会被渲染的，所以不会影响最终的dom结构。

注意：v-show 不能和 template 一起使用

Vue组件export时会自动调用new Vue()吗?
name属性在组件递归的时候有用。export出来的是一个Vue实例