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