VUEの要素-UIまたはミント-UIを導入

VUEの要素-UIまたはミント-UIを導入

インストール要素-UI

まず、インストール要素-UIは、プロジェクトパスでコマンドを実行します。
NPMインストール要素-UI -s

第二に、プロジェクトのインポート要素-UI

修正main.jsファイル
'要素-UI'からインポートElementUI 
インポート'要素-UI / libに/テーマチョーク/ index.css' 

Vue.use(ElementUI)

VUEでのインストールミント-UIプロジェクト

まず、ミントUIをインストールします。

NPM Iミント-UI --save

そして、ミントUIを導入する必要があり、2つのケースがあります。

1.すべてのコンポーネントの導入
このプロジェクトは、より多くのミントUIコンポーネントで使用される場合は、最も簡単な方法は、それらを導入し、すべてを置くことです。このとき、ファイルエントリは、main.jsをして必要があります。
「ミント-UI」からインポートミント。
Vue.use(ミント); 
インポート'ミント-UI / libに/ style.cssに';

需要の2.はじめに

あなたが唯一のコンポーネントの1しかこのコンポーネントを導入することができます使用する必要がある場合は、ミントUIコードがパッケージ化されたときに、このコンポーネントファイルとは何の関係が最終的なコードには表示されませんしないことを保証することです。main.jsで、導入する必要として組み立て、ボタン:

「ミント-UI / libに/ボタン」からインポート]ボタン。
インポート'ミント-UI / libに/ボタン/ style.cssに'; 
Vue.component(Button.name、ボタン)。

導入方法は、個別にCSSファイルを対応する上記2に導入します。これにより、複数のコンポーネントを導入する際に導入されたオンデマンド方式を使用している場合は特に、非常に便利です。

この問題を回避するには、バベル・プラグイン・コンポーネントのプラグインを使用することができます。

1.まず、インストール:

NPM Iバベル - プラグインコンポーネント-D

2.次ににおける.babelrcでそれを設定します。

{ 
  "プリセット":[ 
    [ "ENV"、{ 
      "モジュール":偽、
      "ターゲット":{ 
        "ブラウザ" [ "> 1%"、 "最後の2つのバージョン"、 "ではない、すなわち< = 8 "]
       } 
    } ]、
    "ステージ2" 
  ]、
  "プラグイン":[ "変換ランタイム"を、[ "コンポーネント"、[ 
          { "LIBRARYNAME": "ミント-UI"、 "スタイル":真} 
      ]]]、 
  "ENV" :{ 
    "テスト":{ 
      "プリセット" [ "ENV"、 "ステージ2"]、
      "プラグイン": "イスタンブール"] 
    } 
  } 
}

 

3.したがって、2基の導入方法は、以下のように簡略化することができます。

インポートミントから//「ミント-UI」; 
//Vue.use(Mint); 
//インポート「ミント-UI / libに/ style.cssに」; //手動ミント-UIスタイルのインポートする必要はありません
」ミントからのインポート]ボタンを-ui / LIB /ボタン'; 
Vue.component(Button.name、ボタン); 

SwipeItemからインポートスワイプ{}'ミント-UI「; //要求導入部アセンブリ
Vue.component(Swipe.name、スワイプ)。
Vue.component(SwipeItem.name、SwipeItem)。

プラグインは自動的に対応するCSSファイルの導入の前に設置されます!

出典ます。https://www.cnblogs.com/stella1024/p/7771334.html

おすすめ

転載: www.cnblogs.com/Strangers/p/11924702.html