Vue3+TS+Vite 開発スキル: Vue3+TS+Vite 開発環境を素早く構築する方法

Vue3 TS Vite 開発スキル: Vue3 TS Vite 開発環境を迅速に構築する方法

現代の Web 開発において、Vue.js は最も人気のあるフロントエンドの 1 つです。フレームワーク 1 を終了します。 Vue.js の最新バージョンである Vue3 は、より多くの機能とパフォーマンスの向上をもたらします。 TypeScript は、JavaScript の静的に型指定されたスーパーセットとして、より強力な開発ツールと型チェック機能を提供します。 Vite は開発環境に重点を置いた非常に高速な構築ツールで、Vue3 TS プロジェクトの開発環境を迅速に構築するのに役立ちます。この記事では、Vite を使用して Vue3 TS 開発環境を構築する方法を紹介し、開発のヒントとコード例を示します。

準備

始める前に、最新バージョンの Node.js と npm がインストールされていることを確認してください。

Vite を使用してプロジェクトを初期化する

まず、Vite のコマンド ライン ツールをグローバルにインストールする必要があります。ターミナルを開いて次のコマンドを実行します:

npm install -g create-vite

インストールが完了したら、create-vite コマンドを使用して新しいプロジェクトを作成します。ターミナルで次のコマンドを実行します。

create-vite my-vue3-project --template vue-ts

上記のコマンドは、my-vue3-project という名前の Vue3 TS プロジェクトを作成し、いくつかの基本的な構成とファイルを自動的に初期化します。

プロジェクト ディレクトリを入力します:

cd my-vue3-project

プロジェクトの依存関係をインストールします:

npm install

プロジェクトを開始します:

npm run dev

ブラウザで実行すると、基本的な Vue3 TS アプリケーションが実行されていることがわかります。

Vuex と Vue Router の追加

実際のプロジェクトでは、状態管理ライブラリとして Vuex を使用し、ルーティング管理として Vue Router を使用することがよくあります。以下では、それらを Vue3 TS プロジェクトに追加する方法を紹介します。

まず、Vuex と Vue Router をインストールします。

npm install vuex@next vue-router@next

src ディレクトリにストア ディレクトリを作成し、その中にindex.ts ファイルを作成して Vuex を初期化します。サンプル コードは次のとおりです。

import { createStore } from 'vuex'

// 创建一个基本的store
const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    }
  }
})

export default store

src ディレクトリにルーター ディレクトリを作成し、その中にindex.ts ファイルを作成して Vue Router を初期化します。サンプル コードは次のとおりです。

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

次に、main.ts ファイルにストアとルーターを導入して使用する必要があります。サンプル コードは次のとおりです。

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'

const app = createApp(App)

app.use(store)
app.use(router)

app.mount('#app')

TypeScript 構成

TypeScript が正しく動作するには、プロジェクトのルート ディレクトリに tsconfig.json ファイルを追加し、いくつかの基本的な構成を実行する必要があります。

プロジェクトのルート ディレクトリに tsconfig.json ファイルを作成し、次の内容を追加します。

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "typeRoots": ["./node_modules/@types", "./src/types"],
    "types": ["vite/client"]
  }
}

これで、Vue3 TS Vite プロジェクトの初期化と基本構成が完了しました。現在では、実際のニーズに応じて開発し、Vue3 と TypeScript が提供する機能とツールを活用して開発効率を向上させることができます。

概要

この記事では、Vue3 TS Vite 開発環境を迅速に構築する方法を紹介し、いくつかのサンプル コードと開発のヒントを提供します。 Vite を使用すると、最新の Vue3 TS プロジェクト環境を迅速に作成できます。 TypeScript を使用すると、より強力な開発ツールと型チェック機能が提供され、より信頼性が高く保守しやすいコードを作成できます。これらのヒントが、Vue3 TS プロジェクトの開発効率と品質の向上に役立つことを願っています。

以上がVue3+TS+Vite 開発スキル: Vue3+TS+Vite 開発環境を素早く構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。