Vue 3 + TypeScript实战：企业级前端项目开发全流程

Vue 3 + TypeScript实战：企业级前端项目开发全流程

Vue 3 和 TypeScript 的结合为企业级前端项目开发提供了强大的类型安全和高效的开发体验。本文将深入探讨如何使用 Vue 3 和 TypeScript 构建一个企业级前端项目，涵盖项目初始化、组件开发、状态管理、路由配置、API 请求等全流程，并提供实用的代码和表格示例分析。

一、项目初始化

1. 创建 Vue 3 项目并添加 TypeScript 支持

使用 Vue CLI 或 Vite 初始化项目，并添加 TypeScript 支持。

使用 Vue CLI：

vue create my-vue3-ts-app
# 选择 Manually select features，勾选 TypeScript

使用 Vite：

npm init vite@latest my-vue3-ts-app --template vue-ts
cd my-vue3-ts-app
npm install

2. 项目结构

一个典型的 Vue 3 + TypeScript 项目结构如下：

my-vue3-ts-app/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/
│   ├── store/
│   ├── router/
│   ├── services/
│   ├── App.vue
│   ├── main.ts
│   └── shims-vue.d.ts
├── package.json
└── tsconfig.json

二、组件开发

1. 基本组件示例

代码示例：一个简单的计数器组件

<template>
  <div>
    <p>{
  
   
   { count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'Counter',
  setup() {
    const count = ref<number>(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
});
</script>

2. Props 和 Emits

使用 TypeScript 定义组件的 props 和 emits，提供类型安全。

代码示例：

<template>
  <div>
    <p>{
  
   
   { title }}</p>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
  props: {
    title: {
      type: String,
      required: true
    }
  },
  emits: ['click'],
  setup(props, { emit }) {
    const handleClick = () => {
      emit('click');
    };

    return {
      handleClick
    };
  }
});
</script>

三、状态管理

使用 Pinia 作为状态管理库，它是 Vue 的官方状态管理库，支持 TypeScript。

1. 安装 Pinia

npm install pinia

2. 创建 Store

代码示例：

// src/store/useCounterStore.ts