异常教程

vite vue ts（长文解析）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在现代前端开发领域，Vite Vue TS的组合逐渐成为开发者构建高效、可维护项目的首选方案。Vite 的闪电启动速度、Vue 的声明式语法，以及 TypeScript 的类型安全保障，三者结合能够显著提升开发体验和代码质量。本文将从零开始，逐步讲解如何利用这一技术栈搭建项目，并深入剖析其核心原理与实践技巧，帮助初学者和中级开发者快速掌握这一组合的使用方法。

一、环境搭建：从零开始配置项目

1.1 安装 Vite 并初始化项目

Vite 是新一代前端构建工具，其核心优势在于无需打包即可开发。与传统构建工具相比，Vite 的冷启动时间可缩短至毫秒级。以下是创建项目的命令：

npm create vite@latest my-vue-ts-project -- --template vue-ts  
cd my-vue-ts-project  
npm install

执行上述命令后，Vite 会根据模板自动生成包含 Vue 和 TypeScript 的项目结构。项目目录中 src 文件夹内的 main.ts 是入口文件，App.vue 是根组件。

1.2 项目结构解析

典型的 Vite Vue TS 项目结构如下：

文件/目录作用描述
vite.config.tsVite 配置文件，用于自定义构建行为
tsconfig.jsonTypeScript 编译配置文件
src源代码目录，包含组件、路由、样式等模块
public存放静态资源（如 favicon.ico）

比喻：可以将 vite.config.ts 比作快递公司的分拣中心，负责将代码文件按照规则打包成最终的交付物；而 tsconfig.json 则像一位严格的质检员，确保代码符合类型规范。

二、核心概念：Vue 的声明式编程与 TypeScript 的类型系统

2.1 Vue 的组件化开发

Vue 的核心思想是通过组件化将页面拆解为可复用的模块。例如，创建一个 HelloWorld.vue 组件：

<template>  
  <div class="hello">  
    <h1>{{ msg }}</h1>  
    <button @click="increment">Count: {{ count }}</button>  
  </div>  
</template>  

<script setup lang="ts">  
import { ref } from 'vue'  

const msg = 'Hello Vite Vue TS!'  
const count = ref(0)  
const increment = () => count.value++  
</script>  

<style scoped>  
.hello {  
  padding: 20px;  
  background-color: #f0f0f0;  
}  
</style>

关键点：

  • <script setup> 是 Vue 3 推荐的语法糖，简化了组合式 API 的书写
  • ref 是 Vue 的响应式基础类型，用于追踪数据变化
  • <style scoped> 保证样式仅作用于当前组件

比喻：组件就像乐高积木，每个块都有明确的功能和接口，组合起来就能构建复杂的应用。

2.2 TypeScript 的类型推导与显式声明

TypeScript 通过类型系统帮助开发者在编码阶段发现潜在错误。例如在 Vue 组件中定义 props：

// 在组件中定义 props  
const props = withDefaults(defineProps<{  
  title: string  
  disabled?: boolean  
}>(), {  
  disabled: false  
})

核心优势：

  • 类型推导：无需手动标注基础类型（如 string、number）
  • 接口约束：通过 defineProps 和接口定义复杂数据结构
  • 类型守卫：利用 is 运算符处理联合类型（Union Type）

案例：假设有一个 User 接口，可以通过以下方式强制类型检查：

interface User {  
  id: number  
  name: string  
  age?: number  
}  

// 错误示例：缺少 id 字段  
const user: User = { name: 'Alice' } // 编译时会报错

三、进阶实践：优化与性能调优

3.1 Vite 的按需加载与代码分割

Vite 默认支持 ES Modules 的原生按需加载，但大型项目仍需手动配置代码分割：

// vite.config.ts  
import { defineConfig } from 'vite'  
import vue from '@vitejs/plugin-vue'  

export default defineConfig({  
  plugins: [vue()],  
  optimizeDeps: {  
    include: ['vue', 'vue-router', 'pinia'] // 预构建常用依赖  
  },  
  build: {  
    rollupOptions: {  
      output: {  
        manualChunks: {  
          vue: ['vue', '@vue/runtime-dom'] // 按需拆分代码包  
        }  
      }  
    }  
  }  
})

