ヴィテ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 のルートパスワードを変更する方法
目次概要問題の説明循環リンクリスト順序付き配列数学的再帰要約する概要ジョセフ・リング問題は、ジョセフ...
この記事は主に、docker デプロイメント springboot プロジェクトのサンプル分析を紹介...
目次day.js を使用する理由モーメントデイ.js day.js がなければどうなるでしょうか? ...
取引の実施REDO ログはトランザクションの永続性を保証し、UNDO ログはトランザクションのロール...
最近、センタリングの問題に数多く遭遇したので、後で簡単に見つけられるように、時間をかけてそれらを要約...
HTML5の<input="text" placeholder="...
目次序文インデックス プッシュダウンとは何ですか?インデックスプッシュダウン最適化の原理インデックス...
1. はじめにpt-query-digest は、MySQL のスロー クエリを分析するためのツール...
mysqlrootパスワードの設定と変更初めて MySQL データベースに入ります。 !環境変数にm...
####システム内の入出力の管理#### 1. システムの入力と出力のリダイレクトを理解する入力リダ...
この記事では、macOSでのMySQL 8.0.16のインストールと設定のチュートリアルを参考までに...
CSS3 を学ぶということは、新しい機能と基本的な理論に慣れることを意味します。この記事では、ケー...
この記事の例では、ショッピングカート機能を実装するためのjQueryの具体的なコードを参考までに共有...
目次1. 基本を理解する2. システム環境を確認する3. ftpコマンドをインストールする[オプショ...
ミックスインは、コンポーネントに分散された再利用可能な機能を柔軟な方法で提供します。 Mixin オ...