VUEは、プロジェクトを作成する手順

＃グローバルインストールVUE-CLI

$ NPM --global VUE-CLIをインストール

＃WebPACKのテンプレートに基づいて新しいプロジェクトを作成します。

$ VUEのinit WebPACKの私のプロジェクト

＃あなたが行く、依存関係をインストールします。

$の CD私のプロジェクト

$のNPMインストール

$ NPMの実行DEV

自動的に設定を変更する設定でブラウザを開きindex.js

インストールのルーティング

ダウンロード npm i vue-router -S

コンフィギュレーション・ファイルrouter.jsを作成します。

1  // リードパケット
2 VueRouter 'VUE-ルータ'からインポート
 3  // 対応するルーティングコンポーネントを読み込む
。4ホーム'./components/home.vue'からインポート
 。5  // ルートオブジェクトを作成するが、
図6  のvarルータ= 新しい新しいVueRouter（{
 7    ルート：[
 8      // ルールをルーティング構成
9。      {パス： '/'、リダイレクト'/ホーム' }、
 10      {パス： '/ホーム' 、コンポーネント：ホーム}
 。11    ]
 12である }）
 13は 
14  // ルートオブジェクトさらさ
15エクスポートデフォルトルータ

main.jsファイル構成

1つのヴュー'VUE'からインポート
 2アプリ'./App'からインポート
 。3  
。4  / * 1.1インポートルートパケット* / 
5インポートVueRouter 'VUE-ルータ'から
 6  / * 1.2ルーティングをインストール* / 
7  Vue.use（VueRouter ）
 8  
9  / * 1.3は、独自のルータをインポートします。モジュールルーティングJS * / 
10ルータ」./router.js'からインポート
 。11  
12は、 
13である * / eslint-NO-無効新しい新しい* / 
14  新しい新しいヴュー（{
 15    EL '#app' 、
 16の   コンポーネント：アプリケーション{}、
 17    テンプレート： '<アプリケーション/>' 、
18    / * 1.4ルーティング・オブジェクト・インスタンスVMにマウント/ * 
。19    、ルータ
 20です）}

ルータ・ビューの表示内容のラベルによって参照App.vueファイルで

// 内容含量 
    <遷移> 
      <ルータビュー> </ルータビュー> 
    </遷移>

ルータ-linkタグを介してジャンプします

 <= "/ホーム" へのルータ・リンククラス= "MUI-タブ項目">

<ルータ・リンククラス"/ホーム" =へ= "MUI-タブ項目"> 
        <スパンクラス= "MUI-アイコンMUI-アイコン-ホーム"> </ span>の
        <スパンクラス= "MUI-タブラベル" >首页</ span>を
</ルータリンク>

VUEは、プロジェクトを作成する手順

おすすめ