效果对比：经过代码分割的项目，首屏加载时间可减少 30% 以上。

3.2 Vue 的响应式系统优化

避免在模板中直接调用复杂计算，改用 computed 属性：

<script setup lang="ts">  
import { ref, computed } from 'vue'  

const items = ref<number[]>([1, 2, 3, 4, 5])  
const evenNumbers = computed(() => items.value.filter(num => num % 2 === 0))  
</script>  

<template>  
  <ul>  
    <li v-for="num in evenNumbers" :key="num">{{ num }}</li>  
  </ul>  
</template>

原理：computed 会自动缓存计算结果，只有当依赖的 items 发生变化时才会重新执行。

四、实战案例：构建一个 Todo List 应用

4.1 项目需求分析

实现一个支持以下功能的 Todo 应用：

  1. 添加待办事项
  2. 标记已完成状态
  3. 清除已完成项

4.2 核心代码实现

4.2.1 定义数据类型

// src/types.ts  
export interface Todo {  
  id: number  
  text: string  
  completed: boolean  
}

4.2.2 组件逻辑实现

<!-- src/components/TodoList.vue -->  
<template>  
  <div>  
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="输入待办事项..." />  
    <ul>  
      <li v-for="todo in filteredTodos" :key="todo.id">  
        <input type="checkbox" v-model="todo.completed" />  
        <span :class="{ completed: todo.completed }">{{ todo.text }}</span>  
      </li>  
    </ul>  
    <button @click="clearCompleted" :disabled="!hasCompleted">清除已完成</button>  
  </div>  
</template>  

<script setup lang="ts">  
import { ref, computed } from 'vue'  
import type { Todo } from '@/types'  

const newTodo = ref('')  
const todos = ref<Todo[]>([])  

const addTodo = () => {  
  if (newTodo.value.trim()) {  
    todos.value.push({  
      id: Date.now(),  
      text: newTodo.value,  
      completed: false  
    })  
    newTodo.value = ''  
  }  
}  

const filteredTodos = computed(() => todos.value)  
const hasCompleted = computed(() => todos.value.some(t => t.completed))  

const clearCompleted = () => {  
  todos.value = todos.value.filter(t => !t.completed)  
}  
</script>

4.2.3 样式增强

.completed {  
  text-decoration: line-through;  
  color: #888;  
}

五、常见问题与解决方案

5.1 开发环境报错：TS2304 Cannot find name 'xxx'

原因：TypeScript 未正确识别全局变量或第三方库类型定义
解决方法：

  1. 在 tsconfig.json 中添加 "types": ["vue"]
  2. 安装类型定义包（如 npm install @types/jquery --save-dev）

5.2 构建后生产环境体积过大

优化建议：

  • 使用 vite-plugin-compression 压缩静态资源
  • 在 vite.config.ts 中启用 tree-shaking： 
    build: {  
  minify: 'esbuild',  
  sourcemap: false  
}

六、总结与展望

通过本文的讲解，我们系统学习了 Vite Vue TS 技术栈的核心概念与实践方法。从环境搭建到代码优化，每个环节都体现了这一组合的高效性与灵活性：

  • Vite 的即时开发体验显著提升了迭代速度
  • Vue 的组件化设计降低了代码维护成本
  • TypeScript 的类型系统减少了运行时错误

对于初学者，建议从简单组件开始，逐步实践响应式系统和路由管理；中级开发者则可深入探索自定义指令、服务端渲染等高级功能。随着前端生态的持续发展，掌握这一技术栈将为开发者带来长期的竞争优势。

后续学习建议：

  1. 探索 Vue 的 <script setup> 语法与 Composition API 的更多用法
  2. 结合 Pinia 实现状态管理
  3. 学习 Vite 的插件开发机制，自定义构建流程

希望本文能成为您掌握 Vite Vue TS 的坚实起点！

最新发布

查看更多文章