目次
まず第一に、私はあまり強力なボスではないことを断言したいと思います. Vuetify のフロントエンド初心者や、ドキュメントが長すぎると感じている人に、いくつかの簡単な提案を提供したいと思います。始め方がわからないので、少し回り道をせずに済みます。これがこの記事の目的です。実は使い方だけは知ってます あまり深く勉強してないです こんな複雑な企画を書いたので 守備を頼りに言っていると思ったら 口を上げてください 右上だけですコーナー、どうもありがとうございました!
この記事では、Vuetify の使用に関する私の洞察と認識の一部を共有します. 公式ドキュメントからのスクリーンショットがありますが、コピーして貼り付けることを意味するものではありません. 私は自分の意見を持っているので、友達は安心してください.
公式ドキュメントへのリンクは次のとおりです: Vue2 の Vuetify ドキュメント 、Vue3 の Vuetify ドキュメント
この記事では、Vue2 ドキュメントを使用して説明します ( v2 ドキュメントと v3 ドキュメントは、それぞれ Vue2 の Vuetify ドキュメントと Vue3 の vuetify ドキュメントを参照するために使用されます)。v2 ドキュメントには完全な中国語ドキュメントが含まれており、非常にわかりやすいです。 Vuetify のバージョン、および Vue3 は問題ありません。
この記事のリリース日現在、 v3 ドキュメントには中国語のドキュメントはなく、すべて英語であり、v3 ドキュメントはまだ更新中です。 v2ドキュメントにあった v3版には書き直されていません.例えばv2版にはスケルトンの画面部品がありますが、これは現在v3ドキュメントにはありません.vue3+Vue3版のvuetifyを使う前にプロジェクトを書きました.当時はこれが頭を悩ませていたので、このスケルトン画面しか使えません。ですから、あなたへのアドバイスは: もし今すぐ使いたいのなら、Vue2 の Vuetify を使うのが一番です. 結局のところ、そのすべてのコンポーネントは完全であり、中国語のドキュメントがあります.
最高の vue コンポーネント ライブラリと言われるのはなぜですか? 公式声明によると、次のとおりです。
以下は、さまざまな主流フレームワークの比較です。
Vuetifyは更新サイクルが早く、ドキュメントの長期サポートが充実していることが分かりますが、その中でも個人的に一番すごいと思ったのはTreeshaking(つまりツリーシェイク、ツリーシェイクとも言います)機能です。聞いたことがないかもしれません. Treeshaking の機能は、インポートしたもののプロジェクトがパッケージ化されたときに使用されていないコンポーネントやその他のものを自動的に削除することであると、この概念の友人は説明しています. これは、プロジェクト パッケージのサイズを制御します。
さて、序文はこれで終わりです。それから、トピックを開始できます。
Vuetify をインストールする
次のコマンドを使用して vuetify プロジェクトを作成できます。プロジェクト構造は、プロジェクトの配置に自動的に役立ちます。
vue create my-appすでにプロジェクトがあり、vuetify を導入したい場合は、次のように実行できます。
vue add vuetifyドキュメント構造
ドキュメントの構造は主に上の図に示すとおりです. UI コンポーネント、API、および手順について心配する必要はありません. まず、赤いボックス内の 3 つの部分に注目しましょう. まず、クイック スタートを見てみましょう:
クイックスタート
実際、本当に読む必要があるのは「インストール」セクションだけかもしれません。残りは負担なく参照できます。これに続いて、「機能」セクションが続きます。
特性
わかりました, あなたが見なければならないことがたくさんあることがわかりますよね? 心配しないで, それらを一つずつ見ていきましょう:
| バリアフリー | これは障害者のための包括的な慣行であるため、障害者グループも使用できますが、一般的に言えば、プロジェクトではこれを使用すべきではないため、基本的に無視できます。 |
| 双方向 | つまり、左から右 (LTR) の言語レイアウトと右から左 (RTL) の言語レイアウトをサポートする Web サイトを作成できますが、一般的に言えば、Web サイトは左から右に配置されるため、この部分は基本的に無視します。 |
| レスポンシブ ディスプレイ | この部分はあなたのウェブサイトのレスポンシブ レイアウトを設定することです. コンポーネントは画面のサイズに応じて自動的にレイアウトを調整することができます. あなたがしなければならないのは、特定のブレークポイントに対応するスタイルを設定することだけです. 最初に、ブレークポイント テーブルが提供されます: には 、一連のデフォルト サイズがリストされており、直接使用できます。使用方法については後述します。同時に、必要なブレークポイントをカスタマイズすることもできます。詳細については、ドキュメントを参照してください。 |
| グローバル構成 | 当分の間、グローバル構成を使用して何も設定していませんが、公式 Web サイトには構成項目があまり多くなく、下の図の内容のみが示されています。
|
| アイコンのフォント | ここで使用するアイコン ライブラリを設定できます。設定方法についてはドキュメントを参照してください。私の個人的な提案: これらのアイコン ライブラリを使用することはお勧めしません. 会社にアイコンのデザインまたは検索を任せて、自分で使用することができます. なぜですか? アイコン ライブラリを使用することの欠点は、使用できないアイコンが多数あるため、パッケージ サイズが一定の長さに増加することですが、アイコンの 1 つを使用する限り、アイコン ファイル全体がそれは穴です、私が見つけたアイコンにはこれらの問題はありません。 |
| 国際多言語対応 | 皆さんも使ったことがあると思いますが、いろいろな言語を切り替えるのに使われているのがi18nです詳しくはドキュメントを参照してください |
| レイアウト | Vuetify には、使用できるプリセット レイアウトがいくつか用意されていますが、一般的に言えば、設計図面がプリセット レイアウトと一致しないため、それらを使用しません。 実際には、後で説明する v-app コンポーネントと v-main コンポーネントの 2 つのレイアウト コンポーネントしかないので、心配する必要はありません。 |
| プリセット | ここで必要な昼と夜のテーマを変更できます。また、カスタム カラー、アイコン ライブラリ、ブレークポイントなども個別にリストされていません。詳細については、ドキュメントを参照してください。 |
| SASS 変数 | これはいくつかのグローバルなデフォルト スタイルであり、それらをオーバーライドでき、ドキュメントから簡単に理解できます。sass を知らない場合は、最初に sass を学習することをお勧めします. 推定学習時間は約 30 分です. リンクはこちら: sass Chinese documentation |
| プログラムロール | つまり、vuetify が提供する API を使用して、スクロール バーのスクロールをプログラムで制御できます (つまり、vuetify が提供する機能を介してスクロールを制御します)。 |
| テーマ | ここでは、さまざまなテーマのいくつかのスタイルの表示を制御できます。たとえば、ダーク モードとライト モードのスタイルを設定できます。 |
| ツリーシェイク | Vuetify は必要なコンポーネントをオンデマンドでインポートし、最終的にパッケージのサイズを小さくします. この機能はデフォルトで有効になっており、自動的にツリーをシェイクします. |
スタイリングとアニメーション
最初にここに書いてください。次回は更新を続ける時間があります。. .