HelloWorldプロジェクトベースVUE-CLIを構築
これは、最初のプロジェクトのindex.htmlページで、名前を変更しないでください。
このSRC入り口main.jsは、プロジェクトプロファイルで、名前が変更されません
今、私たちは、SRCの下のファイルを削除し、新しいのHelloWorldを書きます。
私たちは、新しいコンポーネントApp.vueを作成します
そこ検証エラー、我々はeslint検証をオフにします
3つの大きな片、<テンプレート>テンプレートのコードブロックに分割VUEファイルは、<SCRIPT> JSコードブロックは、<スタイル>スタイルコードブロックです。
私たちは、その後、コンポーネントディレクトリに、新しいサブアセンブリを作成します。HelloWorld.vue
<テンプレート>
<div>
<Pクラス= "情報"> {{先}} </ P>
</ div>
</テンプレート>
<スクリプト>
輸出のデフォルト{
名前:「HelloWorldの」
データ(){//この関数はアセンブリで記述されなければなりません
{戻ります
情報:「Vueの叔父こんにちは!"
}
}
}
</ SCRIPT>
<スタイルは、スコープ>
.info {
赤色;
フォントサイズ:20ピクセル;
}
</スタイル>
その後App.vue、我々は、サブアセンブリのHelloWorldを導入しました
<テンプレート>
<div>
<IMG SRC = "./資産/ logo.jpg" 高さ= "74" 幅= "216" />
<! - コンポーネントの使用 - >
<こんにちは世界> </ハローワールド>
</ div>
</テンプレート>
<スクリプト>
「./components/HelloWorld」//導入手段からの輸入のHelloWorld
輸出のデフォルト{
名前:「アプリケーション」、
成分:{
HelloWorldの:HelloWorldの//マッピングコンポーネントラベル
}
}
</ SCRIPT>
<スタイルは、スコープ>
</スタイル>
最後に、我々main.js入り口の設定ファイルは、Vueのインスタンスを作成します。
/ *
入場JS:Vueのインスタンスを作成します
* /
「表示」からインポートビュー
「./App」からの輸入のApp
新しいビュー({
「#アプリ」
成分:{
アプリ
}、
テンプレート: '<アプリケーション/>'
})
実行します。
我々はeslint仕様を理解し、より厳しい、コンソールコンパイラエラー、eslintコードを調べたでしょう、実際にそれを行うことができ、効率に影響を与えます。
だから、それがオフになっています。
webpack.base.conf.jsは、一枚のメモを円に設定ファイルを見つけることができます。または直接インストールすることはできませんeslilng、プロジェクトを初期化します。