VUEは、グローバルコンポーネントおよびサブアセンブリを登録しました

グローバル・コンポーネント

ステップ1：コンポーネントフォルダにサブフォルダを作成しUsers.vue    

<テンプレート> 
  の<div クラス = " ユーザー" > 
    {{MSG}}
   </ DIV> 
</テンプレート> 

<スクリプト> 
輸出デフォルト{ 
  名：' ユーザー' 、
  データ（）{ 
    リターン{ 
      MSG：' 用户名' 
    } 
  } 
}
 </ SCRIPT> 

<！ -追加は、" スコープ"にCSSを制限する属性、この唯一のコンポーネント- > 
<スタイルはスコープ> 
 
</スタイル>

 

ステップ2：main.jsに登録グローバルに実行

// ヴューで`コマンドimport`と負荷にビルドバージョンで
 // （ランタイムのみまたはスタンドアロン）は、SET AN別名を持つwebpack.base.confになっている。 
輸入のVue から 「VUE 」
のインポートのApp から 「./App 」
ルータのインポートから 「./router 」

最初のステップは、フォルダのユーザーの名前です。//グローバルコンポーネント
のインポートユーザーの./components/Users'から

Vue.config.productionTipは = falseを

//グローバルの登録ユーザーは、第二部の構成要素である
ヴュー.component（ 'ユーザー'、ユーザ）


/ * eslint-NO-無効新新* / 
新しい新しいヴュー（{ 
  EL：「#app' 
  ルータ、
  コンポーネント：{アプリケーション}、
  テンプレート：' <APP /> ' 
}）

第三のステップ：対応で参照ファイル

<テンプレート> 
  <DIV ID = " アプリケーション" > 
    <！ - <ルータービュー/>子ノードビューがある- > 
    <！ - <-Viewルーター/> - > 
    <P> {{}}タイトル< / P>    <ユーザー> </ユーザー> 
  </ div> 
</テンプレート> 
<スクリプト> 
エクスポートデフォルト{ 
  名：' アプリケーション' 、
  データ（）{ リターン{ 
      タイトル：" ユーザーは、グローバルコンポーネントの名前の例です" 
    } 
  } 
} </ SCRIPT> 
<スタイル> 
</スタイル>
 

    

地方議会    

では新しいサブアセンブリ部品Users.vueファイルフォルダ、その後、対応するファイル内で参照

<テンプレート> 
  <DIV ID = " アプリケーション" > 
    <！ - <ルータービュー/>子ノードビューがある- > 
    <！ - <-Viewルーター/> - > 
    <P> {{}}タイトル< / P> <ユーザー> </ユーザー> 
  </ div> 
</テンプレート> 
<スクリプト> / *ローカル登録コンポーネント* / 
ユーザーの./components/Users'からのインポート
エクスポートのデフォルト{ 
  名：' アプリケーション' 、
  データ（） { 戻り{ 
      タイトル：「ユーザーは、グローバルコンポーネントの名前の一例である」
    } 
  }、コンポーネント：{ 
    ユーザー、
  } 
} </ SCRIPT> 
<スタイル>
   


    
 



</スタイル>