创新项目实训开发日志1

一、开发简介

核心工作内容:完成基于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
javascript 复制代码
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封装,添加请求拦截器、响应拦截器
javascript 复制代码
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
javascript 复制代码
<!--组合式API-->
<script setup>//setup 是一个标识,告诉vue需要进行一些处理,让我们可以更简洁的使用组合式API
</script>

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

<style scoped>

</style>
  • Router定义路由
javascript 复制代码
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;

四、上传gitee

  • 在gitee中,创建Web分支用来集成前端最新开发代码
  • 将稳定的前端框架代码合并到Web分支
  • master分支合并Web分支

五、展望

  • 规范代码风格
  • 将可复用样式块提取出来,减少重复代码、提升可维护性、提升性能
相关推荐
灵感__idea4 分钟前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴1 小时前
Mix
前端·webgl
代码续发1 小时前
前端组件梳理
前端
试图让你心动2 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_2 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈不知代码2 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记2 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏3 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数3 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante3 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端