vue小白，请问这个.vue文件中，template标签和导入的样式是如何起作用的？

Question

这个文件在一个用vue-cli生成的项目的组件文件夹下。
template标签没有任何的标识符，比如id，我想请教vue是怎么知道要引用这个template标签里的模板呢？

<template>
  <div class="main">
    <div class="logo">
      <h1>
        <img src="../../static/image/u9.jpg" alt="xxxx" class="logo-bd">
      </h1>
    </div>
    <div class="slogan">
      <img src="../../static/image/u27.png" alt="xxxx">
    </div>
    <p class="version">Ver 1. 0. 20180102.1</p>
  </div>
</template>

<script>
  import {mapState} from 'vuex';
  import {Methods} from '../const/common';

  export default {
    name: "start",
    computed: {
      ...mapState(['moduleState'])
    },
    mounted() {
      setTimeout(function () {
        this.moduleState.start = false
      }.bind(this), 2000);
    },
    beforeCreate() {
      Methods.getStoryList.call(this);
    }
  }
</script>
<style scoped>
  @import "../style/css/start.css";
</style>

Answer 1

.vue文件经过vue-loader的解析

template标签内的内容会经过vue-loader解析成vue的渲染函数（也就是js）然后再给babel然后在后面一堆

script 里面的东西-> vue-loader -> babel —> 其他

style -> vue-loader -> 对应CSS处理器->其他

然后再输出到JS 或者 CSS 最后引入到html

Answer 2

template我的理解它就是一个片段标志，它不参与编译，vue把一整个页面分成几个片段，这几个片段各自编译渲染完之后凑在一起就是我们想要的页面，scoped也是为了防止样式之间相互污染。css就和以前一样正常引入用的。

附上官网template的解释地址
https://cn.vuejs.org/v2/api/#...

Answer 3

楼上正解 .vue文件通过vue-loader进行处理