用 Vue3 写一个销售管理系统

第一章 Vue3 核心语法与前端基础速览在动手前我们先建立扎实的语言基础。1.1 组合式 API 与script setupVue3 推荐使用组合式 API它将相关逻辑集中在一起。script setup更是让代码极度简洁script setup import { ref } from vue const msg ref(Hello Vue3) /script1.2 响应式核心refvsreactiveref包装基本类型或对象访问需.value适合独立值。reactive只能接收对象直接访问属性适合表单数据。const count ref(0) const form reactive({ name: , age: 18 })易错点reactive不能直接整个替换如form xxx否则会丢失响应用Object.assign(form, xxx)。1.3 计算属性和侦听器computed有缓存依赖变化才重算适合筛选、求和。watch用于监听数据变化执行副作用如搜索防抖。const filtered computed(() list.value.filter(i i.name.includes(keyword.value))) watch(filtered, (newVal) { /* 数据上报 */ })1.4 组件通信父传子defineProps子传父defineEmitsconst props defineProps([goods]) const emit defineEmits([add-to-cart])1.5 生命周期onMounted、onUnmounted是最常用的注意在onUnmounted清理定时器和事件监听。1.6 路由和状态管理Vue Router 4 的createRoutercreateWebHistoryPinia 的defineStore比 Vuex 更轻// router const router createRouter({ history: createWebHistory(), routes }) // store export const useStore defineStore(main, { state: () ({ count: 0 }), actions: { increment() { this.count } } })第二章 项目搭建与工程规范2.1 创建项目npm create vitelatest sell-vue3 -- --template vue安装依赖npm install vue-router4 pinia axios element-plus为什么要用 Vite启动快开发体验好。2.2 目录结构src/├── api/ # 接口封装│ ├── request.js│ ├── auth.js│ ├── goods.js│ └── order.js├── assets/ # 静态资源├── components/ # 通用组件│ ├── StarBackground.vue│ ├── Carousel.vue│ ├── Modal.vue│ ├── Pagination.vue│ └── SearchBar.vue├── router/ # 路由配置│ └── index.js├── stores/ # Pinia状态│ ├── user.js│ └── cart.js├── views/│ ├── Login.vue│ ├── Register.vue│ ├── Home.vue│ ├── GoodsList.vue│ ├── GoodsDetail.vue│ ├── Cart.vue│ ├── OrderList.vue│ └── Statistics.vue├── App.vue└── main.js原则页面负责组装组件负责复用API层统一请求状态层共享数据。第三章 认证与权限登录、注册、路由守卫3.1 登录/注册功能实现逻辑表单v-model绑定提交前做校验正则。调用 API 成功后保存 token 到localStorage同时更新 Pinia user store。跳转至原计划页面如redirect参数。易错点校验规则要健壮如密码长度、邮箱格式。// views/Register.vue 部分 const form reactive({ username: , password: , confirm: }) function validate() { if (form.password ! form.confirm) { alert(两次密码不一致) return false } return true }3.2 路由守卫实现逻辑在router.beforeEach中检查to.meta.requiresAuth和是否登录。同时处理“已登录访问登录页”的重定向。router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.meta.requiresAuth !token) next(/login) else if (to.path /login token) next(/) else next() })3.3 退出登录逻辑清除 token调用注销接口跳转登录页。第四章 网络请求封装axios 拦截器4.1 为什么封装统一设置baseURL、超时。自动附加 token。统一错误处理避免每个页面重复代码。4.2 实现// api/request.js import axios from axios import { ElMessage } from element-plus const request axios.create({ baseURL: /api, timeout: 5000 }) // 请求拦截加 token request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) config.headers.Authorization Bearer ${token} return config }) // 响应拦截统一处理业务状态码 request.interceptors.response.use( response { const { code, data, msg } response.data if (code 200) return data ElMessage.error(msg) return Promise.reject(new Error(msg)) }, error { if (error.response?.status 401) { localStorage.removeItem(token) router.push(/login) // 或 location.href } ElMessage.error(error.response?.data?.msg || 网络错误) return Promise.reject(error) } )易错点拦截器返回的内容要与页面代码对齐避免双重弹窗。第五章 商品展示列表、搜索、筛选、分页5.1 列表获取onMounted中调用 API用ref接收数据。5.2 搜索与筛选computed输入关键字实时过滤结合分类下拉框const keyword ref() const category ref(all) const filteredList computed(() { return goodsList.value.filter(item { const matchKeyword item.name.toLowerCase().includes(keyword.value.toLowerCase()) const matchCategory category.value all || item.category category.value return matchKeyword matchCategory }) })易错点includes区分大小写需转换筛选条件多时可用every组合。5.3 分页使用slice或后端分页。前端分页适合小数据量后端分页适合大数据。const page ref(1) const pageSize ref(8) const pageData computed(() filteredList.value.slice((page.value-1)*pageSize.value, page.value*pageSize.value))易错点当筛选条件变化时重置 page 为 1。第六章 详情页与弹窗动态路由6.1 动态路由配置{ path: /goods/:id, component: GoodsDetail }6.2 详情页获取参数import { useRoute } from vue-router const route useRoute() onMounted(async () { const id route.params.id detail.value await getGoodsById(id) })6.3 模糊弹窗用于快速预览商品信息逻辑同前文3.3重点掌握Teleport和backdrop-filter。第七章 购物车与状态管理Pinia7.1 购物车设计state.items数组每项包含 id, name, price, count, selectedgetters.totalPrice计算总价actions.add/remove/updateCount/clear7.2 全局共享在 App.vue 的导航栏显示购物车数量所有页面都能访问。7.3 持久化监听 items 变化写入 localStorage// stores/cart.js export const useCartStore defineStore(cart, { state: () ({ items: JSON.parse(localStorage.getItem(cart)) || [] }), actions: { save() { localStorage.setItem(cart, JSON.stringify(this.items)) }, add(item) { const existing this.items.find(i i.id item.id) if (existing) existing.count else this.items.push({ ...item, count: 1 }) this.save() } } })易错点直接修改items中对象的属性响应式没问题但要确保save()调用。第八章 订单流程提交订单、订单列表、模拟支付8.1 提交订单从购物车读取 items发送到后端。成功后清空购物车跳转订单列表。8.2 订单列表使用refonMounted加载。显示订单状态待支付、已支付、已发货等。8.3 支付模拟点击“支付”按钮调用支付接口更新状态。易错点异步操作期间要加 loading 状态防止重复提交。第九章 图表统计可选整合引入 ECharts在onMounted初始化在数据变化时更新。import * as echarts from echarts onMounted(() { chart echarts.init(domRef.value) chart.setOption({ /* option配置 */ }) })易错点窗口尺寸变化时需chart.resize()组件卸载时要chart.dispose()。第十章 动效实现星星背景、轮播图、过渡动画10.1 星星背景Canvas之前已详述关键是requestAnimationFrame和鼠标交互。10.2 图片轮播之前已详述注意自动播放和边界处理。10.3 Vue 过渡动画用transition包裹元素实现淡入淡出、滑动效果。transition namefade div v-ifshow内容/div /transitionCSS.fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } .fade-enter-from, .fade-leave-to { opacity: 0; }第十一章 易错点总结响应式丢失使用reactive时不要整体替换。定时器未清理setInterval必须在onUnmounted清除。事件监听未移除window.addEventListener需removeEventListener。路由守卫死循环登录页不要加requiresAuth。拦截器返回结构前后端约定好code/data/msg。购物车持久化读取和写入都要处理 JSON 解析异常。Canvas 尺寸使用canvas.width而非 CSS。分页与筛选冲突筛选后重置页码。结语这个销售管理系统虽然不大却浓缩了前端开发的核心知识点。通过亲手实现你会深刻理解 Vue3 的组合式 API、路由守卫、状态管理、网络请求封装等。希望我的博客能帮助你在学习路上少走弯路真正掌握实战技能。如果你觉得有用就点个赞吧有问题欢迎评论区交流。Happy Coding!