Compétences en développement Vue3+TS+Vite : Comment créer rapidement un environnement de développement Vue3+TS+Vite

Compétences en développement Vue3+TS+Vite : Comment créer rapidement un environnement de développement Vue3+TS+Vite

Dans le développement Web moderne, Vue.js est l'un des frameworks front-end les plus populaires. Vue3, en tant que dernière version de Vue.js, apporte plus de fonctionnalités et des améliorations de performances. TypeScript, en tant que sur-ensemble de JavaScript typé statiquement, fournit des outils de développement et des capacités de vérification de type plus puissants. Vite est un outil de construction très rapide qui se concentre sur l'environnement de développement et peut nous aider à créer rapidement l'environnement de développement pour le projet Vue3+TS. Cet article explique comment utiliser Vite pour créer un environnement de développement Vue3+TS et fournit des conseils de développement et des exemples de code.

Préparation

Avant de commencer, assurez-vous d'avoir installé les dernières versions de Node.js et npm.

Initialisez le projet à l'aide de Vite

Tout d'abord, nous devons installer l'outil de ligne de commande de Vite globalement. Ouvrez le terminal et exécutez la commande suivante :

npm install -g create-vite

Une fois l'installation terminée, nous utilisons la commande create-vite pour créer un nouveau projet. Exécutez la commande suivante dans le terminal :

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

La commande ci-dessus créera un projet Vue3+TS nommé my-vue3-project et initialisera automatiquement certaines configurations et fichiers de base.

Entrez le répertoire du projet :

cd my-vue3-project

Installez les dépendances du projet :

npm install

Démarrez le projet :

npm run dev

Ouvrez http://localhost:3000 dans le navigateur, vous verrez une application Vue3+TS de base en cours d'exécution.

Ajoutez Vuex et Vue Router

Dans de nombreux projets réels, nous utilisons souvent Vuex comme bibliothèque de gestion d'état et Vue Router pour la gestion du routage. Ci-dessous, nous expliquerons comment les ajouter à notre projet Vue3+TS.

Tout d'abord, installez Vuex et Vue Router :

npm install vuex@next vue-router@next

Créez un répertoire store dans le répertoire src et créez-y un fichier index.ts pour initialiser Vuex. L'exemple de code est le suivant :

import { createStore } from 'vuex'

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

export default store

Créez un répertoire de routeur dans le répertoire src et créez-y un fichier index.ts pour initialiser Vue Router. L'exemple de code est le suivant :

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

Maintenant, nous devons introduire et utiliser le magasin et le routeur dans le fichier main.ts. L'exemple de code est le suivant :

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')

Configuration TypeScript

Pour que TypeScript fonctionne correctement, nous devons ajouter un fichier tsconfig.json dans le répertoire racine du projet et effectuer quelques configurations de base.

Créez le fichier tsconfig.json dans le répertoire racine du projet et ajoutez le contenu suivant :

{
  "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"]
  }
}

De cette façon, nous avons terminé l'initialisation et la configuration de base du projet Vue3+TS+Vite. Désormais, nous pouvons développer en fonction des besoins réels et profiter des fonctionnalités et outils fournis par Vue3 et TypeScript pour améliorer l'efficacité du développement.

Résumé

Cet article explique comment créer rapidement un environnement de développement Vue3+TS+Vite et fournit des exemples de code et des conseils de développement. En utilisant Vite, nous pouvons créer rapidement un environnement de projet Vue3+TS moderne. L'utilisation de TypeScript peut fournir des outils de développement et des capacités de vérification de type plus puissants, nous aidant ainsi à écrire un code plus fiable et plus maintenable. J'espère que ces conseils pourront vous aider à améliorer l'efficacité et la qualité du développement dans votre projet Vue3+TS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!