Avec la tendance de la mise à jour vue3.0, vue + ts devrait être une direction courante pour les futurs projets vue.
Dans le passé, même si vous utilisiez vue-class-component pour écrire, il y aura de nombreux pièges, mais maintenant la version vue3.0 prend parfaitement en charge tsx, et vous pouvez enfin l'essayer avec plaisir.
Précisez d'abord 2 points:
Q: Quelle est l'utilité de ts?
R: Vérification de type, compilation directe en js natif, introduction d'un nouveau sucre syntaxique
Q: Pourquoi utiliser ts?
R: Le but de la conception de TypeScript devrait être de résoudre les «problèmes» de JavaScript: les types faibles et l'absence d'espaces de noms rendent la modularisation difficile et ne conviennent pas au développement de grands programmes. En outre, il fournit également du sucre syntaxique pour vous aider à pratiquer plus facilement la programmation orientée objet.
Initialisation du projet Vue
La première étape consiste à installer vue-cli:
npm install -g @ vue / cli Une fois l'
installation réussie, nous pouvons utiliser la commande vue, méthode de test:
$ vue -V
@ vue / cli 4.3.1
La deuxième étape consiste à initialiser le projet vue:
vue create vue-next-test Après avoir
entré la commande, une fenêtre interactive de ligne de commande apparaîtra, ici nous choisissons manuellement les fonctionnalités:
Vue CLI v4.3.1
? Veuillez choisir un préréglage:
default ( babel, eslint)
❯ Sélectionnez manuellement les fonctionnalités
Ensuite, nous vérifions: Routeur, Vuex, préprocesseurs CSS et Linter / Formatter, tout cela est nécessaire pour développer des projets de niveau commercial:
Vue CLI v4.3.1
?
Vérifiez les fonctionnalités nécessaires à votre projet:
◉ Babel
◯ TypeScript
◯ Prise en charge de Progressive Web App (PWA)
◉ Routeur
◉ Vuex
◉ Préprocesseurs CSS
❯◉ Linter / Formatter
◯ Test unitaire
◯ Test E2E
Remarque: Le projet Vue 3.0 doit actuellement être mis à niveau à partir du projet Vue 2.0, donc afin de passer directement au bucket de la famille Vue 3.0, nous devons vérifier le routeur et Vuex lors de la création du projet Vue, évitez donc d'écrire manuellement code d'initialisation
Les dépendances seront automatiquement installées après avoir appuyé sur Entrée. Pour accélérer l'installation, nous pouvons utiliser la source Taobao pour accélérer l'initialisation:
vue create -r https://registry.npm.taobao.org vue-next-test Après le
projet est créé, la structure de répertoire comme suit :.
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
└── src
├── App.vue
├── actifs
│ └── logo.png
├── composants
│ └── HelloWorld.vue
├── main.js
├── router
│ └── index.js
├── store
│ └── index.js
└── vues
├── About.vue
└── Home.vue
Créer un routage Dans le
développement d'un projet, nous devons généralement créer une nouvelle page, puis ajouter une configuration de routage. Nous créons Test.vue dans le répertoire / src / views:
<template>
<div class="test">
<h1>test page</h1>
</div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
.test {
color: red;
}
</style>
Créez ensuite une configuration de routage dans /src/router/index.js:
import {
createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/test',
name: 'Test',
component: () => import(/* webpackChunkName: "test" */ '../views/Test.vue')
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
Le processus d'initialisation de Vue Router n'a pas beaucoup changé depuis la version 3.0, sauf que le constructeur était utilisé auparavant. Ici, createRouter est utilisé pour créer des instances de Vue Router. La méthode de configuration est fondamentalement la même. Une fois la configuration terminée, nous devons ajouter un lien dans App.vue La route vers Test.vue:
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/test">Test</router-link>
</div>
<router-view/>
</div>
</template>
Plusieurs formes de composants Vue:
1. Composant de classe, composant étendu, composant de fonction. Le composant de
classe est le composant le plus fréquemment utilisé dans notre projet ts. Il peut utiliser notre décorateur pour rendre le composant parfaitement dactylographié.
<script lang="ts">
import {
Component, Vue } from 'vue-property-decorator'
@Component({
name: 'Demo'
})
export default class extends Vue{
}
</script>
20 Composants d'extension
La façon d'utiliser vue est exactement la même en temps normal, mais vous ne pouvez pas utiliser de décorateurs.
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
})
</script>
3. Composants fonctionnels
Si vous avez utilisé react, vous saurez qu'il y a des composants fonctionnels dans react, et les performances sont meilleures que les autres composants mais il n'y a pas de cycle de vie.
<template functional>
<div>
<h3>函数型组件</h3>
</div>
</template>
Méthodes courantes à essayer:
1.
Le décorateur du composant @Component peut recevoir un objet en tant que paramètre, vous pouvez déclarer des composants, des filtres, des directives et d'autres options qui ne fournissent pas de décorateur dans l'objet
<script lang="ts">
import {
Component, Vue } from 'vue-property-decorator'
import HeaderComponent from '@/components/HeaderComponent.vue'
import ResizeMixin from "../mixins"
@Component({
name: 'Demo',
components: {
// 组件
HeaderComponent
},
directives: {
// 局部指令
test(el: HTMLElement, binding) {
console.log(el, binding);
}
},
filters: {
// 局部过滤
addOne(num: number) {
return num + 1;
}
},
mixins: [ResizeMixin],
})
export default class extends Vue{
}
</script>
2. @ Prop -> Paramètres d'acceptation des données
@Prop() str1!: string; // 必传
@Prop() str2: string | undefined; // 非必传
@Prop({
default: "默认值" }) str3: string | undefined;
3. données -> liaison de données
private name = "张三";
private age = 18;
private userInfo: UserInfo = {
name: "李四",
age: 39
};
4. méthodes -> méthode
private addAge() {
this.btn.style.background = "yellow";
this.age += 1;
}
5. calculés -> attributs calculés
get initUser() {
return "计算后的age" + this.age;
}
6. @ Watch -> surveiller les changements de données
interface UserInfo {
name: string;
age: number;
}
@Watch("age")
handelChangeAge(newVal: number, oldVal: number) {
console.log("新数据" + newVal, "老数据" + oldVal);
}
// 深度监听
@Watch("userInfo", {
deep: true, immediate: false })
handelChangeUserInfo(newVal: UserInfo, oldVal: UserInfo) {
console.log("新数据" + newVal, "老数据" + oldVal);
}
7. @ Ref -> Obtenir l'élément
<button type="button" ref="btn" @click="addAge" class="btn">
测试ref
</button>
@Ref("btn") btn!: HTMLButtonElement;
addAge() {
this.btn.style.background = "yellow";
}
8. @ Emit -> Événement Release
// Child
<button @click="addStrClick">addStrClick</button>
<button @click="addStrClick2('1')">addStrClick</button>
@Emit()
addStrClick() {
return "1";
}
@Emit()
addStrClick2(str) {
return str + 1;
}
// father
<Child @addStrClick="***" @addStrClick2="***" />
Cycle de la vie
created() {
console.log("created");
}
mounted() {
console.log("mounted");
}
Pour résumer
Besoin de continuer à essayer de nouvelles choses (marcher sur la fosse)