VUEプロジェクト実行中のプロセス

実行中のプロセスのVUE

index.htmlを - > main.js - > App.vue - >ルータ/ index.js

1.index.html（プロジェクトエントリページ）

<！DOCTYPE HTML > 
< HTML > 
< ヘッド> 
< メタのcharset = "UTF-8" > 
< メタ名= "ビューポート" コンテンツ= "幅=デバイス幅、初期スケール= 1.0" > 
< タイトル> VUEテスト</ タイトル> 
</ ヘッド> 
< 身体> 
< div要素のid = "アプリ" > 
< ルータビュー> </ ルータビュー> 
<

</ HTML >

 

2.main.js（コア・ファイル）

'VUE'からインポートヴュー
'./App'からインポートアプリ
'./router'からインポートルータ

Vue.config.productionTip = FALSE 

新しいヴュー（{ 
'#app'：EL 
ルータ、
コンポーネント：{アプリケーション}、
テンプレート。 ' < アプリケーション/> ' 
}）

 

3.App.vue（プロジェクトエントリファイル）

<テンプレート> 
の<divのid = "アプリ"> 
<IMG SRC = "./資産/ logo.png"> 
<ルータビュー/> 
</ div> 
</テンプレート> 

<スクリプト> 
輸出デフォルト{ 
名： 'アプリケーション' 
}
 </ SCRIPT> 

<スタイル> 
#app { 
フォント -family 'アベニール'、ヘルベチカ、のArial、sans- セリフ。
-webkit-font- スムージング：アンチエイリアス。
-moz-OSX-font- スムージング：グレースケール。
テキスト - 揃える：センター; 
色：＃2c3e50。
マージン - トップ：60PX; 
}
 </スタイル>

 

4.router - index.js（ルーティング成分）

'VUE'からの輸入のVue 
からインポートルータ「VUE-ルータの
からの輸入のHelloWorld '@ /コンポーネント/ HelloWorldの' 

Vue.use（ルータ）

のエクスポートデフォルト 新しいルータ（{ 
路線：[ 
{ 
パス： '/' 、
名前：「HelloWorldの' 、
成分：HelloWorldの
} 
] 
}）

 

VUE-ルータ

VUEのVUE-ルータはコアプラグ、使用VUE-ルータで、我々は、アセンブリへのルートをマップすることができ、それらがレンダリングされる場所VUE-ルータに伝えます