vue-cli2スキャフォールディングプロジェクトは、elementUIをオンデマンドで導入します

最初に、著者自身がelementuiをオンデマンドで導入することの利点について説明します。グローバルな導入は100万を超え、オンデマンドの導入後は40万未満です。著者がオンデマンドで導入する際に使用するコンポーネントには、ページング、日付が含まれます。セレクター、ツリーセレクター、および入力。

最初の一歩：

     プロジェクトディレクトリexecutenpm install babel-plugin-component --D

ステップ2：.babelrcを変更する

ほとんどの初心者はbabelの設定方法を知らないため、ここでVueスキャフォールディングプロジェクトがelementuiのコアをオンデマンドで導入します。

公式ウェブサイトで提供されている構成ファイルを直接コピーして貼り付けると、スキャフォールディングのデフォルト構成が上書きされているため、間違いなくエラーが報告されます。正しい方法は統合することです。babelrcは次のように変更する必要があります。

{
  "presets": [
    ["env", { "modules": false }],
    ["es2015", { "modules": false }],
    "stage-2"
  ],
  "plugins": [["component", [
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
  ]],"transform-runtime"],
  "comments": false,
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": [ "istanbul" ]
    }
  }
}

elementuiバージョンが1.Xの場合、styleLibraryNameの値をtheme-defaultに変更する必要があります

ステップ3：オンデマンドでコンポーネントを導入する

たとえば、オンデマンドでボタンを導入したい場合、

  'vue'からVueをインポートする 

  './App'からアプリをインポートします 

  './router'からルーターをインポートします

  import'element-ui / lib / theme-chalk / index.css ' 

'element-ui'から{ボタン}をインポートします

   Vue.use（ボタン）

  投稿の作者によって紹介された例：

 

ステップ4.エラー処理

如果报错モジュールのビルドに失敗しました：エラー：ディレクトリに関連するプリセット「es2015」が見つかりませんでした

 次に、npm install babel-preset-es2015--save-devを実行します

报错これらの依存関係は見つかりませんでした：deepmerge、resize-observer-polyfill、throttle-debounce / debounce

则npminstall--save deepmergesize-observer-polyfillスロットル-デバウンス/デバウンス

オンラインの例：これは、参考のために作者が書いたelementuiのvue-cliオンデマンド紹介の例です。

GitHub-bill-mark / elementui-demand：vue2.Xとelementui2.Xを一緒に使用すると、オンデマンドで導入されます。