Comment connecter vue à TypeScript

Vue.js est un framework frontal populaire qui peut nous aider à créer des applications complexes d'une seule page. Cependant, en raison de la nature faiblement typée de JavaScript, des erreurs de type potentielles se produiront inévitablement lorsque nous utiliserons Vue.js. Pour résoudre ce problème, nous pouvons utiliser TypeScript pour augmenter la lisibilité et la maintenabilité du code. Cet article expliquera comment intégrer TypeScript dans un projet Vue.js.

1. Installez Vue.js et TypeScript

Avant de commencer, vous devez installer Vue.js et TypeScript. Vous pouvez utiliser npm ou Yarn pour terminer l'installation. Veuillez exécuter la commande suivante :

# 安装 Vue.js
npm install vue

# 安装 TypeScript
npm install -g typescript

# 安装 TypeScript Definitions for Vue.js
npm install --save-dev @types/vue

2. Initialiser le projet TypeScript

Nous utiliserons vue-cli pour initialiser un projet Vue.js. Cette commande peut nous aider à créer rapidement une application Vue.js de base. Veuillez exécuter la commande suivante :

# 安装 vue-cli
npm install -g vue-cli

# 创建一个带有 TypeScript 的 Vue.js 项目
vue init webpack my-project --typescript

Cette commande créera un projet Vue.js avec une configuration TypeScript. Nous pouvons utiliser my-project au lieu du nom de votre projet. Dans le dossier du projet, vous verrez de nouveaux fichiers et dossiers, tels que tsconfig.json et src/main.ts. my-project 来代替您的项目名称。在项目文件夹中，您将会看到一些新的文件和文件夹，例如 tsconfig.json 和 src/main.ts。

3. 配置 TypeScript

在 TypeScript 项目中，我们需要添加一些设置，如下所示：

3.1 配置 tsconfig.json

tsconfig.json 是 TypeScript 的主要配置文件。在 Vue.js 项目中，需要添加一些设置，以便 TypeScript 处理 .vue 文件。请将以下代码添加到 tsconfig.json 文件中：

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["esnext", "dom"],
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "sourceMap": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "strict": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules"]
}

3.2 配置 webpack.config.js

在 webpack.config.js 文件中，我们需要添加一些设置。请在 resolve 对象下面添加以下代码：

{
  resolve: {
    extensions: [".ts", ".js", ".vue", ".json"],
    alias: {
      vue$: "vue/dist/vue.esm.js"
    }
  }
}

此设置将告诉 Webpack 如何解析不同的文件扩展名。我们还需要将 vue 的别名指向正确的文件，以避免由于文件解析而产生错误。

4. 构建 Vue.js 单文件组件（SFC）

在 Vue.js 中，我们使用 .vue 文件来编写单页面组件。由于 TypeScript 不支持 .vue 文件，我们需要使用 .tsx 文件替换他们。

在 src/components 文件夹中创建一个新的 .tsx 文件，例如 HelloWorld.tsx。请注意，如果要在这些组件中使用 Vue.js 特定的功能（例如 this.$router，this.$store，this.$refs，this.$emit等），则需要为这些组件添加正确的类型定义。

我们可以使用 @Component 装饰器来定义组件。例如：

import Vue from 'vue';
import Component from 'vue-class-component';

@Component({
  props: {
    msg: String
  }
})
export default class HelloWorld extends Vue {
  // ...
}

5. 引入组件

在 src/App.vue 文件中，我们可以引入组件并将其中的 d477f9ce7bf77f53fbcf36bec1b69b7a 部分替换成以下代码：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App with TypeScript"/>
  </div>
</template>

然后，我们需要在 src/main.ts 中引入 App.vue

3. Configurer TypeScript

Dans le projet TypeScript, nous devons ajouter quelques paramètres comme suit :

3.1 Configurer tsconfig.json

tsconfig.json est le fichier de configuration principal de TypeScript. Dans votre projet Vue.js, vous devez ajouter quelques paramètres pour que TypeScript puisse gérer les fichiers .vue. Veuillez ajouter le code suivant au fichier tsconfig.json :

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App)
});

3.2 Configuration de webpack.config.js

Dans webpack.config. js, nous devons ajouter quelques paramètres. Veuillez ajouter le code suivant sous l'objet resolve :

npm run serve

Ce paramètre indiquera à Webpack comment résoudre différentes extensions de fichiers. Nous devons également pointer l'alias de vue vers le bon fichier pour éviter les erreurs dues à l'analyse des fichiers.

4. Construire un composant de fichier unique (SFC) Vue.js #🎜🎜##🎜🎜#Dans Vue.js, nous utilisons des fichiers .vue pour écrire des composants de pages uniques . Étant donné que TypeScript ne prend pas en charge les fichiers .vue, nous devons les remplacer par des fichiers .tsx. #🎜🎜##🎜🎜#Créez un nouveau fichier .tsx dans le dossier src/components, tel que HelloWorld.tsx. Veuillez noter que si vous souhaitez utiliser des fonctionnalités spécifiques à Vue.js dans ces composants (tels que this.$router, this.$store, this.$refs , <code>this.$emit, etc.), vous devez ajouter les définitions de type correctes pour ces composants. #🎜🎜##🎜🎜#Nous pouvons utiliser le décorateur @Component pour définir des composants. Par exemple : #🎜🎜#rrreee#🎜🎜#5. Introduire les composants #🎜🎜##🎜🎜#Dans le fichier src/App.vue, on peut introduire le composant et mettre le Remplacez la partie d477f9ce7bf77f53fbcf36bec1b69b7a par le code suivant : #🎜🎜#rrreee#🎜🎜#Ensuite, nous devons introduire App.vue dans src/main. ts code> Composant : #🎜🎜#rrreee#🎜🎜#6. Exécutez l'application #🎜🎜##🎜🎜# Maintenant que nous avons terminé la configuration de Vue.js et TypeScript, vous pouvez démarrer l'application. en utilisant la commande suivante : # 🎜🎜#rrreee#🎜🎜#Cela démarrera un serveur de développement afin que vous puissiez visualiser votre application dans un navigateur. Vous pouvez désormais écrire des composants Vue.js améliorés à l'aide de TypeScript. #🎜🎜##🎜🎜#Conclusion#🎜🎜##🎜🎜#Dans cet article, nous avons présenté comment connecter TypeScript et créer des composants d'une seule page dans les projets Vue.js. Vue.js combiné à TypeScript peut nous aider à développer plus efficacement des applications Web maintenables. J'espère que cet article vous aidera ! #🎜🎜#

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!