Vue3.0プロジェクトの構築と利用プロセス

Vue3.0プロジェクトの構築と利用プロセス

最近、古いプロジェクトをリファクタリングしていたのですが、リーダーから新しいテクノロジー スタックを使用するように言われました。さて、新しい vue3.0 を披露する時が来ました。

では、早速私のショーを始めましょう。 。 。 (以下はあくまでも私の個人的な理解と使用習慣であり、参考程度にご利用ください)

1. プロジェクト構築

1. vite を自分で設定することもできますが、時間を節約するために、scaffolding を使用して直接ビルドします。 (興味があれば、Vite を勉強してみてください。とても香りがよいです)

2. プロジェクト生成: iTermで: vue create myproject

要件に応じてさまざまな構成を選択します

必要な3.xを選択してください

次に、pack.json に従ってルーターを必要に応じて構成します。 。 。 次にnpm run serveを実行します

わかりました。基本的な 3.0 プロジェクトが構築され、終了しました。 (それは無理だ)

2: ディレクトリ構造

元のディレクトリ構造は次のとおりです。

データ管理を容易にするために、他のいくつかのファイルをカスタマイズする必要があります。以下は簡単なデモ構造です。

フックは、いくつかの共通コンポーネントのメソッドを定義するために使用され、複数のコンポーネントで再利用したり、vuex と組み合わせて使用​​したりできます。

型指定は、使用する必要があるいくつかの ts タイプを定義します。例えば:

異なるタイプは異なるコンポーネントに従って分割され、インデックスに均一にエクスポートされます。いくつかの一般的なタイプはインデックスで定義できます。

request はいくつかの http リクエストを定義します。

base.ts 基本パス

api.ts コレクション API

http.ts は axios リクエストをインターセプトし、環境を構成できます。 (開発、製品)

全体の構成は大体こんな感じで、API と TS の種類を一元化して、その後の管理をしやすくしています。

コンポーネントも分割する必要があります。

これはAboutページです。 .vue ファイルと、その中にフックが含まれるフォルダーに分割されます。 .vue ファイルは基本的なデモ構造です。フック内のさまざまな機能に応じて、さまざまなファイルがさまざまなファイルに分割されます。たとえば、listDownHooks.ts ファイルは、ドロップダウン メニューを表示するために使用されるメソッド コレクションです。スタイルファイルを別々に分割することもできます(ちょっと面倒だと思ったのでやりませんが…)

これがディレクトリ構造です。まず、typing で基本的なデータ型を定義し、次にそれを各コンポーネントの下の Hooks のメソッドに導入し、.vue ファイルで対応するメソッドを使用します。

3: コンポジションAPI

Composition API は、コンポーネント ロジックの柔軟な構成を可能にする追加の関数ベースの API のセットです。一緒に食べたら美味しいですよ〜〜〜

1. コンポーネントを定義する

Composition Api から分解され、ts で使用されます。 コンポーネントを定義します。

デフォルトのdefineComponent({})をエクスポートします。

ts を使用しない場合は、export default {} を使用することもできます。

2. セットアップ

Composition Api のコア部分は Vue3.0 のハイライトです。 beforeCreate および created ライフサイクルを置き換えます。

セットアップでいくつかのレスポンシブ データを初期化できます。

setup(props, ctx) は、props と ctx (コンテキスト) の 2 つのパラメーターを受け入れます。

Props は従来の親子データです。セットアップ時に props を分解することは推奨されません。これにより props が応答しなくなります。

ctx はスロット、アトリビュート、エミットに分解でき、使用方法は 2.0 と同様です。

3. 参照と反応

レスポンシブ データを作成するために使用される方法。 vue から分解 => import {ref, reactive} from 'vue';

ref の使用法:

'vue' から {ref, defineComponent} をインポートします。
エクスポートデフォルトdefineComponent({
 設定() {
  定数数値 = ref(0);
  console.log(数値); 
  戻る {
   番号
  }
 }
})

ref を通じてレスポンシブなデータを作成し、コンソールで確認します。

これはrefレスポンスデータです。操作時にはnumber.valueを使用してデータを操作し、結果を返します。

基本型と参照型の ref 宣言の違いは何ですか?

refは基本型を宣言し、refのレスポンシブオブジェクトを作成します。

ref は参照型を宣言し、ref オブジェクトも作成しますが、内部部分はリアクティブ メソッドでラップされたレスポンシブ オブジェクトです。

refオブジェクトがリアクティブで変更された場合、キーと値のメソッドを介して直接取得できます。

反応的な使用:

'vue' から {reactive、defineComponent、toRefs} をインポートします。
エクスポートデフォルトdefineComponent({
 設定() {
  定数obj = リアクティブ({   
    メニューリスト: [] を配列<T>として
   });
  console.log(数値); 
  戻る {
    ...toRefs(obj);
  }
 }
})

プロキシ応答データを作成します。 toRefs を通じてデータを返します。内部はこんな感じです。

個人的には、いくつかの基本的な型は ref を使用してさらに定義でき、全体的な定義には reactive を使用できると思います。

他の:

computed、watch など、他のよく使用されるメソッドも、実際には使用方法が 2.0 と似ています。ここでは詳しく説明しません。

4: 基本的な使い方:

基本的なニュースリストを例に挙げてみましょう。

主なことは、マウントフェーズ中にデータを取得し、ページをめくるときにデータを更新することです。

目次:

src -> views -> News -> Hook -> newsListHook.ts (リストデータの処理に使用)

ファイル内の生データを定義します。

