Projet de construction Vue et Typescript

Cette fois, je vais vous présenter un projet de construction Vue et Typescript. Quelles sont les précautions pour les projets de construction Vue et Typescript. Ce qui suit est un cas pratique, jetons un coup d'œil.

Typescript est progressivement devenu populaire dans le cercle du front-end. Vue 2.5.0 a amélioré la déclaration de type, la rendant plus conviviale avec TypeScript

Cependant, si vous souhaitez utiliser TypeScript directement dans le projet, vous devez encore apporter quelques modifications au projet

PS : Il est recommandé d'utiliser Visual Studio Code pour le développement

1. Installer les dépendances

Tout d'abord, utilisez vue-cli pour générer le projet

vue init webpack demo

Ensuite, installez le dépendances nécessaires : typescript, ts-loader, vue-class-component

npm install typescript vue-class-component -D

npm install ts-loader@3.3.1 -D

Lors de l'installation de ts-loader ci-dessus, la version 3.3.1 a été spécifiée

En effet, au moment de la rédaction de ce blog (2018-03-14) , lorsque la dernière version 4.0.1 de ts-loader est installée, démarrage du le projet signalera une erreur

Il existe également plusieurs bibliothèques Peuvent être introduites à la demande :

tslint : Standardise le code et les besoins ts à utiliser avec tsllint-loader Il est préférable d'ajouter tslint-config-standard

vue-property-decorator : Extension de vue-class-component; , en ajoutant plusieurs décorateurs (@Emit, @Prop, etc.) qui combinent les fonctionnalités de Vue

vuex-class : Prise en charge améliorée de vuex basée sur vue-class ; -composant.

2. Configurez Webpack

puis modifiez le fichier ./build/webpack.base.conf.js :

Ajoutez '.ts' dans solve.extension afin de ne pas avoir besoin d'écrire le suffixe .ts lors de l'importation de fichiers ts

{
  test: /\.tsx?$/,
  loader: 'ts-loader',
  exclude: /node_modules/,
  options: {
    appendTsSuffixTo: [/\.vue$/]
  }
}

dans le module. Ajoutez l'analyse des fichiers ts par webpack dans les règles

3. Autres configurations

Créez le fichier tsconfig.json dans. le répertoire racine du projet :

// tsconfig.json{  "compilerOptions": {    // 与 Vue 的浏览器支持保持一致
    "target": "es5",    // 这可以对 `this` 上的数据属性进行更严格的推断
    "strict": true,    // 如果使用 webpack 2+ 或 rollup，可以利用 tree-shake:
    "module": "es2015",    "moduleResolution": "node"
  }
}

Pour les éléments de configuration complets de tsconfig.json, veuillez vous référer au document officiel

Créez le fichier vue-shim.d.ts dans le répertoire ./src et laissez-nous reconnaître le fichier .vue :

// vue-shim.d.tsdeclare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

4. Modification du fichier

Modifier le suffixe de tous les fichiers js dans le src. répertoire vers .ts

Puis modifiez l'entrée dans le fichier de configuration du webpack ./build/webpack.base.conf.js en main.ts

Le fichier ts transformé Le fichier .vue ne sera pas reconnu, donc lors de l'importation du fichier .vue, vous devez ajouter manuellement le suffixe .vue

Dans tous les fichiers .vue, vous devez ajouter la balise lang="ts" au