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 のルートパスワードを変更する方法

推薦する

ジョセフリング問題を解決する 3 つの JavaScript メソッド

目次概要問題の説明循環リンクリスト順序付き配列数学的再帰要約する概要ジョセフ・リング問題は、ジョセフ...

Docker デプロイメント Springboot プロジェクト例の分析

この記事は主に、docker デプロイメント springboot プロジェクトのサンプル分析を紹介...

Day.js をベースにした JavaScript での日付処理のよりエレガントな方法

目次day.js を使用する理由モーメントデイ.js day.js がなければどうなるでしょうか? ...

MySQL シリーズ: redo ログ、undo ログ、binlog の詳細な説明

取引の実施REDO ログはトランザクションの永続性を保証し、UNDO ログはトランザクションのロール...

HTML の水平および垂直中央揃えの問題の概要

最近、センタリングの問題に数多く遭遇したので、後で簡単に見つけられるように、時間をかけてそれらを要約...

MySQL インデックス プッシュダウンを 5 分で学ぶ

目次序文インデックス プッシュダウンとは何ですか?インデックスプッシュダウン最適化の原理インデックス...

MySQL スロークエリ pt-query-digest スロークエリログの分析

1. はじめにpt-query-digest は、MySQL のスロー クエリを分析するためのツール...

一般的なMySQLコマンドの概要

mysqlrootパスワードの設定と変更初めて MySQL データベースに入ります。 !環境変数にm...

Linuxシステムの入出力管理とvimの共通機能の詳細な説明

####システム内の入出力の管理#### 1. システムの入力と出力のリダイレクトを理解する入力リダ...

macOS での MySQL 8.0.16 のインストールと設定のグラフィック チュートリアル

この記事では、macOSでのMySQL 8.0.16のインストールと設定のチュートリアルを参考までに...

動的な背景グラデーション効果を実現するCSS3

CSS3 を学ぶということは、新しい機能と基本的な理論に慣れることを意味します。この記事では、ケー...

jQueryはショッピングカート機能を実装します

この記事の例では、ショッピングカート機能を実装するためのjQueryの具体的なコードを参考までに共有...

CentOS 8 システム FTP サーバーのインストールとパッシブ モードの設定の詳細なチュートリアル

目次1. 基本を理解する2. システム環境を確認する3. ftpコマンドをインストールする[オプショ...

Vue.js のミックスインの詳細な説明

ミックスインは、コンポーネントに分散された再利用可能な機能を柔軟な方法で提供します。 Mixin オ...