鍍金池/ 問答/Java  HTML/ vue小白,請(qǐng)問這個(gè).vue文件中,template標(biāo)簽和導(dǎo)入的樣式是如何起作用

vue小白,請(qǐng)問這個(gè).vue文件中,template標(biāo)簽和導(dǎo)入的樣式是如何起作用的?

這個(gè)文件在一個(gè)用vue-cli生成的項(xiàng)目的組件文件夾下。
template標(biāo)簽沒有任何的標(biāo)識(shí)符,比如id,我想請(qǐng)教vue是怎么知道要引用這個(gè)template標(biāo)簽里的模板呢?

<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>
回答
編輯回答
舊時(shí)光

.vue文件經(jīng)過vue-loader的解析

template標(biāo)簽內(nèi)的內(nèi)容會(huì)經(jīng)過vue-loader解析成vue的渲染函數(shù)(也就是js)然后再給babel然后在后面一堆

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

style -> vue-loader -> 對(duì)應(yīng)CSS處理器->其他

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

2017年7月25日 03:23
編輯回答
雨蝶

template我的理解它就是一個(gè)片段標(biāo)志,它不參與編譯,vue把一整個(gè)頁(yè)面分成幾個(gè)片段,這幾個(gè)片段各自編譯渲染完之后湊在一起就是我們想要的頁(yè)面,scoped也是為了防止樣式之間相互污染。css就和以前一樣正常引入用的。

附上官網(wǎng)template的解釋地址
https://cn.vuejs.org/v2/api/#...

2018年4月4日 13:34
編輯回答
厭惡我

樓上正解 .vue文件通過vue-loader進(jìn)行處理

2018年6月10日 15:53