HelloWorldプロジェクトベースVUE-CLIを構築

HelloWorldプロジェクトベースVUE-CLIを構築

 

これは、最初のプロジェクトのindex.htmlページで、名前を変更しないでください。

 

このSRC入り口main.jsは、プロジェクトプロファイルで、名前が変更されません

QQ西魏20190712152542.jpg

 

今、私たちは、SRCの下のファイルを削除し、新しいのHelloWorldを書きます。

 

私たちは、新しいコンポーネントApp.vueを作成します

1.JPG

そこ検証エラー、我々はeslint検証をオフにします

QQ西魏20190712161537.jpg

 

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

 

新しいビュー({

  「#アプリ」

  成分:{

    アプリ

  }、

  テンプレート: '<アプリケーション/>'

})

 

実行します。

QQ西魏20190712202820.jpg

 

 

QQ西魏20190712205902.jpg

 

我々はeslint仕様を理解し、より厳しい、コンソールコンパイラエラー、eslintコードを調べたでしょう、実際にそれを行うことができ、効率に影響を与えます。

だから、それがオフになっています。

QQ西魏20190712205849.jpg

 

webpack.base.conf.jsは、一枚のメモを円に設定ファイルを見つけることができます。または直接インストールすることはできませんeslilng、プロジェクトを初期化します。

おすすめ

転載: www.cnblogs.com/2019gdiceboy/p/11418367.html