ヴィテYou Daは、Vue 3.0ベータ版のライブブロードキャストでviteツールを推奨し、次の点を強調しました。Vueシングルページコンポーネント用のパッケージ化されていない開発サーバーで、要求されたvueファイルをブラウザで直接実行できます。 非常に斬新で、このブログではvue3プロジェクトの構築に使用しています Vite は、ネイティブ モジュール システム ESModule に基づいてオンデマンド コンパイルを実装する、最新のブラウザー向けの Web 開発および構築ツールです。生産環境におけるロールアップベースのパッケージング
ノード >= 10.16.0 建てるviteを使用してプロジェクトを構築する npm init vite-app <プロジェクト名> typescript、vue-router@next、axios、eslint-plugin-vue、sassなどの関連プラグインをインストールします。 構成vite.config.tsvite.config.ts は @vue-cli プロジェクトの vue.config.js と同等です。 私はこれを単純に設定します: 'path' からパスをインポートする モジュール.エクスポート = { エイリアス: { '/@/': path.resolve(__dirname, './src') }, 最適化依存関係: { 含める: ['lodash'] }, プロキシ: {} } ルーターsrcの下に新しいルーターフォルダを作成し、そのフォルダにindex.tsを作成します。 'vue-router' から {createRouter、createWebHistory} をインポートします。 定数ルート = [ { パス: '/'、 名前: 'ホーム'、 コンポーネント: () => import('/@/views/Home.vue') }, { パス: '/lifeCycle', 名前: 'ライフサイクル', コンポーネント: () => import('/@/views/LifeCycle.vue') } ] エクスポートデフォルトcreateRouter({ 履歴: createWebHistory('/krry/'), ルート }) tsタイププロジェクトのルートディレクトリに新しいtsconfig.jsonを作成し、関連する設定を記述します。 { "コンパイラオプション": { ...// その他の構成「パス」: { "/@/*": [ "ソース/*" ] }, "ライブラリ": [ 「esnext」、 「ドム」、 "dom.iterable", 「スクリプトホスト」 ] }, "含む": [ "src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "src/types/images.d.ts", "テスト/**/*.ts", 「テスト/**/*.tsx」 ]、 「除外」: [ 「ノードモジュール」 ] } srcディレクトリに新しいtypesフォルダを作成し、tsタイプを設定する必要があります。 シムズvue.d.ts モジュール '*.vue' を宣言します {} 画像.d.ts モジュール '*.svg' を宣言します モジュール '*.png' を宣言します モジュール '*.jpg' を宣言します モジュール '*.jpeg' を宣言します モジュール '*.gif' を宣言します モジュール '*.bmp' を宣言します モジュール '*.tiff' を宣言します メイン.ts 'vue' から {createApp} をインポートします。 '/@/router' からルーターをインポートします '/@/App.vue' からアプリをインポートします const app = createApp(App) app.use(ルーター) app.mount('#app') そうすれば楽しくコードを書ける vue3 の知識設定Vue3 では、すべての API がセットアップ関数に統合されています。セットアップ関数はライフサイクル関数の前に 1 回だけ実行されるため、セットアップ関数では現在のインスタンスを取得できず、これを使用して Vue2 の書き込みメソッドで定義されたメソッドを呼び出すことはできません。 2つのパラメータを受け入れます: props、context // props - コンポーネントが受け取るプロパティ context - コンテキスト setup(props, context) { 戻る { //バインドするデータとメソッド} } 小道具セットアップ関数内のプロパティはレスポンシブであり、新しいプロパティが渡されると更新されます。ただし、プロパティはレスポンシブであるため、ES6 の分解はプロパティのレスポンシブ性を排除するため使用できません。 プロパティを分解する必要がある場合は、セットアップ関数でtoRefsを使用することで安全に行うことができます。 'vue' から { toRefs } をインポートします セットアップ(プロパティ) { const { title } = toRefs(props) console.log(タイトル.値) } コンテクストコンテキストは3つのコンポーネントプロパティを公開します: { attrs、slots、emit } ライフサイクルコンポーネントのライフサイクルフックにアクセスするには、先頭に「on」を付けます。 セットアップは beforeCreate および created ライフサイクル フックの周囲で実行されるため、これらを明示的に定義する必要はありません。つまり、これら 2 つのフックで記述するコードは、セットアップ関数内に直接記述する必要があります。 設定() { マウント時(() => { console.log('コンポーネントがマウントされました') }) マウント解除時(() => { console.log('コンポーネントのアンインストール') }) 更新時(() => { console.log('コンポーネントの更新') }) 更新前に(() => { console.log('コンポーネントが更新されます') }) アクティブ化(() => { console.log('keepAlive コンポーネントがアクティブ化されました') }) onDeactivated(() => { console.log('keepAliveコンポーネントがアクティブ化されていません') }) 戻る {} } 参照、反応的ref は、単純な値に限定されたレスポンシブ データに共通の値をラップできます。内部的には、値はオブジェクトにラップされ、defineProperty によって処理されます。値を取得および設定するときは、.value を使用して設定する必要があります。this.$refs と記述する代わりに、ref を使用してコンポーネントの参照を取得できます。 reactive は複雑なデータをレスポンシブに処理します。戻り値はプロキシ オブジェクトです。setup 関数で返されるプロキシ オブジェクトは、テンプレートで簡単に使用できるように toRefs を使用して構造化できます。 次のように使用します。 <テンプレート> <div> <div> <ul v-for="eleList 内の ele" :key="ele.id"> <li>{{ 要素名 }}</li> </ul> <button @click="addEle">追加</button> </div> <div> <ul v-for="todoList 内の要素" :key="ele.id"> <li>{{ 要素名 }}</li> </ul> <button @click="addTodo">追加</button> </div> </div> </テンプレート> <スクリプト> 'vue' から { ref, reactive, toRefs } をインポートします。 エクスポートデフォルト{ 設定() { // 参照 定数eleList = ref([]) 関数addEle() { len = eleList.value.lengthとします eleList.value.push({ id:len, 名前: 'ref increment' + len }) } // リアクティブ const dataObj = リアクティブ({ やることリスト: [] }) 関数addTodo() { len = dataObj.todoList.lengthとします dataObj.todoList.push({ id:len, 名前: 'リアクティブ増分' + 長さ }) } 戻る { 要素リスト、 追加エレ、 追加ToDo、 ...toRefs(データオブジェクト) } } } </スクリプト> 計算、監視// 計算された 合計を計算します(() => dataObj.todoList.length + eleList.value.length) console.log('セットアップ参照は計算された値:' + sum.value) //時計 時計( 要素リスト、 (現在の値、古い値) => { console.log('リスナー:', curVal, oldVal) }, { 深い: 本当 } ) ウォッチエフェクト関数内で参照される応答データを応答的に追跡し、応答データが変更されたときに関数を再実行します。 定数カウント = ref(0) // count の値が変更されると、コールバックが実行されます const stop = watchEffect(() => console.log(count.value)) // リスニングを停止する stop() 監視を停止することもできます。watchEffectは監視を停止するために実行できる関数を返します。 vue2 と同じ: const unwatch = this.$watch('say', curVal => {}) // リスニングを停止する unwatch() ルートの使用、ルーターの使用'vue-router' から {useRoute, useRouter} をインポートします。 const route = useRoute() // vue2 の this.$route と同等 const router = useRouter() // vue2 の this.$router と同等 ルートは現在のルートデータを取得するために使用されます ヴュークスuseStore を使用して vuex からストア オブジェクトを取得する場合は、ページ内で応答する前に vuex の状態を変更できるように、computed を使用してラップする必要があります。 'vuex' から {useStore} をインポートします。 設定(){ const store = useStore() // vue2 の this.$store と同等 store.dispatch() // ストアオブジェクトを通じて非同期タスクをディスパッチする store.commit() // ストアデータの変更をコミットする let category = computed(() => store.state.home.currentCagegory { カテゴリ } を返す } これで、vite+ts による vue3 プロジェクトの迅速な構築と関連機能の紹介に関するこの記事は終了です。vite+ts による vue3 の構築に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Ubuntu 18.04にPython仮想環境をインストールする
>>: MAC で Mysql5.7.10 のルートパスワードを変更する方法
目次1. ダウンロード2. インストール3. my.ini ファイルを設定する(デフォルトのエンコー...
目次MySQL クライアント/サーバー プロトコルMySQL サーバーから高いパフォーマンスを得る必...
Docker を使用して MySQL イメージをプルしようとして 30 分経っても失敗したため、代わ...
この記事では、jQuery Canvasの描画画像検証コードの具体的なコードを例として紹介します。具...
コードをコピーコードは次のとおりです。 <div class="content&qu...
1. インストールパッケージの準備VMware-player-15.0.4-12990004、非商...
結果:実装コードhtml <nav class="dropdownmenu"...
noscript の定義と使用法noscript 要素は、スクリプトが実行されない場合の代替コンテン...
毎日jQueryプラグインを学ぶ - フローティングメニュー、参考までに、具体的な内容は次のとおりで...
MySQL 自体はファイルシステムに基づいて開発されましたが、ロックの存在が異なります。データベース...
プロジェクト内のページの長さはおよそ2000px以上あり、背景画像にはテクスチャやグラデーションがあ...
スロットとは何ですか? Vue では、子コンポーネント タグの中央に何もラップできないことはわかって...
この記事の例では、ライトスイッチ効果を実現するためのjsの具体的なコードを参考までに共有しています。...
目次1. ディレクティブカスタムディレクティブ2. ミックスイン3. 継承を拡張する4. 提供して注...
目次1. はじめに2. プロトタイプチェーン継承3. コンストラクタの継承4. 組み合わせ継承1. ...