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
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
L'IA peut-elle vaincre le dernier théorème de Fermat ? Un mathématicien a abandonné 5 ans de sa carrière pour transformer 100 pages de preuve en code
Apr 09, 2024 pm 03:20 PM
Le dernier théorème de Fermat, sur le point d'être conquis par l'IA ? Et la partie la plus significative de tout cela est que le dernier théorème de Fermat, que l’IA est sur le point de résoudre, vise précisément à prouver que l’IA est inutile. Autrefois, les mathématiques appartenaient au domaine de l’intelligence humaine pure ; aujourd’hui, ce territoire est déchiffré et piétiné par des algorithmes avancés. Image Le dernier théorème de Fermat est une énigme « notoire » qui intrigue les mathématiciens depuis des siècles. Cela a été prouvé en 1993, et les mathématiciens ont désormais un grand projet : recréer la preuve à l’aide d’ordinateurs. Ils espèrent que toute erreur logique dans cette version de la preuve pourra être vérifiée par un ordinateur. Adresse du projet : https://github.com/riccardobrasca/flt
Partagez un moyen simple de packager des projets PyCharm
Dec 30, 2023 am 09:34 AM
Partagez la méthode d'empaquetage de projet PyCharm simple et facile à comprendre. Avec la popularité de Python, de plus en plus de développeurs utilisent PyCharm comme outil principal pour le développement Python. PyCharm est un puissant environnement de développement intégré qui fournit de nombreuses fonctions pratiques pour nous aider à améliorer l'efficacité du développement. L’une des fonctions importantes est le packaging du projet. Cet article explique comment empaqueter des projets dans PyCharm d'une manière simple et facile à comprendre, et fournit des exemples de code spécifiques. Pourquoi packager des projets ? Développé en Python
Regardons de plus près PyCharm : un moyen rapide de supprimer des projets
Feb 26, 2024 pm 04:21 PM
Titre : En savoir plus sur PyCharm : Un moyen efficace de supprimer des projets Ces dernières années, Python, en tant que langage de programmation puissant et flexible, a été privilégié par de plus en plus de développeurs. Dans le développement de projets Python, il est crucial de choisir un environnement de développement intégré efficace. En tant qu'environnement de développement intégré puissant, PyCharm fournit aux développeurs Python de nombreuses fonctions et outils pratiques, notamment la suppression rapide et efficace des répertoires de projet. Ce qui suit se concentrera sur la façon d'utiliser la suppression dans PyCharm
Conseils pratiques PyCharm : convertir le projet en fichier EXE exécutable
Feb 23, 2024 am 09:33 AM
PyCharm est un puissant environnement de développement intégré Python qui fournit une multitude d'outils de développement et de configurations d'environnement, permettant aux développeurs d'écrire et de déboguer du code plus efficacement. Lors du processus d'utilisation de PyCharm pour le développement de projets Python, nous devons parfois regrouper le projet dans un fichier EXE exécutable pour l'exécuter sur un ordinateur sur lequel aucun environnement Python n'est installé. Cet article explique comment utiliser PyCharm pour convertir un projet en fichier EXE exécutable et donne des exemples de code spécifiques. tête
Tutoriel de base : Créer un projet Maven à l'aide d'IDEA
Feb 19, 2024 pm 04:43 PM
IDEA (IntelliJIDEA) est un puissant environnement de développement intégré qui peut aider les développeurs à développer diverses applications Java rapidement et efficacement. Dans le développement de projets Java, l'utilisation de Maven comme outil de gestion de projet peut nous aider à mieux gérer les bibliothèques dépendantes, à créer des projets, etc. Cet article détaillera les étapes de base pour créer un projet Maven dans IDEA, tout en fournissant des exemples de code spécifiques. Étape 1 : Ouvrez IDEA et créez un nouveau projet. Ouvrez IntelliJIDEA
Tutoriel PyCharm : Comment supprimer des éléments dans PyCharm ?
Feb 24, 2024 pm 05:54 PM
PyCharm est un puissant environnement de développement intégré (IDE) Python qui fournit des fonctions riches pour aider les développeurs à écrire et à gérer des projets Python plus efficacement. Lors du développement de projets à l'aide de PyCharm, nous devons parfois supprimer certains projets qui ne sont plus nécessaires pour libérer de l'espace ou nettoyer la liste des projets. Cet article détaillera comment supprimer des projets dans PyCharm et fournira des exemples de code spécifiques. Comment supprimer un projet Ouvrez PyCharm et entrez dans l'interface de la liste de projets. Dans la liste des projets,
Construction fluide : Comment configurer correctement l'adresse de l'image Maven
Feb 20, 2024 pm 08:48 PM
Construction fluide : comment configurer correctement l'adresse de l'image Maven Lorsque vous utilisez Maven pour créer un projet, il est très important de configurer l'adresse de l'image correcte. Une configuration correcte de l'adresse miroir peut accélérer la construction du projet et éviter des problèmes tels que les retards du réseau. Cet article explique comment configurer correctement l'adresse du miroir Maven et donne des exemples de code spécifiques. Pourquoi avez-vous besoin de configurer l'adresse de l'image Maven ? Maven est un outil de gestion de projet qui peut automatiquement créer des projets, gérer les dépendances, générer des rapports, etc. Lors de la construction d'un projet dans Maven, généralement
Optimiser le processus de packaging des projets Maven et améliorer l'efficacité du développement
Feb 24, 2024 pm 02:15 PM
Guide des étapes de packaging du projet Maven : optimiser le processus de construction et améliorer l'efficacité du développement. À mesure que les projets de développement de logiciels deviennent de plus en plus complexes, l'efficacité et la rapidité de la construction du projet sont devenues des maillons importants du processus de développement qui ne peuvent être ignorés. En tant qu'outil de gestion de projet populaire, Maven joue un rôle clé dans la construction de projets. Ce guide explorera comment améliorer l'efficacité du développement en optimisant les étapes de packaging des projets Maven et fournira des exemples de code spécifiques. 1. Confirmez la structure du projet Avant de commencer à optimiser l'étape de packaging du projet Maven, vous devez d'abord confirmer.
