鍍金池/ 問答/HTML/ 源碼方式引用element-ui，頁(yè)面上的組件代碼是如何被識(shí)別并替換為HTML的

源碼方式引用element-ui，頁(yè)面上的組件代碼是如何被識(shí)別并替換為HTML的？

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" >
</head>
<body>
  <div id="app">
    <el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
      <p>Try Element</p>
    </el-dialog>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      }
    })
  </script>
</html>

新手，剛開始技術(shù)預(yù)演vue相關(guān)技術(shù)，看了下elementui，以上是官方的一個(gè)直接引用js和css的例子（npm方式已經(jīng)了解，但是屏蔽了太多底層的原理），我有幾個(gè)疑問如下：
1、vue的組件一般都有template代碼，上述例子只引了element的js和css，那么template去哪里了？這個(gè)自己看了下js代碼，貌似有處理HTML css的代碼，猜想是在index.js里。
2、element是如何跟vue打通的？按照之前組件或者插件的做法，至少得有注冊(cè)（vue.component，vue.use）一類的代碼，上述例子就沒有，只是引用了index.css和index.js，竟然是可以解析<el-button的。

回答
編輯回答
過客

1.vue的組件分為幾種方式: DOM模板、字符串模板、單文件組件等，上面例子，已經(jīng)通過new Vue(...)實(shí)例化vue，vue的原理解析compile<el-button></el-button>，抽象為AST（抽象語(yǔ)法樹）,最終需要得到 render function來(lái)渲染出來(lái)。
原理這塊，你可以參考下別人詳細(xì)的源碼解析。Vue源碼學(xué)習(xí)

2.element中的index.js是打包編譯好的文件，其實(shí)內(nèi)部是通過Vue.use全局注冊(cè)了ElementUI

2018年4月14日 16:03
編輯回答
溫衫

自己去嘗試看看源碼先，然后多看幾遍自然就明白了

2018年5月11日 07:54