Vue 中使用 TypeScript 详细总结
2021/10/28 23:40:23
本文主要是介绍Vue 中使用 TypeScript 详细总结,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
VUE 项目中使用 Typescript
第一节:项目起步
Vue 中使用 TypeScript
- 项目中主要使用到的第三方依赖
- vue2
vue-class-component vue-property-decorator less vue-router vuex vuex-class
搭建项目
// 按照提示自定义vue选项,我这里使用的是vue2 + ts vue create pm-vue2-ts-app // 项目创建成功进入工程目录启动项目 npm run server
App.vue 中内容
<template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </div> <router-view/> </div> </template> <style lang="less"> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } #nav { padding: 30px; a { font-weight: bold; color: #2c3e50; &.router-link-exact-active { color: #42b983; } } } </style>
main.ts 中配置
import Vue from 'vue'; import App from './App.vue'; import router from './router'; import store from './store'; Vue.config.productionTip = false; new Vue({ router, store, render: (h) => h(App), }).$mount('#app');
- 创建第一个组件简单组件 TsDemo.vue
<template> <div> <h1>{{ name }}</h1> <div>{{ mess }}</div> <button @click="addOne">测试按钮点击加一{{ num }}</button> <button @click="onhanlf">调用父组件事件</button> </div> </template> <script lang="ts"> // 导入一下选项 import {Component, Emit, Prop, Vue} from 'vue-property-decorator'; @Component export default class TsDemo extends Vue { // props 传值 定义类型是 string 类型,默认值是 ’message‘ @Prop({default: 'message'}) private mess!: string; // 组件私有变量 private name: string = 'test demo'; private num: number = 0; // 组件方法 methods 中提供的方法,直接写在下面 private addOne() { this.num++; } // 调用父组件方法 private onhanlf() { this.$emit('handle', {}); } } </script>
在About.vue 中引用 TsDemo 组件
<template> <div class="about"> <h1>This is an about page</h1> <tsDemo mess="About 父组件" @handle="handle"></tsDemo> </div> </template> <script lang="ts"> // 引入Component, Vue import {Component, Vue} from 'vue-property-decorator'; // 引入 tsDemo 组件 import tsDemo from '@/components/TsDemo.vue'; // 注意:在组件中使用路由数位需要提前注册 Component.registerHooks([ 'beforeRouteLeave', ]); // 在 Component 中引入组件 tsDemo @Component({ components: { tsDemo, }, }) export default class About extends Vue { // 父组件提供方法,在 tsDemo 子组件中调用 private handle(val: object) { console.log(val); } // 组件中的路由守卫 private beforeRouteLeave(to: any, from: any, next: any) { console.log(to, from); next(); } } </script>
路由配置 router/index.ts 文件中配置路由
import Vue from 'vue'; import VueRouter, { RouteConfig } from 'vue-router'; import Home from '../views/Home.vue'; Vue.use(VueRouter); const routes: RouteConfig[] = [ { path: '/', name: 'Home', component: Home, }, { path: '/about', name: 'About', component: () => import('../views/About.vue'), }, ]; const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes, }); export default router;
到这里一个简单的vue + ts 项目中配置就都OK了
这篇关于Vue 中使用 TypeScript 详细总结的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist
- 2024-03-11icons for vue
- 2024-03-07breadcrumbs react js
- 2024-03-06react login page example
- 2024-03-06react router uselocation
- 2024-03-04postgres jsonb_set