vue3.0+vant3.0の迅速なプロジェクト構築の実装

vue3.0+vant3.0の迅速なプロジェクト構築の実装

2020年9月18日にvue.js 3.0が正式にリリースされました。インターネットで3.0に関するチュートリアルを見てみたところ、十分に充実していないことがわかりました。しかし、実は最新バージョンのvuecliはすでにvue3.0プロジェクトの迅速な構築をサポートしています。この記事では、vue3.0にどのような新しい変更があるのか​​、そしてvue3.0プロジェクトを素早く構築する方法を紹介します。

1. プロジェクトの構築

1. まず、nodejs のインストールについてはあまり説明する必要はありません。こちらが nodejs の公式 Web サイトのアドレスです。
2. vuecli の最新バージョンでは 3.0 をすぐにビルドできますが、最新バージョンにアップグレードするにはどうすればよいでしょうか? vue-cli公式サイトのアドレス、vue-cliバージョンの実行コマンドが分からない

vue --version または vue -V 

私は4.5.7を使用しています

特別な注意:
ノードのバージョン要件
Vue CLI 4.x には Node.js v8.9 以上が必要です (v10 以上を推奨)。 n、nvm、または nvm-windows を使用して、同じコンピューター上で複数の Node バージョンを管理できます。

vue-cli をすでにインストールしているユーザーは、次のコマンドを実行します。

npm アップデート -g @vue/cli

vue-cli がインストールされていません。次のコマンドを実行してください:

npm インストール -g @vue/cli

ここでも、公式 Web サイトにアクセスしてドキュメントを読むことをお勧めします。公式 Web サイトには、インストール、更新、バージョン チェックに関する非常に詳細な情報が掲載されています。

vuecli の最新バージョンをインストールした後、次のコマンドを実行します。

vue create hello-world (これはあなた自身のプロジェクト名です)

次のオプションが表示されます: (2 番目の vue3-test は無視できます)

2番目のvue3-testは無視できます

ここでは、Vue 3プロジェクトのオプションがすでにあることがわかります。最後のオプション「手動で機能を選択」を選択します。

ここに画像の説明を挿入

最初のオプションは、vue のバージョンを選択することです。これを選択する必要があります。他のルート、vuex などは、必要に応じて選択できます。

ここに画像の説明を挿入

最初のオプションを選択すると、Vue のバージョンを選択するように求められます。ここでは 2 番目のオプションを選択します。

ここに画像の説明を挿入

ここでは、ルーティングが履歴モードを使用するかどうかを指定します。履歴モードを使用するには、バックエンドの協力が必要です。ここでは選択しません。

ここに画像の説明を挿入

このセクションでは、ニーズや好みに応じてCSS言語やその他の設定を選択します。

ここに画像の説明を挿入

ここに画像の説明を挿入

ここに画像の説明を挿入

必要に応じてプロジェクトを作成したら、cd project name を使用し、npm run serve! でプロジェクトを開始します。

2. Vue3 体験 + Vant 紹介

ヴァントの紹介:

まず、vantの公式サイトにアクセスしてください:vant公式サイトのアドレス。注意深いボスがバージョン番号に新しいバージョンがあることを発見したかどうかはわかりません。

ここに画像の説明を挿入

そうです、これはvue3用にカスタマイズされたvant3です。バージョンを3に切り替えて、ドキュメントを読んでください。

ここに画像の説明を挿入

オンデマンドで導入することを推奨します:

ここに画像の説明を挿入

設定後は、設定が有効にならないようにプロジェクトを再起動することをお勧めします。
ここにボタンがあります

ここに画像の説明を挿入

Vue 3.0 で Vue インスタンスを作成してマウントする例が main.js で更新されました。new Vue を使用する代わりに、createApp が使用されます。

'vue' から {createApp} をインポートします。
'./App.vue' からアプリをインポートします。
'./router' からルーターをインポートします
'./store' からストアをインポートします
import http from './utils/http'; //ここに私が独自にカプセル化したaxiosがあります
'vant' から Button をインポートします。

const アプリ = createApp
//vue3.0 では、以前のように vue のプロトタイプ オブジェクトにパブリック メソッド プロパティをマウントできなくなりました //ここでは、オブジェクトである 2 番目のパラメーターにパブリック メソッド プロパティを記述できます //コンポーネントの登録は .use チェーンを通じて呼び出されます app(App, { http }).use(Button).use(store).use(router).mount('#app')

以下に、最も便利だと思う例をいくつか示します。

<テンプレート>
  <div class="home">
    {{ num }}----{{activeNum}}----{{refData}}
    <!-- vant コンポーネントの使用法 -->
    <van-button size="large" type="primary" @click="changeNum">変更番号</van-button>

    <van-button type="success" @click="routerPush">ルートジャンプ</van-button>
  </div>
</テンプレート>

