Vue3.0+TypeScript+Vite6+Ant-Design-Vue

sibylyue

809人浏览 · 2025-12-16 13:34:37

sibylyue · 2025-12-16 13:34:37 发布

TypeScript和JavaScript

ECMAScript（ES）是 JavaScript 的标准化规范，不同版本（ES5、ES6/ES2015 及后续）新增了大量语法特性，使用ES6

微软开发的开源编程语言，是 JavaScript 的超集（Superset），

TS 包含 JS 所有语法和特性，可直接编写 JS 代码；
TS 在 JS 基础上增加了静态类型系统，能在代码编写阶段发现类型错误，最终会被编译为纯 JS 运行（浏览器 / Node.js 仅识别 JS）。

特性	JavaScript	TypeScript
类型系统	动态类型（运行时校验，变量类型可随意改变）	静态类型（编译时校验，变量类型声明后不可随意改变）
类型校验	无（仅运行时报错，如调用不存在的方法）	有（编译时提示类型错误，提前规避 bug）
语法扩展	仅 ES 标准语法	新增：类型注解、接口、泛型、枚举等
开发体验	无类型提示，依赖文档 / 记忆	编辑器智能提示（如 VS Code），重构更安全
学习成本	低（仅需掌握 ES 语法）	中（需额外学习类型系统）
运行方式	直接运行（浏览器 / Node.js）	需编译为 JS 后运行（tsc 编译器）
适用场景	小型项目、快速原型开发	中大型项目、团队协作、框架开发（如 Vue3/React）

基础语法示例

1. 变量类型声

// 基础类型
let num: number = 10; // 数字
let str: string = "TypeScript"; // 字符串
let isDone: boolean = false; // 布尔值
let arr: number[] = [1, 2, 3]; // 数字数组（也可写 Array<number>）
let tuple: [string, number] = ["age", 20]; // 元组（固定长度+类型）

// 任意类型（避免滥用，失去TS优势）
let anyVal: any = "hello";
anyVal = 123;

2. 函数类型

// 显式声明参数和返回值类型
function add(a: number, b: number): number {
  return a + b;
}

// 可选参数（?）和默认参数
function greet(name: string, age?: number): string {
  return age ? `Hello ${name}, age ${age}` : `Hello ${name}`;
}

// 函数类型别名
type Calc = (x: number, y: number) => number;
const multiply: Calc = (x, y) => x * y;

3. 接口（约束对象结构）

interface User {
  id: number;
  name: string;
  age?: number; // 可选属性
  readonly isAdmin: boolean; // 只读属性
}

const user: User = {
  id: 1,
  name: "张三",
  isAdmin: false,
};
// user.isAdmin = true; // 报错：只读属性不可修改

4. 泛型（复用类型逻辑）

// 泛型函数：支持任意类型的数组第一个元素获取
function getFirst<T>(arr: T[]): T {
  return arr[0];
}

const firstNum = getFirst<number>([1, 2, 3]); // 1
const firstStr = getFirst<string>(["a", "b"]); // "a"

编译配置（tsconfig.json）

{
  "compilerOptions": {
    "target": "ES6", // 编译目标JS版本
    "module": "ESNext", // 模块系统
    "outDir": "./dist", // 编译输出目录
    "strict": true, // 开启严格类型检查（推荐）
    "esModuleInterop": true // 兼容CommonJS模块
  },
  "include": ["./src/**/*"], // 要编译的文件
  "exclude": ["node_modules"] // 排除的文件
}

Node.js

https://nodejs.org/zh-cn/learn/getting-started/introduction-to-nodejs

基于 Chrome V8 引擎的 JavaScript 运行时环境，让 JavaScript 可以脱离浏览器运行在服务器端。它采用非阻塞 I/O（异步）和事件驱动架构。