dataSource = リアクティブ({
 list: [] as Array<InewsList> // InewsList はデータ型です});

インターフェース データを取得するための getList メソッドを含む newsList() メソッドを定義します。ページング要求が行われるとメソッドがトリガーされ、getList がマウントされます。次に、データとメソッドを返します。コードは次のとおりです。

/** * 1. リクエストデータを一覧表示する */ import api from '../../../request/api';
'vue' から {reactive, onMounted} をインポートします。
'../../../typing' から {InewsList} をインポートします。
エクスポート関数newsList(): オブジェクト{ 
 dataSource を reactive({list: [] を Array<InewsList>} として定義します);
 関数 getList(obj: オブジェクト): void {
  api.newsList(obj).then(res => {
   データソースのリスト = res.data.data; })
 };
 関数onChange(e: any): void {
  開始 = e || 10 とします。
  定数obj = {開始、数値: 10};
  リストを取得します(obj);
 }; 
 マウント時(() => {
  const startObj = {開始: 1, 数値: 10};
  getList(開始オブジェクト);
 }); 
 戻る {
  データソース、
  取得リスト、
  変更時
}}

次に、src -> views -> News -> News.vue ファイルでそれを使用します。

'./Hook/newslistHook' から {newsList} をインポートします。
エクスポートデフォルトdefineComponent({ 
  名前: 'ニュース',
  設定() { 
  const リスト = newsList();
  戻る {
   ...list // リストには定義されたすべてのデータとメソッドが含まれます。
  } 
}})

コンソールリスト:

この方法では、vue ファイル内で直接レンダリングして使用することができます。

要約すると、使用する必要があるメソッドとイベント (クリック、マウスダウン、キーアップなど) はフック内で実行でき、データのレンダリングには vue ファイルが使用されます。

プロジェクトでは antd の Vue フレームワークを使用します。使用時には必要に応じてロードするのが最適です。結局、antd は大きすぎます。

'ant-design-vue/es/menu/index' からメニューをインポートします。
'ant-design-vue/es/select/index' から選択をインポートします。
createApp(アプリ).use(ストア).use(ルーター).use(メニュー).use(選択)

はい、以上です。初心者が vue3.0 を書こうとしています。欠点があれば指摘してください。

以上がvue3.0プロジェクトの構築と使用プロセスの詳細です。vue3.0プロジェクトの構築と使用の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vueプロジェクト環境構築の詳細な概要
  • Vue.jsシリーズプロジェクト構築(1)
  • webpack で Vue プロジェクトを構築する手順
  • VSCodeでVueプロジェクトを構築する方法
  • Vue モバイル プロジェクトをゼロから構築して起動する手順
  • Vue.js プロジェクト テンプレート構築グラフィック チュートリアル
  • Vue3.0 プロジェクト構築概要(詳細手順)
  • Vueプロジェクトをゼロから構築するためのステップバイステップのガイド

<<:  Linux で boost.python を使用して C++ 動的ライブラリを呼び出す方法

>>:  InnoDB がシリアル化分離レベルを実装する方法

推薦する

テーブルセルの幅tdの設定は無効であり、内部コンテンツによって常に引き伸ばされます

テーブルページを作成するときに、td に設定された幅が無効になることがあります。td の幅は常に内部...

Springboot プロジェクトに動的にパラメータを渡すための Docker の実装方法

背景最近、Docker 初心者の友人から、毎回プロジェクト構成ファイルにハードコーディングしてサービ...

画像のシームレスなスクロールを実現する JavaScript タイマー

この記事では、画像のシームレスなスクロールを実現するためのJavaScriptの具体的なコードを参考...

Element UI で自動サイズ調整テキストエリアの高さを設定する方法

Element UIのtextarea input自動サイズに設定すると、テキストボックスのデフォル...

MySQLサービスを削除する具体的な方法

MySQLは次のエラーを表示します「コントロール パネル -> 管理ツール -> サービ...

CSS3 フィルターを使用して PNG 画像の色を変更するサンプル コード

この方法は、CSS3のdrop-shadow filterを使用して、png画像の不透明部分に任意の...

ウェブサイトのデザイン体験のための7つの異なるカラースキーム

ウェブサイト構築におけるカラーマッチングは非常に特殊であり、ウェブサイトのテーマ、感情、雰囲気などの...

モバイルデバイスで 1 ピクセルの境界線の問題を解決するいくつかの方法 (5 つの方法)

この記事では、モバイルデバイス上の 1 ピクセルの境界線の問題を解決する 5 つの方法を紹介します。...

VMware WorkStation 14 pro インストール Ubuntu 17.04 チュートリアル

この記事では、VMware Workstation14 ProにUBuntu17.04をインストール...

JavaScript配列をツリー構造に変換する方法

1. 需要バックエンドは、フロントエンドがツリー構造(重複データなし)に変換するためのデータを提供し...

Vue エクスポート Excel 機能の全プロセス記録

目次1. フロントエンドのリーディングプロセス: 2. プラグインの使用と初期化2.1 vue-ad...

Vueデータ監視の原理の詳細な説明

<本文> <div id="ルート"> <h1&...

Vue-cliはプロジェクトを作成し、プロジェクト構造を分析します

目次1. ディレクトリを入力してプロジェクトを作成する2. 必要な設定項目を選択します2.1 Vue...

FTP、FTPS、SFTPの違いについて簡単に説明します

目次FTP、FTPS、SFTP の概要FTP FTPS FTPサーバーFTPソフトウェアのアクティブ...

きれいなJavaScriptコードの書き方を教える記事

目次1. 変数意味のある名前を使う不必要なコンテキストを追加しないようにするハードコードされた値を避...