导航：首页 > 开发技术 >

Vue3+TypeScript完整项目的方法教程

发表于：2026-11-01 作者：千家信息网编辑

千家信息网最后更新 2026年11月01日，本篇内容主要讲解"Vue3+TypeScript完整项目的方法教程"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"Vue3+TypeScript完整项目的方

千家信息网最后更新 2026年11月01日Vue3+TypeScript完整项目的方法教程

本篇内容主要讲解"Vue3+TypeScript完整项目的方法教程"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"Vue3+TypeScript完整项目的方法教程"吧!

一个完整的Vue3+Ts项目,支持.vue和.tsx写法

TypeScript 是JS的一个超集，主要提供了类型系统和对ES6的支持，使用 TypeScript 可以增加代码的可读性和可维护性，在 react 和 vue 社区中也越来越多人开始使用TypeScript。从最近发布的 Vue3 正式版本来看， Vue3 的源码就是用 TypeScript 编写的，更好的 TypeScript 支持也是这一次升级的亮点。当然，在实际开发中如何正确拥抱 TypeScript 也是迁移至 Vue3 的一个小痛点，这里就针对 Vue3 和 TypeScript 展开一些交流。

96.8%的代码都是TypeScript，支持的力度也是相当大?

项目搭建

在官方仓库的 Quickstart 中推荐用两种方式方式来构建我们的 SPA 项目：

vite

npm init vite-app sail-vue3 # OR yarn create vite-app sail-vue3

vue-cli

npm install -g @vue/cli # OR yarn global add @vue/clivue create sail-vue3# select vue 3 preset

vite 是一个由原生ESM驱动的Web开发构建工具，打开 vite 依赖的 package.json 可以发现在 devDependencies 开发依赖里面已经引入了TypeScript ，甚至还有 vuex , vue-router , less , sass 这些本地开发经常需要用到的工具。vite 轻量，开箱即用的特点，满足了大部分开发场景的需求，作为快速启动本地 Vue 项目来说，这是一个非常完美的工具。

后面的演示代码也是用vite搭的

从 vue2.x 走过来的掘友肯定知道 vue-cli 这个官方脚手架， vue3 的更新怎么能少得了 vue-cli 呢， vue-cli 更强调的是用 cli 的方式进行交互式的配置，选择起来更加灵活可控。丰富的官方插件适配，GUI的创建管理界面，标准化开发流程，这些都是 vue-cli 的特点。

vue-cli ✖ TypeScript STEP1

vue-cli ✖ TypeScript STEP2

想要预装TypeScript，就需要选择手动配置，并check好TypeScript

忘记使用选择 TypeScript 也没事，加一行cli命令就行了

vue add typescript

最后，别忘了在 .vue 代码中，给 script 标签加上 lang="ts"

tsx写法

import { ref, reactive } from "vue"; import { AddressList, NavBar, Toast, Popup } from "vant"; import AddressEdit from './AddressEdit' import router from '@/router'  export default {   setup() {     const chosenAddressId = ref('1')     const showEdit = ref(false)      const list = reactive([       {         id: '1',         name: '张三',         tel: '13000000000',         address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',         isDefault: true,       },       {         id: '2',         name: '李四',         tel: '1310000000',         address: '浙江省杭州市拱墅区莫干山路 50 号',       },     ])     const disabledList = reactive([       {         id: '3',         name: '王五',         tel: '1320000000',         address: '浙江省杭州市滨江区江南大道 15 号',       },     ])      const onAdd = () => {       showEdit.value = true     }     const onEdit = (item: any, index: string) => {       Toast('编辑地址:' + index);     }      const onClickLeft = () => {       router.back()     }      const onClickRight = () => {       router.push('/todoList')     }      return () => {       return (                                                                           
       );     };   } };

到此，相信大家对"Vue3+TypeScript完整项目的方法教程"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

很赞哦！