福州仓山区天津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分支
五、展望
- 规范代码风格
- 将可复用样式块提取出来，减少重复代码、提升可维护性、提升性能