Maison > interface Web > js tutoriel > le corps du texte

Projet de construction Vue et Typescript

php中世界最好的语言
Libérer: 2018-03-19 17:01:01
original
2625 Les gens l'ont consulté

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
Copier après la connexion

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

npm install typescript vue-class-component -D
Copier après la connexion
npm install ts-loader@3.3.1 -D
Copier après la connexion

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$/]
  }
}
Copier après la connexion

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"
  }
}
Copier après la connexion

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;
}
Copier après la connexion

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

Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!