当前位置：首页 > web >正文

基于若依框架前端学习VUE和TS的核心内容

web 2025/9/7 12:28:45

Vue.js 基础

掌握Vue的核心概念：组件化开发、数据绑定、指令、计算属性、侦听器、生命周期钩子。理解单文件组件（SFC）的结构，包括<template>、<script>和<style>三部分的协作。

TypeScript 基础

学习TS的类型系统：接口、泛型、枚举、类型推断。掌握如何在Vue组件中定义Props、Emit事件和Ref的类型标注。了解模块化开发中如何通过import/export管理依赖。

若依框架特性

熟悉若依的前端架构设计：路由配置、权限控制、状态管理（Vuex/Pinia）、内置组件库。分析其登录流程、动态菜单生成和API封装层的实现逻辑。

工程化工具链

配置开发环境：Node.js、Vite/Webpack、ESLint、Prettier。学习调试技巧：浏览器DevTools、Vue Devtools、TS类型检查。掌握代码打包优化和部署流程。

后端接口调用实践

API模块封装

创建src/api目录统一管理接口，每个模块对应独立文件。使用Axios实例配置基础URL、请求拦截器（添加Token）和响应拦截器（错误处理）。示例：

// api/user.ts
import request from '@/utils/request';export function login(data: { username: string; password: string }) {return request({url: '/auth/login',method: 'post',data});
}

类型化请求响应

定义接口的请求参数和返回数据类型。结合若依的响应结构规范：

interface ApiResponse<T> {code: number;msg: string;data: T;
}interface UserInfo {userId: string;avatar: string;roles: string[];
}export function getUserInfo(): Promise<ApiResponse<UserInfo>> {return request.get('/user/info');
}

组件中调用接口

在Vue组件中使用async/await或Promise链式调用处理异步请求。注意错误捕获和加载状态管理：

<script setup lang="ts">
import { ref } from 'vue';
import { getUserInfo } from '@/api/user';const userData = ref<UserInfo>();
const loading = ref(false);const fetchData = async () => {try {loading.value = true;const res = await getUserInfo();userData.value = res.data;} finally {loading.value = false;}
};
</script>

跨域处理

开发环境配置代理解决跨域。修改vite.config.ts：

server: {proxy: {'/api': {target: 'http://backend-domain.com',changeOrigin: true,rewrite: path => path.replace(/^\/api/, '')}}
}

权限控制集成

在接口请求头中添加认证信息。若依的请求拦截器通常会自动处理，但需要确保本地存储中有有效的Token：

// src/utils/request.ts
instance.interceptors.request.use(config => {config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;return config;
});