vue3 プロジェクトを素早く構築し、関連機能を紹介する vite+ts の詳細な説明

vue3 プロジェクトを素早く構築し、関連機能を紹介する vite+ts の詳細な説明

ヴィテ

You Daは、Vue 3.0ベータ版のライブブロードキャストでviteツールを推奨し、次の点を強調しました。Vueシングルページコンポーネント用のパッケージ化されていない開発サーバーで、要求されたvueファイルをブラウザで直接実行できます。

非常に斬新で、このブログではvue3プロジェクトの構築に使用しています

Vite は、ネイティブ モジュール システム ESModule に基づいてオンデマンド コンパイルを実装する、最新のブラウザー向けの Web 開発および構築ツールです。生産環境におけるロールアップベースのパッケージング

  • サーバーを素早くコールドスタートする
  • インスタントホットモジュール交換 (HMR)
  • 真のオンデマンドコンパイル

ノード >= 10.16.0

建てる

viteを使用してプロジェクトを構築する

npm init vite-app <プロジェクト名>

typescript、vue-router@next、axios、eslint-plugin-vue、sassなどの関連プラグインをインストールします。

構成

vite.config.ts

vite.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 }
これは通常の JavaScript オブジェクトであり、リアクティブではないため、コンテキストで ES6 の構造化分解を安全に使用できます。

ライフサイクル

コンポーネントのライフサイクルフックにアクセスするには、先頭に「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 をよろしくお願いいたします。

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

<<:  Ubuntu 18.04にPython仮想環境をインストールする

>>:  MAC で Mysql5.7.10 のルートパスワードを変更する方法

推薦する

Win7 インストール MySQL 5.6 チュートリアル図

目次1. ダウンロード2. インストール3. my.ini ファイルを設定する(デフォルトのエンコー...

MySQLクライアントとサーバーのプロトコルの解釈

目次MySQL クライアント/サーバー プロトコルMySQL サーバーから高いパフォーマンスを得る必...

Docker が MySQL イメージをプルするのが遅すぎる問題を解決する

Docker を使用して MySQL イメージをプルしようとして 30 分経っても失敗したため、代わ...

jQuery キャンバスで画像検証コード例を描画する

この記事では、jQuery Canvasの描画画像検証コードの具体的なコードを例として紹介します。具...

IE環境では、divの高さはフォントの高さよりも大きくなければならないと規定されています。

コードをコピーコードは次のとおりです。 <div class="content&qu...

VMware15 の CentOS7 インストールの詳細なプロセスとよくある問題 (画像とテキスト)

1. インストールパッケージの準備VMware-player-15.0.4-12990004、非商...

CSS3で実装された水平ヘッダーメニュー

結果:実装コードhtml <nav class="dropdownmenu"...

HTML 要素 noscript の使用の紹介

noscript の定義と使用法noscript 要素は、スクリプトが実行されない場合の代替コンテン...

フローティングメニューを実装するjQueryプラグイン

毎日jQueryプラグインを学ぶ - フローティングメニュー、参考までに、具体的な内容は次のとおりで...

MySQL のロックとトランザクションの簡単な分析

MySQL 自体はファイルシステムに基づいて開発されましたが、ロックの存在が異なります。データベース...

CSS を使用してテクスチャ付きグラデーション背景画像を記述するためのサンプル コード

プロジェクト内のページの長さはおよそ2000px以上あり、背景画像にはテクスチャやグラデーションがあ...

Vue のスロットの使用法と適用シナリオの詳細な分析

スロットとは何ですか? Vue では、子コンポーネント タグの中央に何もラップできないことはわかって...

jsでライトスイッチの効果を実現

この記事の例では、ライトスイッチ効果を実現するためのjsの具体的なコードを参考までに共有しています。...

Vue の高度な構築プロパティの詳細な説明

目次1. ディレクティブカスタムディレクティブ2. ミックスイン3. 継承を拡張する4. 提供して注...

JavaScript の構成と継承の説明

目次1. はじめに2. プロトタイプチェーン継承3. コンストラクタの継承4. 組み合わせ継承1. ...