实训项目后记

项目开始于2018/10/26, 本来已经申请免听了， 这几天好难受, 刚开始打算就随便从github上modify一个， 后来找来找去没发现合适的， 再加上有点皮，就开始了几天的程序猿模式。

项目背景

实训这类课，名义上是「做项目」，实际上大家心里都明白：交差、答辩、演示能跑起来，就算过关。我这边虽然申请了免听，还是被拉进小组一起折腾了几天。一开始的想法很朴素——GitHub 上找个 star 多一点的商城模板，改改 logo、换换文案，答辩 PPT 一套带走。结果真去找的时候才发现：要么技术栈太老，要么业务逻辑跟实训要求对不上，要么代码结构一团糟，改起来比从零写还痛苦。

技术选型

最后定下来的方案是 Vue + Vuex + iView，基于一个开源的 B2B2C 电子商城项目做二次开发。选型理由也很现实：当时 Vue 2 生态成熟，iView 组件库上手快，后台管理那套表格、表单、分页直接拿来用，能省不少 UI 时间；Vuex 管购物车、用户登录态这类全局状态也够用。比起从零搭脚手架，在成熟模板上改业务，更符合「几天内要出东西」的节奏。

实际做了什么

具体改动集中在几块：商品列表与详情展示、购物车流程、简单的订单页、后台部分菜单和权限展示。没有做什么高深架构，就是把原项目里跟实训要求不符的部分替换掉，接口层能 mock 就先 mock，能联调再联调。那几天基本就是白天改页面、晚上修 bug，控制台报错看多了，看到 vuex 和 iview 的 warning 都能凭直觉猜个八九不离十。

踩坑印象

印象最深的有两类：一是 Vuex 模块拆太细，刚开始找 mutation 找到头晕；二是 iView 样式覆盖，自定义 CSS 经常被组件默认样式压过去，后来也学会了该用深度选择器就用，别硬扛。另外从别人项目 fork 过来，目录结构和命名习惯要先花半小时摸清，不然改 A 影响 B，排查很费时间。

github项目地址

申明: 项目由基于Vue+Vuex+iView的电子商城网站 修改而来

由于各种原因未在github地址上补充上述内容，在此补上。

仓库里保留了当时能跑通的主要功能，适合当 Vue 2 商城类作业的参考，不建议直接当生产项目用——实训代码嘛，你懂的。如果也要做类似选题，建议尽早定模板、尽早改业务，别像我一样最后一天还在跟购物车图标较劲。

版权声明: 本文首发于 指尖魔法屋-实训项目后记（https://blog.thinkmoon.cn/post/523-notes-vue/） 转载或引用必须申明原指尖魔法屋来源及源地址！