VUE - 1を学習の開発ブログ - コードワールド

1、インストールVUE-CLI

　　ビュー-gビュー-CLIをintall

2.プロジェクトを作成します。

　　VUEのinit WebPACKのnblog

3、記載促さ設定項目

？プロジェクトnblog名前
？プロジェクトbolg開発を学ぶの説明
？著者nxzJIA < 987 097 855 @ qq.com>
？Vueがスタンドアロンで構築しますか
？VUE-ルータをインストールしますか？はい
？あなたのコードをlintのESLintを使用しますか？はい
？標準プリセットESLintを選びますか
？セットアップユニットテストはありませんか
？ナイトウォッチでセットアップE2Eテスト？ノー
？`NPM我々は実行する必要がありますインストールし ` のためにプロジェクトが作成された後あなたは？（推奨）NPM

   VUE -cli・生成された" nblog "。

以下に示すように、図4に示すように、一度、導入webstormプロジェクトで、作成しました

5、プロジェクトを開始、プロジェクトのデフォルトのホーム・ページ

図6は、開発を容易にするために、iviewui使用します

追加する必要がMain.js：

「iViewの」からの輸入のiView

Vue.use（iViewの）

7、リノベーションプロジェクト

（ルートにレンダリングされる他のすべてのコンテンツをルーティングする、トップレベルのルーティング）home.vueをルーティング独自のホームページを作成します。

SRC /コンポーネントにhome.vue作成

home.vueレイアウト：メニューとしてディスプレイの上側（移動しない固定側）、（コンテンツ表示領域）での使用のiViewレイアウトレイアウトタブ、低級（TBD）

8、最も単純な形式を使用してトップメニュールーティングは、身体の一部が適切なコンテンツを気にされますされて手をクリックしてください

「表示」からインポートビュー
「VUE-ルータ」からインポートルータ
「@ /コンポーネント/ホーム」からインポートホーム
「@ /コンポーネント/インデックス」からインポートするインデックス
インポートから作成「@ /コンポーネント/作成」
「@ /コンポーネント/編集」からインポート編集
「@ /コンポーネント/ポスト・クラス」からインポートPostClass
「@ /コンポーネント/について-私」からの輸入AboutMe

Vue.use（ルーター）

輸出デフォルト新しいルータ（{
  モード：「歴史」、
  ルート：[
    {
      パス： '/'、
      名前：「ホーム」、
      コンポーネント：ホーム、
      子供：[
        {
          パス：「/インデックス」
          名前：「インデックス」、
          エイリアス：'/'、
          コンポーネント：インデックス
        }、
        {
          パス： '作成/'、
          名前：「作成」、
          コンポーネント：作成
        }、
        {
          パス：「/編集」
          名前：「編集」、
          コンポーネント：編集
        }、
        {
          パス： '/ postClass'
          名前：「PostClass」
          コンポーネント：PostClass
        }、
        {
          パス： '/ aboutMe'
          名前：「AboutMe」
          コンポーネント：AboutMe
        }、
      ]
    }、


  ]
}）

home.vue

< テンプレート> 
  < DIV クラス= "レイアウト" > 
    < レイアウト> 
      < ヘッダ：スタイル= "{位置： '固定'、幅： '100％'}" > 
        < メニューモード= "水平" テーマ= "暗い" アクティブ-名前= "1" > 
          < divのクラス= "レイアウト-ロゴ" > 
            < IMG SRC = "静的/ IMG / logo.png" ALT = "" > 
          </ divの> 
          <div クラス= "レイアウト-NAV" > 
            < MenuItemに名前= "1" に= "インデックス" > 
              < アイコンの種類は= "IOS-ナビゲート" > </ アイコン>
              家
            </ MenuItemに> 
            < のMenuItem 名= "2" に= "postClass" > 
              < アイコンの種類= "IOS-キーパッド" > </ アイコン>
              カテゴリ
            </ MenuItemに> 
            < のMenuItem 名= "3" に= "作成" > 
              < アイコンの種類= "IOS-分析" > </ アイコン>
              新しいです
            </ MenuItemに> 
            < のMenuItem 名= "4" への"編集" = > 
              < アイコンの種類= "IOS-紙" > </ アイコン>
              修正
            </ MenuItemに> 
            < のMenuItem 名= "5" に= "aboutMe" > 
              < アイコンの種類= "IOS-紙" > </ アイコン>
              私について
            </ MenuItemに> 
          </ DIV > 
        </ メニュー> 
      </ ヘッダー>

      < コンテンツ：スタイル= "{マージン： '88px 20ピクセル0'、背景： '#FFF'、minHeightプロパティ： '500pxなど'}" > 
        < ルータビュー> </ ルータビュー> 
      </ コンテンツ> 
      < フッタークラス=」レイアウト・フッター・センター」> 2011-2016 ＆コピー; TalkingData </ フッタ> 
    </ レイアウト> 
  </ DIV > 
</ テンプレート>

< スクリプト> 
  輸出デフォルト{
    名前：「ホーム」
  }
</ スクリプト>

< スタイルは、スコープ>
  @import "../static/css/home.css"。

</ スタイル>

index.vue

< テンプレート> 
< DIV >
  指数
</ DIV > 
</ テンプレート>

< スクリプト> 
    輸出デフォルト{
        名前：「インデックス」
    }
</ スクリプト>

< スタイルは、スコープ>

</ スタイル>

（単純なレイアウトとして開始されると、後続のコンテンツを追加していく）。同様に、他の

このページの基本的な機能が追加されました

VUE - 1を学習の開発ブログ

おすすめ