web-dev-qa-db-ja.com

アラカルトコンポーネントとは何ですか？使用すべきですか？

Vue-cliを使用して新しいプロジェクトを開始するとき、セットアップをカスタマイズするためにいくつかの質問をします。一般的に、プロジェクト名、説明、リンティングにエスリントを使用するかどうか、テストにカルマとモカを使用するかどうかなど。今回は私に尋ねました

? Use a-la-carte components?

Vue-cli docsで検索しましたが、何も見つかりませんでした。だから誰もが「アラカルトコンポーネント」とは何か、それを使用すべきかどうかを教えてもらえますか？

webpackvuejs2vuetify.jsvue-cli-3
21
Ragas

Àla carte は、「メニューに従って」を意味する英語のローンフレーズです。 「定食の一部ではなく、個別の品目として注文できる食品」を指します。

したがって、アラカルトコンポーネントを使用する場合、すべてを取得するのではなく、使用する（必要な）コンポーネントのみを含めることを意味します。

例の検証：

Vuetifyを使用すると、必要なものだけを簡単にインポートできるため、設置面積を大幅に削減できます。

import {
 Vuetify,
 VApp,
 VNavigationDrawer,
 VFooter,
 VList,
 VBtn
} from 'vuetify'

Vue.use(Vuetify, {
 components: {
   VApp,
   VNavigationDrawer,
   VFooter,
   VList,
   VBtn
 }
})

2018/11/14を編集：

vuetify 1.3. なので、
vuetify-loader （vuetify CLIインストールに含まれています）
アプリケーションのアラカルトニーズを自動的に処理します。つまり、使用するすべてのVuetifyコンポーネントを自動的にインポートします。

25
Traxo

まず第一に、それは実際には vuetifyプラグイン オプションであるため、ドキュメントでそのオプションを見つけられませんでした。 「アラカルト」コンポーネントが有効になっている場合、ファイル/plugins/vuetify.jsには以下が含まれている必要があります。

import Vue from 'vue'
import {
 Vuetify,
 VApp,
 //other vuetify components
} from 'vuetify'

Vue.use(Vuetify, {
 components: {
   VApp,
   //other vuetify components
 }
})

そして、「transform-imports」プラグインを使用した完全なvuetifyインポートを防ぐために、babel.config.jsファイルを変更する必要があります。

第二に、vuetify v1.3.0-alpha.0までは、Webパックベンダーバンドルを最小限に抑えるには「アラカルト」が便利でしたが、特に開発中にvuetifyコンポーネントを選択的にインポートするのは非常に面倒です。さらに、Webpackは「アラカルトコンポーネント」の導入以来、大きく進化しています。

これらの理由から、vuetify 1.3.0-alpha.0の時点で、開発チームはWebpack 4 tree shake features（aka dead）を使用して、アラカルトコンポーネントの必要性を完全に排除する方法に取り組んでいますコードの削除） vuetify-loader これらの機能は、自動「アラカルトコンポーネント」を取得するために、vuetify公式プラグインに追加される予定です。

したがって、2番目の質問（a-la-carteを使用する必要がある場合）に対処するための答えは、noであり、もはやではありません。この機能を使用するために、vue-cli 3プロジェクトを自分でセットアップする方法は次のとおりです。

  • Dev依存関係としてvuetify-loaderをインストールします：npm install -D vuetify-loader
  • Vuetify.jsファイルの'vuetify/lib'の代わりに'vuetify'からvuetifyをインポートします。

コード：

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)
  • vue.config.jsファイルにvuetify-loaderをwebpackプラグインとして登録します（存在しない場合は、プロジェクトのルートにファイルを作成します）。

コード：

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')

module.exports = {
   configureWebpack: {
     plugins: [
        new VuetifyLoaderPlugin(),
    ]
   }
 // ...other vue-cli plugin options...
}

  • すでにa-la-carteを使用している場合は、必ずbabelプラグインのリストから「transform-imports」を削除してください（通常はbabel.config.jsにあります）

  • ツリーの揺れは実動モードでのみ動作するように設定されているため、--watchまたは--mode developmentフラグをnpm run buildコマンドで使用している場合、バンドルサイズは減る

私はそれが役立つことを願っています

7
Landry BETE