2020年9月18日にvue.js 3.0が正式にリリースされました。インターネットで3.0に関するチュートリアルを見てみたところ、十分に充実していないことがわかりました。しかし、実は最新バージョンのvuecliはすでにvue3.0プロジェクトの迅速な構築をサポートしています。この記事では、vue3.0にどのような新しい変更があるのか、そしてvue3.0プロジェクトを素早く構築する方法を紹介します。 1. プロジェクトの構築1. まず、nodejs のインストールについてはあまり説明する必要はありません。こちらが nodejs の公式 Web サイトのアドレスです。 vue --version または vue -V
vue-cli をすでにインストールしているユーザーは、次のコマンドを実行します。 npm アップデート -g @vue/cli vue-cli がインストールされていません。次のコマンドを実行してください: npm インストール -g @vue/cli ここでも、公式 Web サイトにアクセスしてドキュメントを読むことをお勧めします。公式 Web サイトには、インストール、更新、バージョン チェックに関する非常に詳細な情報が掲載されています。 vuecli の最新バージョンをインストールした後、次のコマンドを実行します。 vue create hello-world (これはあなた自身のプロジェクト名です) 次のオプションが表示されます: (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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Win10 MySQLでCSVをエクスポートする2つの方法
>>: Tomcat で複数の war パッケージを展開する方法と手順
序文データベースの応用において、プログラマーは継続的な実践を通じて多くの経験を積んできました。これら...
目次前提条件テストページの設定書き換えルールの作成命名規則モードの定義アクションの定義設定ファイル内...
どちらの方法も、一定時間後に JavaScript コードを実行するために使用できますが、それぞれに...
概要: MySQL は、トランザクションをサポートするためにさまざまなストレージ エンジンを提供しま...
1. Linuxシステムにクロスシステムファイル転送ツールをインストールするルートユーザーのルートデ...
BFCコンセプト:ブロック フォーマット コンテキストは、BFC 内の要素を外部の要素から分離する独...
目次序文1. 一度限りの計画タスクの紹介2. コマンド3. 1回限りのスケジュールタスクを作成する4...
画像アクセラレータ中国の Docker Hub からイメージをプルすることが難しい場合があります。こ...
解決策は次のとおりです。 1. コンテナを強制削除する docker rm -f ジェンキンス2. ...
Navicat は、データベースに接続するときにエラー 10060 および 1045 を報告します...
最近のウェブサイトでは SSL を有効にするのが標準となっています。ただし、SSL を設定した後も、...
仮想マシンをインストールするときに、「VMware ワークステーションはデバイス/資格情報ガードと互...
HTML で下線を引くには、以前はテキストを <u></u> タグで囲む必要...
目次1: カプセル化の考え方2. 包装工程3: ドットインジケーター4: 左と右のインジケーター5:...
この記事では、プラグインを使用して画像の比例カットを実現するVueの具体的なコードを参考までに共有し...