Vue3和TypeScript怎么搭建完整的项目结构

这篇文章主要讲解了"Vue3和TypeScript怎么搭建完整的项目结构"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"Vue3和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怎么搭建完整的项目结构"的内容了，经过本文的学习后，相信大家对Vue3和TypeScript怎么搭建完整的项目结构这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！