package.json 是前端项目（尤其是基于 Node.js 生态的项目，如 Vue/React/Angular）的核心配置文件，定义项目基础信息，管理项目依赖（最核心作用，执行 npm install 时，工具会根据这里的配置自动下载对应版本的依赖到 node_modules 目录），定义脚本命令（自定义操作，通过 npm run <命令名> 执行），配置项目运行 / 构建规则，声明项目入口和输出（可选）等

Vue3

https://cn.vuejs.org/guide/introduction.html

创建一个 Vue 应用：https://cn.vuejs.org/guide/essentials/application.html

<template></template> 
//模板尽可能简单
<script lang="ts"></script>
<style></style>

Axios 是基于 Promise 的 HTTP 客户端，支持浏览器和 Node.js，可拦截请求 / 响应、转换数据、取消请求等，是前端开发中最常用的请求库之一

Vite前端构建工具

https://cn.vitejs.dev/guide/ 由尤雨溪开发，Vite项目中，index.html是项目入口文件，加载完index.html，vite解析<script type="module" src="/src/main.ts"></script>指向js

主要由两部分组成开发服务器：基于原生 ES 模块（ESM）实现，启动时不打包全部代码，而是按需编译，冷启动速度极快；同时支持热模块替换（HMR），更新代码时仅重新编译变更模块，响应毫秒级。构建打包：生产环境下基于 Rollup 打包，内置优化（如自动拆分公共代码、Tree-shaking、CSS 处理等），兼顾打包体积和性能。

Vite 仅执行 .ts 文件的转译工作，并不执行任何类型检查

Ant-Design-Vue

https://ant.design/docs/react/customize-theme-cn

提供了丰富、可复用的高质量 UI 组件，覆盖表单、表格、弹窗、导航、数据可视化等 80+ 组件，广泛用于中后台系统开发

ant-design-vue@3.x+ 适配 Vue 3（推荐），基于 Vue 3 的 Composition API 重构。

Vue 3.0 工程化适配

构建工具：推荐 Vite（原生支持 Vue 3，热更新速度比 Webpack 快 10~100 倍），也兼容 Webpack；
UI 框架：Ant-Design-Vue 4.x、Element Plus、Naive UI 等均基于 Vue 3 开发；
路由 / 状态管理：vue-router@4、pinia（Vue 3 官方推荐，替代 Vuex，TypeScript 友好）

Vue3.0+TypeScript+Vite6+Ant-Design-Vue项目搭建

1. 环境准备

确保已安装 node.js（≥16.0.0）和 npm/yarn/pnpm，推荐使用 pnpm（性能更优）：

# 安装pnpm（可选）
npm install -g pnpm

2. 初始化 Vite + Vue3 + TS 项目

# 创建项目（指定框架和语言）
pnpm create vite vue3-ts-antdv-demo --template vue-ts

# 进入项目目录
cd vue3-ts-antdv-demo

# 安装依赖
pnpm install

# 安装 Ant-Design-Vue（最新稳定版）
pnpm install ant-design-vue@4.x

# 安装 unplugin-vue-components（自动导入组件，减少手动引入）
pnpm install unplugin-vue-components -D

3. 配置 Vite（vite.config.ts）

整合 Ant-Design-Vue 自动导入、路径别名等核心配置：

//从 vite 库中导入 defineConfig 函数
import { defineConfig } from 'vite'
//导入 Vite 官方 Vue 插件
import vue from '@vitejs/plugin-vue'
//导入 Node.js 内置的 path 模块
import path from 'path'
//导入 unplugin-vue-components 的 Vite 适配版本；实现 Vue 组件的自动按需导入（无需手动写 //import { Button } from 'ant-design-vue'）；
import Components from 'unplugin-vue-components/vite'
//导入 Ant Design Vue 组件解析器
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