<スクリプト>
// オンデマンドで導入する必要があるモジュール import { toRefs, reactive, onMounted, getCurrentInstance,watch ,computed,ref} from "vue";
エクスポートデフォルト{
  名前: "ホーム",
  // vue2.0 と同じで、親コンポーネントから渡された値と main.js で渡された値を受け入れます props: ["http"],
  // セットアップで記述する必要があります setup(props, context) {
    //ここの ctx は vue2 のこれに似ています
    const { ctx } = getCurrentInstance();
    //ルーティング this.$router
    定数ルーター = ctx.$router;
    // main.js によって渡されたカプセル化された axios
    定数 http = ctx.http;
     // 毎回新しいレスポンシブデータをrefでラップするのは面倒なので、このように書くことはやはりお勧めしません。const refData = ref('1212') // refはレスポンシブオブジェクトにラップされます。// vue2のデータと同様に、このように書く方が快適だと思います。
    const state = reactive({//関数は通常のオブジェクトを受け取り、応答性の高いデータオブジェクトnum: 0, を返します。
    });
    // 計算プロパティをオブジェクト内に記述すると、計算プロパティのメソッドが混在して区別がつかなくなるのを防ぐことができるため、計算プロパティをオブジェクト内に記述するのが好きです。const computedData = {
      // 計算プロパティを書くときは、computed をインポートすることを忘れないでください
      activeNum: 計算された(()=>state.num*2)
    }
    // オブジェクト内にメソッドを書くのが好きです。その方が明確で、プロパティメソッドの計算が混在して区別がつかなくなるのを防ぐことができるからです。const methods = {
      変更番号: () => {
        状態.num++;
        // ref で囲まれたデータは .value refData.value++ を使用して取得する必要があります
      },
      ルータープッシュ() {
        //ルートジャンプ router.push({
          名前: "テスト",
        });
      },
      //ネットワークリクエスト async getUserInfo() {
        試す {
          {データ} = http.get("http://localhost:3000/xiaochengxu/"); を待機します。
          コンソールにログ出力します。
        } キャッチ(エラー){
          コンソール.log(エラー);
        }
      },
    };
    // vue2 のマウントと同じです。vue 3 では、boforcreate と created の 2 つのライフサイクルが削除されます。setup は、これら 2 つのライフサイクルの間にある新しいライフサイクルです。onMounted(() => {
      メソッド.getUserInfo();
    });
    //watchの使用watch(()=>state.num,value=>{
      console.log('数値が変更されました',値)
    })
    //使用するにはテンプレートに戻る必要があります return {
      ...toRefs(state), // レスポンシブ オブジェクトを通常のオブジェクトに変換します。state.num を使用する必要はありません。num を直接使用できます...methods, // 分解代入...computedData,
      参照データ
    };
  },
};
</スクリプト>

torefs、ref、isref、reactive などの使い方が分からない方は、詳しく紹介しているこちらの記事をお読みください。私はあくまでも自分が便利だと思う書き方をしています。

これで、vue3.0+vant3.0 クイックプロジェクト構築の実装に関するこの記事は終了です。より関連性の高い vue3.0+vant3.0 プロジェクト構築コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue3.0プロジェクトの構築と利用プロセス
  • 完全な Vue3.0+ts プロジェクトを構築する手順
  • Vue3.0 プロジェクト構築概要(詳細手順)
  • vue3.0プロジェクトアーキテクチャを段階的に構築する方法を教えます

<<:  Win10 MySQLでCSVをエクスポートする2つの方法

>>:  Tomcat で複数の war パッケージを展開する方法と手順

推薦する

MySQL の基本ステートメントを最適化するための 10 の原則の概要

序文データベースの応用において、プログラマーは継続的な実践を通じて多くの経験を積んできました。これら...

URL 書き換えモジュール 2.1 URL 書き換えモジュールのルール記述

目次前提条件テストページの設定書き換えルールの作成命名規則モードの定義アクションの定義設定ファイル内...

JavaScript の setTimeout と setTimeinterval の使用例の説明

どちらの方法も、一定時間後に JavaScript コードを実行するために使用できますが、それぞれに...

MySQLトランザクションを実行するための構文とプロセスの詳細な説明

概要: MySQL は、トランザクションをサポートするためにさまざまなストレージ エンジンを提供しま...

Linux システムで jmeter を実行し、ローカル メモリを最適化する方法の詳細な説明

1. Linuxシステムにクロスシステムファイル転送ツールをインストールするルートユーザーのルートデ...

BFCとは何ですか? CSS 疑似要素を使用してフロートをクリアする方法

BFCコンセプト:ブロック フォーマット コンテキストは、BFC 内の要素を外部の要素から分離する独...

Linux で 1 回限りのスケジュールされたタスクを実行するための at コマンドの使用に関する詳細な説明

目次序文1. 一度限りの計画タスクの紹介2. コマンド3. 1回限りのスケジュールタスクを作成する4...

Dockerイメージとコンテナの一般的な操作の詳細な説明

画像アクセラレータ中国の Docker Hub からイメージをプルすることが難しい場合があります。こ...

Dockerコンテナが停止できない問題の解決方法

解決策は次のとおりです。 1. コンテナを強制削除する docker rm -f ジェンキンス2. ...

NavicatがMySQLに接続すると、10060、1045エラーとmy.iniの場所が報告されます。

Navicat は、データベースに接続するときにエラー 10060 および 1045 を報告します...

ウェブサイトがhttpsを有効にした後のSSLのセキュリティ構成と検出

最近のウェブサイトでは SSL を有効にするのが標準となっています。ただし、SSL を設定した後も、...

VMware Workstationはデバイス/資格情報ガードと互換性がありません

仮想マシンをインストールするときに、「VMware ワークステーションはデバイス/資格情報ガードと互...

HTMLで下線を設定するには?HTMLでテキストに下線を付ける方法

HTML で下線を引くには、以前はテキストを <u></u> タグで囲む必要...

vue3.0 でカルーセル コンポーネントをカプセル化する手順

目次1: カプセル化の考え方2. 包装工程3: ドットインジケーター4: 左と右のインジケーター5:...

Vueはプラグインを使用して画像を比例してカットします

この記事では、プラグインを使用して画像の比例カットを実現するVueの具体的なコードを参考までに共有し...