Maison >interface Web >js tutoriel >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 :
Basé sur casperjs et ressembler à .js implémente un service de comparaison de pixels
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!