Con la tendencia de actualización de vue3.0, vue + ts debería ser una dirección principal para futuros proyectos de vue.
En el pasado, incluso si usaba vue-class-component para escribir, habría muchas trampas, pero ahora la versión vue3.0 es perfectamente compatible con tsx, y finalmente puede probarlo felizmente.
Primero aclara 2 puntos:
P: ¿Cuál es el uso de ts?
R: Comprobación de tipos, compilación directamente en js nativos, introduciendo un nuevo azúcar sintáctico
P: ¿Por qué usar ts?
R: El propósito del diseño de TypeScript debería ser resolver los "puntos débiles" de JavaScript: los tipos débiles y la ausencia de espacios de nombres dificultan la modularización y no son adecuados para el desarrollo de programas grandes. Además, también proporciona algo de azúcar sintáctico para ayudarlo a practicar la programación orientada a objetos de manera más conveniente.
Inicialización del proyecto Vue
El primer paso es instalar vue-cli:
npm install -g @ vue / cli Después de que la
instalación sea exitosa, podemos usar el comando vue, método de prueba:
$ vue -V
@ vue / cli 4.3.1
El segundo paso es inicializar el proyecto vue:
vue create vue-next-test Después de
ingresar el comando, aparecerá una ventana interactiva de línea de comando, aquí elegimos seleccionar manualmente las características:
Vue CLI v4.3.1
? Por favor, elija un ajuste preestablecido:
predeterminado ( babel, eslint)
❯ Seleccionar características manualmente
Luego verificamos: Router, Vuex, Preprocesadores CSS y Linter / Formatter, todos estos son necesarios para desarrollar proyectos de nivel comercial: ¿
Vue CLI v4.3.1
? Por favor, elija un ajuste preestablecido: Seleccionar características manualmente
? Compruebe las funciones necesarias para su proyecto:
◉ Babel
◯ TypeScript
◯ Compatibilidad con aplicaciones web progresivas (PWA)
◉ Enrutador
◉ Vuex
◉ Preprocesadores CSS
❯◉ Linter / Formateador
◯ Pruebas unitarias
◯ Pruebas E2E
Nota: El proyecto Vue 3.0 actualmente debe actualizarse desde el proyecto Vue 2.0, por lo que para actualizar directamente al grupo de la familia Vue 3.0, debemos verificar el enrutador y Vuex durante la creación del proyecto Vue, así que evite escribir manualmente código de inicialización
Las dependencias se instalarán automáticamente después de presionar Enter. Para acelerar la instalación, podemos usar la fuente de Taobao para acelerar la inicialización:
vue create -r https://registry.npm.taobao.org vue-next-test Después del
proyecto se crea, la estructura del directorio de la siguiente manera :.
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
└── src
├── App.vue
├── assets
│ └── logo.png
├── componentes
│ └── HelloWorld.vue
├── main.js
├── router
│ └── index.js
├── store
│ └── index.js
└── vistas
├── About.vue
└── Home.vue
Crear enrutamiento En el
desarrollo de proyectos, normalmente necesitamos crear una nueva página y luego agregar la configuración de enrutamiento.Creamos Test.vue en el directorio / src / views:
<template>
<div class="test">
<h1>test page</h1>
</div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
.test {
color: red;
}
</style>
Luego, cree una configuración de enrutamiento en /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
El proceso de inicialización de Vue Router no ha cambiado mucho desde la versión 3.0, excepto que el constructor se usó antes. Aquí, createRouter se usa para crear instancias de Vue Router. El método de configuración es básicamente el mismo. Una vez completada la configuración, necesitamos agregue un enlace en App.vue La ruta a 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>
Varias formas de componentes de Vue:
1. Componente de clase, componente extendido, componente de función.
El componente de clase es el componente más utilizado en nuestro proyecto ts. Puede usar nuestro decorador para hacer que el componente utilice perfectamente mecanografiado.
<script lang="ts">
import {
Component, Vue } from 'vue-property-decorator'
@Component({
name: 'Demo'
})
export default class extends Vue{
}
</script>
20 Componentes de expansión
La forma de usar vue es exactamente la misma en tiempos normales, pero no puedes usar decoradores.
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
})
</script>
3. Componentes funcionales
Si ha utilizado react, sabrá que hay componentes funcionales en react, y el rendimiento es mejor que otros componentes pero no hay ciclo de vida.
<template functional>
<div>
<h3>函数型组件</h3>
</div>
</template>
Métodos comunes para probar:
1.
Componente @Componente decorador puede recibir un objeto como parámetro, puede declarar componentes, filtros, directivas y otras opciones que no proporcionan un decorador en el objeto
<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 -> Parámetros de aceptación de datos
@Prop() str1!: string; // 必传
@Prop() str2: string | undefined; // 非必传
@Prop({
default: "默认值" }) str3: string | undefined;
3.data -> enlace de datos
private name = "张三";
private age = 18;
private userInfo: UserInfo = {
name: "李四",
age: 39
};
4.métodos -> método
private addAge() {
this.btn.style.background = "yellow";
this.age += 1;
}
5.calculado -> atributos calculados
get initUser() {
return "计算后的age" + this.age;
}
6. @ Watch -> monitorear cambios de datos
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 -> Obtener elemento
<button type="button" ref="btn" @click="addAge" class="btn">
测试ref
</button>
@Ref("btn") btn!: HTMLButtonElement;
addAge() {
this.btn.style.background = "yellow";
}
8. @ Emit -> Evento de lanzamiento
// 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="***" />
Ciclo vital
created() {
console.log("created");
}
mounted() {
console.log("mounted");
}
para resumir
Necesito seguir probando cosas nuevas (pisar el pozo)