Vueの研究ノート - ディレクトリ構造

足場を構築し、基本的なプロジェクトのディレクトリ構造を使用して1

　　

 　　そこ少し異なることが、一般的に類似したベースディレクトリですあり

2.プロジェクト入り口（index.htmlを、main.js、App.vue）

　　通常の状況下で、我々は、デフォルトのindex.htmlとしてアクセスアドレスに慣れている、index.htmlをここで私たちのエントリのページです。ここでは、いくつかのファイルを変更します

　　index.htmlを

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

　　App.vue

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

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

< スタイル> 
＃アプリ-DIV { 
  フォントファミリ：'アベニール'はHelvetica、Arialの、サンセリフ; 
  -webkit-フォントスムージング：アンチエイリアス。
  -moz-OSX-フォントスムージング：グレースケール。
  テキスト整列：センター; 
  色：＃2c3e50 。
  マージントップ：60PX ; 
} 
</ スタイル>

　　その後、我々は、ブラウザのデバッグは、より多くの私たちが訪れることを証明しているの<divのid =「テスト」>以前よりもタグは、その後、index.htmlの理由の背後にあるの<divのid =「アプリ」>となりましたよりもいることがわかります<DIV ID = "アプリテスト">それを

　　ここでmain.jsが役割を果たしてきている、main.jsは、コードのこの部分を持っています

　　

　　EL：Vueの要素のマウントにその上に作成されるオブジェクトとして理解することができる
　　componetsを：コンポーネントリソース
　　テンプレート：最もをぶら下げた後に本明細書で理解されるように、すべてのHTMLコード内App.vueは、<テンプレート>タグのためのキットであります我々はにテンプレートパラメータにVUE場合、外側ラベルは、名前で、「<AppDiv>」あなたが見ることができます

　　

 　　まとめると：我々は単に始まりとして理解することができるので、VUEのオブジェクト（インポートApp.vue）を作成するための責任main.jsは、その後、<のdivのid =「アプリ」> </ divの中のindex.htmlにVUEオブジェクトを実装します>コンテナ