//导出 Vite 配置（核心）,Vite 启动时会读取该导出的配置对象，覆盖默认配置
export default defineConfig({
  plugins: [
    vue(),//启动vue插件
    // 自动导入 Ant-Design-Vue 组件（无需手动 import）
    Components({
      resolvers: [
        AntDesignVueResolver({
          importStyle: 'less', // 按需加载样式（需安装 less）
          resolveIcons: true // 自动导入图标
        })
      ]
    })
  ],
  resolve: {
    // 路径别名
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  css: {
    preprocessorOptions: {
      less: {
        // 支持 Ant-Design-Vue 主题定制
        javascriptEnabled: true,
        modifyVars: {
          '@primary-color': '#1890ff', // 自定义主色（可选）
          '@success-color': '#52c41a'
        }
      }
    }
  },
  server: {
    port: 3000,
    open: true // 启动后自动打开浏览器
  }
})

4. 配置 tsconfig.json（路径别名识别）

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    // 路径别名配置
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

二、Demo 实现（核心功能示例）

以下实现「用户列表展示 + 新增 / 删除用户 + 表单验证」的基础 Demo，覆盖 Ant-Design-Vue 常用组件（Table、Form、Button、Modal 等）。

1. 类型定义（src/types/user.ts）

typescript

运行

// 用户类型声明
export interface User {
  id: number
  name: string
  age: number
  email: string
  createTime: string
}

// 新增用户表单类型
export interface UserForm {
  name: string
  age: number
  email: string
}

2. 组合式函数（src/composables/useUser.ts）

封装用户数据逻辑，复用性更强：

typescript

运行

import { ref, reactive } from 'vue'
import type { User, UserForm } from '@/types/user'
import { message } from 'ant-design-vue'

export function useUser() {
  // 用户列表数据
  const userList = ref<User[]>([
    {
      id: 1,
      name: '张三',
      age: 25,
      email: 'zhangsan@example.com',
      createTime: '2025-01-01'
    },
    {
      id: 2,
      name: '李四',
      age: 30,
      email: 'lisi@example.com',
      createTime: '2025-02-01'
    }
  ])

  // 新增用户弹窗显隐
  const modalVisible = ref(false)

  // 表单数据 + 验证规则
  const formData = reactive<UserForm>({
    name: '',
    age: 0,
    email: ''
  })
  const formRules = reactive({
    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    age: [
      { required: true, message: '请输入年龄', trigger: 'blur' },
      { type: 'number', min: 1, max: 120, message: '年龄需在1-120之间', trigger: 'blur' }
    ],
    email: [
      { required: true, message: '请输入邮箱', trigger: 'blur' },
      { type: 'email', message: '请输入合法邮箱', trigger: 'blur' }
    ]
  })

  // 新增用户
  const addUser = () => {
    const newUser: User = {
      id: Date.now(), // 用时间戳生成唯一ID
      name: formData.name,
      age: formData.age,
      email: formData.email,
      createTime: new Date().toLocaleDateString()
    }
    userList.value.push(newUser)
    modalVisible.value = false
    // 重置表单
    formData.name = ''
    formData.age = 0
    formData.email = ''
    message.success('新增用户成功！')
  }

  // 删除用户
  const deleteUser = (id: number) => {
    userList.value = userList.value.filter(item => item.id !== id)
    message.success('删除用户成功！')
  }

  return {
    userList,
    modalVisible,
    formData,
    formRules,
    addUser,
    deleteUser
  }
}

3. 页面组件（src/views/UserList.vue）

vue

<template>
  <div class="user-list-container" style="padding: 20px;">
    <!-- 顶部操作栏 -->
    <div class="header" style="margin-bottom: 20px;">
      <a-button type="primary" @click="modalVisible = true">
        <template #icon><plus-outlined /></template>
        新增用户
      </a-button>
    </div>

    <!-- 用户列表 -->
    <a-table
      :columns="columns"
      :data-source="userList"
      row-key="id"
      bordered
      style="width: 100%;"
    >
      <template #operation="{ record }">
        <a-button type="primary" danger @click="deleteUser(record.id)">
          删除
        </a-button>
      </template>
    </a-table>

    <!-- 新增用户弹窗 -->
    <a-modal
      v-model:open="modalVisible"
      title="新增用户"
      @ok="addUser"
      @cancel="modalVisible = false"
    >
      <a-form
        :model="formData"
        :rules="formRules"
        layout="vertical"
        ref="formRef"
      >
        <a-form-item label="姓名" name="name">
          <a-input v-model:value="formData.name" placeholder="请输入姓名" />
        </a-form-item>
        <a-form-item label="年龄" name="age">
          <a-input-number v-model:value="formData.age" placeholder="请输入年龄" style="width: 100%;" />
        </a-form-item>
        <a-form-item label="邮箱" name="email">
          <a-input v-model:value="formData.email" placeholder="请输入邮箱" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { PlusOutlined } from '@ant-design/icons-vue'
import { useUser } from '@/composables/useUser'
import type { User } from '@/types/user'
import type { FormInstance } from 'ant-design-vue'

// 获取组合式函数中的数据和方法
const { userList, modalVisible, formData, formRules, addUser, deleteUser } = useUser()

// 表单Ref（用于验证，可选）
const formRef = ref<FormInstance>()

// 表格列配置
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age'
  },
  {
    title: '邮箱',
    dataIndex: 'email',
    key: 'email'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime'
  },
  {
    title: '操作',
    key: 'operation',
    slots: { customRender: 'operation' }
  }
]
</script>

