我们讲vue单文件组件，同时讲解main.js做了什么将多个组件文件组合成了完整的网页。

单文件组件

我是建议通过脚手架进行项目的搭建，然后我们找到vue.文件进行学习，vue.文件本身不是浏览器能够识别的文件，vue设计出来是为了更好的进行组件化开发，vue-cli内置的webpack模块在运行或构建时会按照一定配置将vue.文件预编译成js对象供其他js代码或文件调用。

vue.文件结构

我们找到vue项目中的HelloWorld.vue文件并打开:(初始化时选择的配置依赖插件不同HelloWorld.vue会有不同结构)

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

我们发现vue.单文件组件中主要由三个部分组成:template、script和style。

• template：我们编写组件的html结构。除了写h5代码以外我们还可以使用注册的子组件或全局组件，以及vue语法。整个代码部分将作为导出的vue组件对象的template属性值。

  我们需要注意，作为组件的模板，<template\>标签内必须只能有一个子标签，否则项目编译报错。

• script：我们编写当前vue组件对象导出和需要注册的子组件对象的导入。

  我们通常不会在外面写额外的js代码，因为项目中vue实例监听几乎大部分的dom变化，所有js代码都可以放入methods以及生命钩子函数等属性进行执行。lang="ts"是常用的属性，编译时会按照ts的loader进行解析编译成js代码。

• style：我们编写用于全局或则局部（当前html模板）的css样式代码。

  为了避免每个当前组件的css样式不影响其他组件模板样式，我们通常在<style>标签中添加scoped属性。本质上是用哈希值的做作用域区分，同时修改选择器名和class、id等属性。

    <!-- Add "scoped" attribute to limit CSS to this component only -->

讲解script部分

vue项目中的main.js

main.js通过一个父组件（App.vue）进行网页的创建。还可以加入Vuex和Router等一套vue生态模块。

//main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

前面部分，作为模块引入的四个文件，Vue是底层框架代码文件，App是其他组件的父（祖）组件文件（严格来说不是模块）。router和store是生态功能插件，后面补充讲解。

最后，new了一个真正的根组件实例（vue实例对象）将App组件的模板进行编译渲染，再通过$mount('#app')挂载到public文件夹里index.html中的id = "app"的节点上。