创新项目实训开发日志1-CSDN博客

本文链接：https://blog.csdn.net/c335000/article/details/146973142

一、开发简介

核心工作内容：完成基于Vue3 + Vite的前端框架搭建，建立符合团队协作规范的目录结构

工作时间：第六周

二、核心技术栈

分类	技术方案	版本	核心价值
核心框架	Vue3	3.3.4	Composition API + 响应式系统优化
构建工具	Vite	4.4.9	毫秒级热更新 + Rollup高效构建
状态管理	Pinia	2.2.1	模块化状态管理 + 类型推导支持
数据持久化	pinia-plugin-persistedstate	3.2.1	实现状态本地存储持久化
路由方案	Vue Router	4.4.2	动态路由 + 嵌套路由支持
UI框架	Element Plus	2.7.8	组件二次封装基础 + 主题定制能力
数据可视化	ECharts	5.5.1	复杂图表渲染解决方案
工具库	@vueuse/core	10.11.0	提供60+开箱即用的组合式API工具

三、框架设计

1.目录结构设计

根目录下的结构

package.json：定义项目元数据、脚本命令和依赖列表
package-lock.json：锁定依赖版本保证一致性
src/：项目核心源代码目录
vite.config.js：Vite构建工具的核心配置文件
index.html：应用主入口HTML文件
README.md：项目概述、使用说明等核心文档
.gitignore：指定Git版本控制忽略的文件/目录
public/：存放不需要构建的静态资源
node_modules/：存放所有npm安装的第三方依赖包
.vite：Vite构建工具的缓存目录

/src目录下的结构

api/：接口服务层，集中管理所有API请求，实现业务逻辑与网络请求的解耦
assets/：静态资源管理，存放图片、字体、样式等资源，提供全局可访问的公共资源
components/：存放可复用的 Vue 组件
router/：路由管理系统，定义应用路由配置
stores/：状态管理中心，实现状态持久化，提供全局数据访问
utils/：核心工具模块，封装通用工具函数，实现公共逻辑复用
views/：业务模块化设计，按业务模块划分，实现路由视图渲染
App.vue：应用根组件，提供全局布局
main.js：应用入口，注册全局插件，挂载根实例

2.核心模块实现

Pinia管理Token

import {defineStore} from 'pinia'
import {ref} from 'vue'

/**
 * Token 状态管理模块
 * 提供响应式的 token 状态，以及设置和清除 token 的方法
 */
export const useTokenStore = defineStore('token', () => {

    //1.响应式变量
    const token = ref('')

    //2.函数,修改token的值
    const setToken = (newToken) => {
        token.value = newToken
    }

    //3.函数,移除token的值
    const removeToken = () => {
        token.value = ''
    }

    return {
        token,
        setToken,
        removeToken
    }
}, {
    persist: true//持久化存储
});

Axios封装，添加请求拦截器、响应拦截器

import axios from 'axios';

import {ElMessage} from 'element-plus'
import {useTokenStore} from '@/stores/token.js'
import router from '@/router'

const baseURL = '/api';//跨域
const instance = axios.create({baseURL})

//添加请求拦截器
instance.interceptors.request.use((config) => {
    //请求前的回调
    //添加token
    const tokenStore = useTokenStore();

    //判断有没有token
    if (tokenStore.token) {
        config.headers.Authorization = tokenStore.token
    }
    return config;
}, (err) => {
    //请求错误的回调
    Promise.reject(err)
})

//添加响应拦截器
instance.interceptors.response.use(
    result => {
    //判断业务状态码
    //操作成功
    if (result.data.code === 0) {
        return result;
    }
    //操作失败
    if (result.data.message.length < 20) {
        ElMessage.error(result.data.message)
    }
    //异步操作的状态转换为失败
    return Promise.reject(result)

}, err => {
    //判断响应状态码,如果为401,则证明未登录,提示请登录,并跳转到登录页面
    if (err.response.status === 401) {
        ElMessage.error('请先登录')
        router.push('/login')
    } else {
        ElMessage.error('服务器异常')
    }

    return Promise.reject(err);//异步的状态转化成失败的状态
})

export default instance;

App.vue使用router-view

<!--组合式API-->
<script setup>//setup 是一个标识，告诉vue需要进行一些处理，让我们可以更简洁的使用组合式API
</script>

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

<style scoped>

</style>

Router定义路由

import {createRouter, createWebHistory} from 'vue-router';

//导入组件
import LoginVue from '@/views/auth/Login.vue';
import LayoutVue from '@/views/Layout.vue';
import HomeVue from '@/views/Home.vue'
import InformationVue from '@/views/personal/Information.vue'
import ChangeAvatarVue from '@/views/personal/ChangeAvatar.vue'
import ChangePasswordVue from '@/views/personal/ChangePassword.vue'


//定义路由关系
const routes = [
  { path: '/login', component: LoginVue },
  {
    path: '/',
    component: LayoutVue,
    redirect:'/home',
    children: [
      { path: '/home', component: HomeVue },
      { path: '/personal/Info', component: InformationVue },
      { path: '/personal/ChangeAvatar', component: ChangeAvatarVue },
      { path: '/personal/ChangePassword', component: ChangePasswordVue }
    ]
  }
];

//创建路由
const router = createRouter({
    history: createWebHistory(), routes: routes,
});

//导出路由
export default router;