4. 入口文件配置（src/main.ts）

typescript

运行

import { createApp } from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue' // 全局引入（或依赖自动导入）
import 'ant-design-vue/dist/reset.css' // 全局样式

const app = createApp(App)
app.use(Antd)
app.mount('#app')

5. 根组件（src/App.vue）

vue

<template>
  <router-view />
</template>

<script setup lang="ts">
// 空，仅作为路由出口
</script>

6. 路由配置（src/router/index.ts）

bash

运行

# 安装路由依赖
pnpm install vue-router@4

typescript

运行

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import UserList from '@/views/UserList.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'UserList',
    component: UserList
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

修改 main.ts 引入路由：

typescript

运行

import router from './router' // 新增
// ...
app.use(router) // 新增
app.mount('#app')

三、运行项目

bash

运行

pnpm dev

访问 http://localhost:3000 即可看到 Demo 效果：

展示用户列表表格；
点击「新增用户」弹出表单，带字段验证；
点击「删除」可移除对应用户；
操作后有 Ant-Design-Vue 的消息提示。

四、关键说明

Ant-Design-Vue 样式：v4 版本需引入 reset.css 替代旧版 antd.css；
自动导入：unplugin-vue-components 会自动识别模板中的 Antd 组件，无需手动 import；
类型安全：所有数据、表单、函数都通过 TS 约束，编译阶段即可发现类型错误；
主题定制：可在 vite.config.ts 的 modifyVars 中修改 Antd 主题色、圆角等样式变量。

下一步迭代建议

需要我为你补充该 Demo 的「用户编辑功能」和「Ant-Design-Vue 主题定制完整示例」吗？

Vue 3.0（也称为 Vue Next）是 Vue 框架的重大版本升级，于 2020 年 9 月发布，核心围绕性能提升、可维护性增强、对 TypeScript 友好、组合式 API（Composition API） 重构，同时保持对 Vue 2 的渐进式兼容。以下是 Vue 3.0 的核心特性、架构变化和核心用法总结：

一、Vue 3.0 核心架构变化

1. 源码重写（TypeScript + 模块化）

源码完全基于 TypeScript 编写，自带完整类型定义，无需第三方类型包；
采用 Monorepo（单仓库多包）管理，拆分出reactivity（响应式）、compiler-core（编译器核心）、runtime-core（运行时核心）等独立模块，按需引入，减小打包体积。

2. 响应式系统重构

替换 Vue 2 的Object.defineProperty，改用 ES6 的Proxy实现响应式：
- 支持监听数组索引 / 长度变化、对象新增属性（无需Vue.set）；
- 支持Map/Set等复杂数据类型的响应式；
- 响应式粒度更细，性能提升约 1.5~2 倍。

