抽出プロセススキームを使用VUE

最初のステップ：VUEは、IDをindex.jsに取り付けられているのでDOMアプリです

main.js：

「表示」からインポートビュー。

新しいビュー（{
  エル： "#app" 、
}）

index.htmlを

<！DOCTYPE HTML>
<HTMLのlang = "ZH-CN">

<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル>ドキュメント</ TITLE>
  <リンクのrel = "スタイルシート" のhref = "">
</ head>の

<身体>
  <DIV ID = "アプリ">

  </ div>
</ BODY>

</ HTML>

 （このファイルは、通常は変更されません）

ステップ2：コンパイラはtremplateは、DOMエルのすべてを置換する内容のルールを理解することです

「表示」からインポートビュー。

新しいビュー（{
  エル： "#app" 、
  テンプレート： `の<div>私はテンプレートだ、私は` </ div>あなたに置き換えられます、
}）

<！DOCTYPE HTML>
<HTMLのlang = "ZH-CN">

<ヘッド>
    <メタ文字セット= "UTF-8">
    <タイトル>ドキュメント</ TITLE>
    <リンクのrel = "スタイルシート" のhref =」「>
</ head>の

<身体>
    <DIV ID = "アプリ"> </ div>
    <スクリプトSRC = "./ DIST / bundle.js"> </ SCRIPT>
</ BODY>

</ HTML>

第三段階：成分外部の調製サブアセンブリVueの例を登録に使用されるテンプレート

「表示」からインポートビュー。

constのアプリケーション = {
  テンプレート： `の<div> <H1> {{メッセージ}} </ H1> </ div> `
  データ（）{
    リターン{
      メッセージ：「私はテンプレートだ、私はあなたを交換します」
    }
  }
}
新しいビュー（{
  エル： "#app" 、
  テンプレート： "<アプリケーション/>" 、
  成分：{
    アプリ
  }
}）