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 パッケージを展開する方法と手順

推薦する

iPhone デバイスの WAP ページでフォントサイズが大きい問題の解決策

JavaScriptコントロールを使用したくない場合は、次の方法を試してください。 Safariブラ...

JavaScriptタイマーとボタン効果設定の詳細な説明

タイマー効果: <div> <font id='timeCount'...

VMware WorkStation を Docker for Windows で使用するための詳細なチュートリアル

目次1. はじめに2. Windows用Dockerをインストールする1. Windows用Dock...

VMware、nmap、burpsuite インストール チュートリアル

目次VMware バープスイート1. 仮想マシンイメージとVMwareのインストールと使用2. 仮想...

CSS を使用して半透明の背景と不透明なテキストを実現する例

この記事では、CSS を使用して半透明の背景と不透明なテキストの効果を実現する方法の例を紹介します。...

CentOS 7.x dockerはoverlay2ストレージ方式を使用する

/etc/docker/daemon.json を編集し、以下を追加します。 { "ストレ...

JS がビデオ弾幕効果を実現

これを実現するには、ES6 モジュール開発とオブザーバー モードを使用します。オブザーバー パターン...

ウェブデザインスキル:中国語と英語が混在するウェブページの上位表示の問題

<br />私はこの問題で気が狂いそうです。症状は次のとおりです。 症状の説明: Int...

ウェブページを作るときに知っておくべきいくつかのスキル

1. IE6 では z-index が無効です。 CSS では、階層を変更するために z-index...

MySQLのスリープ関数の特殊現象例の詳しい説明

序文MySQL のスリープ システム機能は、実用的な適用シナリオが少なく、通常は実験的なテストに使用...

CSSは複数の要素をボックスの両端に揃える効果を実現します

要素の両端を揃える配置レイアウトは、実際の開発のいたるところで見られます。これは、フレックスレイアウ...

マージンのマージの問題を解決する

1. 兄弟要素の余白を結合する効果は次のようになります: (2 つの間の間隔は 150 ピクセルでは...

IE8は優れたエクスペリエンスを提供します: アクティビティ

今日は IE8 ベータ 1 (以下、IE8 と略します) をチラ見しました。IE8 は素晴らしい体験...

Webフロントエンド開発経験の概要

XMLファイルは、可能な限りutf-8でエンコードする必要があります。gb2312には、?など、保存...

単一マシン上での Tomcat の複数インスタンスの実装

1. はじめにまず、1 台のマシンで複数のインスタンスを使用する理由という質問に答える必要があります...