二、Vue 3.0 核心特性

1. 组合式 API（Composition API）

Vue 3 的标志性特性，解决 Vue 2 Options API 在大型组件中「逻辑分散、复用困难」的问题：

核心 API：setup()（组件入口）、ref（基本类型响应式）、reactive（引用类型响应式）、computed、watch、watchEffect等；
逻辑复用：通过组合式函数（Composables）抽离通用逻辑（如分页、表单验证），替代 Vue 2 的 mixins（无命名冲突、类型友好）；

示例：

vue

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

// 基本类型响应式
const count = ref<number>(0)
// 计算属性
const double = computed(() => count.value * 2)
// 方法
const increment = () => count.value++
</script>

<template>
  <div>{{ count }} → {{ double }}</div>
  <button @click="increment">+1</button>
</template>

2. 更好的 TypeScript 支持

<script setup lang="ts"> 语法糖，无需手动导出 / 注册组件，TS 类型推断更精准；
defineProps/defineEmits 原生支持 TS 类型约束（无需装饰器）；
全局 API（如createApp）、组件生命周期都有完整类型提示。

3. 性能优化

编译器优化：
- 静态提升：静态节点 / 属性编译时提取，避免每次渲染重新创建；
- PatchFlags：标记动态节点，更新时只遍历动态内容，减少 DOM 操作；
- 缓存事件处理函数，避免不必要的重新渲染。
体积优化：Tree-shaking 支持更彻底，最小打包体积（仅运行时）约 10KB（Vue 2 约 20KB）。

4. 其他特性

Teleport（传送门）：将组件渲染到 DOM 树的任意位置（如弹窗 / 模态框脱离父组件样式限制）；
Suspense：异步组件加载时显示兜底内容（如骨架屏）；
多根节点组件：模板支持多个根节点（无需外层div包裹）；
生命周期调整：新增onRenderTracked/onRenderTriggered（调试用），beforeDestroy→onBeforeUnmount、destroyed→onUnmounted（语义更清晰）。

三、Vue 3.0 常用语法对比（VS Vue 2）

功能	Vue 2 (Options API)	Vue 3 (Composition API)
组件入口	`export default { ... }`	`<script setup>`（语法糖）
响应式数据	`data() { return { count: 0 } }`	`const count = ref(0)`
计算属性	`computed: { double() {} }`	`const double = computed(() => count.value * 2)`
监听数据	`watch: { count() {} }`	`watch(count, (newVal) => {})`
组件传参	`props: { name: String }`	`const props = defineProps<{ name: string }>()`

四、Vue 3.0 工程化适配

构建工具：推荐 Vite（原生支持 Vue 3，热更新速度比 Webpack 快 10~100 倍），也兼容 Webpack；
UI 框架：Ant-Design-Vue 4.x、Element Plus、Naive UI 等均基于 Vue 3 开发；
路由 / 状态管理：vue-router@4、pinia（Vue 3 官方推荐，替代 Vuex，TypeScript 友好）。

五、Vue 3.0 迁移注意事项

渐进式升级：可通过@vue/compat兼容包，在 Vue 3 项目中运行 Vue 2 代码；
废弃特性：Vue.prototype（改用app.config.globalProperties）、filter（推荐用计算属性替代）、$on/$off（移除，改用第三方事件库）；
生命周期：beforeCreate/created 合并到setup()，无需显式声明。

AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

2026企业微信AI Agent实测：7款技术方案对比

会话审计、敏感词管理、聊天质检、敏感行为识别、舆情、属性、词频及竞品分析覆盖服务风险；线索公海、客户、产品、商机、订单、回款、发票和业绩目标则连接销售全过程。快创助手负责快速建运营任务，策略生成把目标拆成方案，智能客服回答系统使用咨询，数据报表处理自然语言查数，AI洞察联合标签、订单和会话分析客户。我们设计了客户筛选、订单关联、销售交接、会话质检和异常恢复任务，配合技术访谈与行业公开资料复核。准备