1 <テンプレート> 2 の<div：クラス= "タイプ== 'デフォルト' 'デフォルトBTN'：？タイプ== '主' 'BTN主'：？？タイプ== '危険' '危険BTN'： 'BTNのデフォルト「 "> 3 <スロット> </スロット> 4 </ div> 5 </テンプレート> 6 7 <スクリプト> 8エクスポートデフォルト{ 9 名："路地・ボタン」、 10の 小道具：{ 11 タイプ：{ 12 タイプ：文字列、 13 デフォルト：「デフォルト」 14 } 15 } 16 } 17 </ SCRIPT> 18 19 20 <スタイル> 21 .btn { 22 幅：100pxに。 23 高さ：40ピクセル; 24 色：#FFF。 25 テキストベース整列：センター; 26 ライン- 高さ：40ピクセル; 27 } 28 。デフォルト{ 29 30 背景：赤。 31 32 } 33 34 .primary { 35 36 背景：黄色。 37 } 38 39 .danger { 40 41 背景：#CCC; 42 } 43 </スタイル>
レジスタファイル内の新しい建築要素の名前のファイルボタンでファイルを作成するには、2 / index.js。
1つの「./index.vue」からインポート]ボタン。 2 3 Button.install =（ヴュ）=> { 4 Vue.component（Button.name、ボタン） 5 } 6 7エクスポートデフォルトボタン。
3 /と、ファイルindex.jsピアファイルボタンを確立するコンポーネントを登録するだけでなく、レジスタにインストールし、エクスポートは、唯一のローカルまたはグローバル参照を容易にするため、グローバルでなく、単一のリードにつながります。
。1つの "./button"ボタンからインポート 2 。3 。4 CONSTコンポーネント= [ 5 ボタン 6 ] 。7 。8 。9 // VUE。使用時には、インストールの方法を持っている必要があります。パラメータはVUEです。10 CONSTインストール=（ヴュ）=> { 。11 用（VARのキーでコンポーネント）{ 12は Vue.component（成分[キー] .nameの、成分[キー]） 13である } 14 } 15 16 17 エクスポート既定 { 18は 、インストール 19 のボタン 20を }
main.jsで参照する4 /
1 'VUE'からインポートヴュー 2 インポートアプリ'./App.vue'から 3 "./components"からインポートAlleyUI 4 Vue.config.productionTip = 偽 5 Vue.use（AlleyUI）。 6 7 新しいヴュー（{ 8 レンダリング：H => H（APP）、 9 }）$マウント（ '＃アプリ'）。
5 /ここでは、パッケージアセンブリが完了し、App.vueで使用することができます。
1 <テンプレート> 2 <DIV ID = "アプリケーション"> 3 <路地、ボタン>按钮</路地-ボタン> 4 <路地ボタン式= "プライマリ">按钮</路地-ボタン> 5 <路地、ボタン>按钮</路地-ボタン> 6 <路地、ボタン>按钮</路地-ボタン> 7 </ DIV> 8 </テンプレート> 9 10 <スクリプト> 11 12 エクスポートデフォルト{ 13 名： 'アプリ' 、 14 15 } 16 </ SCRIPT> 17 18 <スタイル> 19 20 </スタイル>
6 /実行結果
