青岛官网建站_哪个网站可以免费看小说不收费_抖音推广引流平台_嘉兴seo外包服务商

一、开发简介

核心工作内容：完成基于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) => {//请求前的回调//添加tokenconst tokenStore = useTokenStore();//判断有没有tokenif (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;

四、上传gitee

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

五、展望

• 规范代码风格
• 将可复用样式块提取出来，减少重复代码、提升可维护性、提升性能