Introduction à la configuration de l'utilisation de Typescript dans Vue2 Vue-cli

Cet article présente principalement la configuration de l'utilisation de Typescript dans Vue2 Vue-cli. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Vue est l'un des. trois frontaux majeurs. L'un des frameworks a reçu jusqu'à présent 44 873 étoiles sur github, ce qui suffit à montrer qu'il est progressivement devenu courant. L'article suivant vous présente principalement les informations pertinentes sur la configuration de l'utilisation de Typescript dans Vue2 Vue-cli. Les amis dans le besoin peuvent s'y référer.

Avant-propos

Parce que l'équipe de l'entreprise est passionnée par le framework vue récemment, je voulais m'entraîner à la dactylographie sur le nouveau projet, alors j'ai commencé vue+ts La route des pièges... Cet article est destiné à faire gagner du temps aux amis qui ont la même idée que moi. Je ne dirai pas grand-chose ci-dessous. Jetons un coup d'œil à la configuration requise pour utiliser Typescript dans Vue2 Vue-. cli.

1. Configuration préliminaire

Installez d'abord les plug-ins officiels vue-class-component, vue-property-decorator et configurez le webpack .
La configuration du webpack est la suivante :

Modifier le fichier d'entrée

entry: {
 app: './src/main.ts'
}

partie résoudre :

extensions: ['.js', '.vue', '.json', '.ts', '.tsx']

Configurer le chargeur

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

Configurer tsconfig.json

{
 "include": [
 "src/**/*"
 ],
 "exclude": [
 "node_modules"
 ],
 "compilerOptions": {
 "allowSyntheticDefaultImports": true,
 "experimentalDecorators": true,
 "allowJs": true,
 "module": "es2015",
 "target": "es5",
 "moduleResolution": "node",
 "experimentalDecorators": true,
 "isolatedModules": true,
 "lib": [
  "dom",
  "es5",
  "es2015.promise"
 ],
 "sourceMap": true,
 "pretty": true
 }
}

2. Combat réel !

Configurer la configuration n'est que la première étape, l'exécuter dans le projet est la clé.

Ajoutez lang='ts'

dans la balise de script du fichier vue car ts-loader ne sait pas ce que sont les fichiers vue, html et autres comme le webpack équipé d'un chargeur , vous obtiendrez une erreur indiquant que le module ne peut pas être analysé après l'avoir exécuté, vous devez donc également configurer le fichier de déclaration .d.ts

la configuration suivante de vue

declare module "*.vue" {
 import Vue from 'vue';
 export default Vue;
}

Vous pouvez également configurer des fichiers .d.ts tels que html pour d'autres modules non-js (dites à ts-loader de comprendre le html comme une chaîne)

declare module "*.html" {
 let template: string;
 export default template;
}

Après la configuration, ts peut comprendre ces modules

Présentez les modules que vous devez utiliser depuis vue-property-decorator

(généralement, seuls Component, Vue, Watch et Prop sont utilisés. Les trois autres n'ont pas été utilisés et n'ont pas été étudiés. Quelqu'un qui sait peut les expliquer)

import { Component, Vue, Watch } from 'vue-property-decorator'

Voici le code sidbar écrit précédemment à titre d'exemple :

class HoverTopElem {
 leaveTop: number = -200
 top: number = null
 height: number = null

 show(e) {
 this.top = e.target.getBoundingClientRect().top
 this.height = e.target.clientHeight
 }
 hidden() {
 this.top = this.leaveTop
 }
}

@Component({
 name: 'sidebar',
 template: template,
 components: {
 sidebarItem
 }
})
export default class Sidebar extends Vue {
 SidebarMenu: any = SidebarMenu
 hoverTopElem: HoverTopElem = new HoverTopElem()
 activeListItemName: string = null
 activeRouteItemRoute: string = null

 get _activeRouteItemRoute(): string {
 return this.$route.path
 }

 @Watch('_activeRouteItemRoute', { immediate: true })
 onRouteChanged(val: any) {
 this.activeRouteItemRoute = val
 }

 changeList(param) {
 this.activeListItemName = param
 }

 changeRoute(param) {
 this.activeRouteItemRoute = param
 }
}

Les métadonnées sont écrites dans la configuration @Component, comme le nom, en utilisant les composants et ainsi de suite, puis expliquez comment utiliser chaque méthode d'attribut d'instance utilisée dans vue auparavant :

data : c'est la plus couramment utilisée, comme le SidebarMenu ci-dessus (un total de 4 déclarés ici), Notez que la variable déclarée ici doit se voir attribuer une valeur. Sinon, elle sera nulle et ne pourra pas être indéfinie, sinon les données ne répondront pas. Par conséquent, les attributs de la classe HoverTopElem doivent également avoir des valeurs initiales, sinon ces attributs ne seront pas réactifs

calculés : Voici la fonction get Notez que tsconfig.jsonp n'est pas configuré avec "target": "es5. " signalera une erreur ici

prop : Il existe un module Prop dans vue-property-decorator. Vous pouvez également déclarer cet accessoire dans les métadonnées, puis déclarer cette variable dans la classe. Je recommande personnellement le premier one

watch : Module Watch dans vue-property-decorator

methods : Les méthodes peuvent être écrites directement dans la classe comme les data (attention à ne pas avoir le même nom que le crochet du cycle)

Divers cycles de vie Hook : écrivez-le simplement directement

Pour le hook de routage, voir le document vue-class-component

À ce stade, vous peut essentiellement écrire le composant vue comme avant.

Bien sûr, si vous souhaitez écrire ts comme avant, vous devez également configurer tslint, sinon certaines syntaxes ts ne seront pas reconnues, comme les modificateurs publics. Parce que je ne maîtrise pas très bien ts, je. Je n'ai pas pensé à le configurer. Les amis intéressés peuvent l'essayer.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment résoudre le problème du chemin d'accès incorrect après l'empaquetage de l'image d'arrière-plan Vue

Basé sur casperjs et ressembler à .js implémente un service de comparaison de pixels

Introduction à la première utilisation de la méthode d'installation du stylet après l'initialisation du projet vue

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!