Vue 3 与 TypeScript 入门指南

引言

Vue 3 结合 TypeScript 能够提供更可靠的类型系统和更高效的开发体验。本文将通过实际代码示例，演示从零开始构建 Vue 3 + TypeScript 项目的完整流程。

项目初始化

安装依赖

bash
npm install -g @vue/cli

创建项目

bash
vue create vue-ts-demo
// 选择 TypeScript 和 CSS 预处理器

类型配置

tsconfig.json 配置

{
 "compilerOptions": {
   "target": "esnext",
   "module": "esnext",
   "strict": true,
   "moduleResolution": "node",
   "esModuleInterop": true,
   "skipLibCheck": true,
   "outDir": "dist"
 }
}

组件开发

HelloWorld 组件

vue

import { defineComponent, ref } from 'vue'; export default defineComponent({ name: 'HelloWorld', props: { name: { type: String as () => string, required: true } } });

路由配置

main.ts 配置

typescript
import { createApp } from 'vue';
import App from './App.vue';
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';

const router = createRouter({
 history: createWebHistory(),
 routes: [
   {
     path: '/',
     name: 'home',
     component: Home
   }
 ]
});

createApp(App).use(router).mount('#app');

总结

通过以上步骤，我们完成了 Vue 3 + TypeScript 项目的初始化、类型配置和基础组件开发。这种组合能够显著提升大型项目的可维护性和开发效率。