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了