项目总结
一、项目名称
电商网站webapp开发
二、技术栈
框架：vue框架
UI组件：Vant移动端Vue组件库
安装：npm install vant -S
项目中引用的部分组件：
1、Tabbar标签栏：封装成底部标签栏，引入到其他组件中，导入路由，在底部作为导航栏使用；
2、Sidebar,SidebarItem 侧边导航：在商品分类展示模块中引入，按照后台系统中的商品分类进行展示，完成商品筛选分类展示模块；
3、Grid,GridItem 宫格：在首页及个人中心页中使用，添加一些功能设置导引，点击宫格实现特定功能，如钱包，收藏等；
4、Image 图片：用于商品图片展示；
5、SwipeCell 滑动单元格，Card 卡片：滑动单元格引用在订单，购物车商品展示，结合Card(卡片使用)，展示商品的图片、名称、描述信息、价格、数量等信息；
6、Button 按钮：用于项目中事件的触发及url的跳转等功能；
7、Checkbox,CheckboxGroup 复选框：用于实现订单模块中商品的勾选提交，实现选择指定商品的功能；
8、Col, Row 栅格布局：本项目采用的主要布局方式，将页面宽度分为24格，通过span设置所占宽度，row设置所在行，帮助页面实现布局；
9、SubmitBar 提交订单栏：对订单提交模块进行结构优化；
10、Toast 轻提示：在进行一些操作（如删除商品，退出登录等）时，弹出轻提示框，再次确认是否执行该操作；
11、NoticeBar 通知栏：用于循环播放展示一组消息通知；
12、Search 搜索：搜索框组件，实现搜索栏布局结构的搭建；
13、Swipe, SwipeItem 轮播：引入实现首页展示页轮播图功能的实现；
14、Dialog 弹出框：弹出模态框，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作...
REM布局：
在整个项目的布局中，主要使用rem布局,再结合bootstrap栅格系统、Flex弹性布局等，实现整个移动端项目的单页面布局。rem（font size of the root element）是相对于根元素<html>，简单的说它就是一个相对单位，这样就意味着，我们只需要在根元素确定一个px字号，就可以算出元素的宽高。相比于em依赖于父元素，rem使用更加简单，只要设置好适合的根字体字号大小，那么就能很轻松的使用rem替代px，在各种不同屏幕尺寸的手机上做到适配。
vue-router：
路由采用hash路由,对服务端进压力较小；在单页面中,页面的切换以锚点的形式进行跳转，实际上所有的跳转都是组件的切换。相比于多页面应用，页面之间跳转流畅，组件可复用，开发更加便捷。
```
mode: 'hash',
routes: [
{ path: '/', components:{li:Home} },
{ path: '/good/detail/:id', component: Cartdetail },
{ path: '/find', component: Find },
{ path: '/cart', component: Cart },
{ path: '/user', component: User },
{ path:'/login', component: Login},
{ path:'/regist', component: Regist},
{ path: '/*', redirect: '/'}
]
```
vuex：
状态管理模式，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。在本项目中使用的不多，通过store模式(opens new window)完成了大部分的需求。
sass：
在本项目中，我们采用了世界上最成熟、最稳定、最强大的专业级CSS扩展语言sass进行编译。
三、团队成员
前端1人
后端1人
四、功能模块
商品展示模块：
在商品展示模块中包含有首页轮播图广告展示，接入后端可实现广告页的切换；搜索栏用于在数据库中搜索指定的商品；商品展示，将后台商品数据部分展示在页面中，预设置展示20条，用户可通过上拉刷新，下拉加载实现商品的刷新与加载。在导航栏中，用户可以根据导航栏中的分类进行指定商品的浏览，从庞大的商品数据中筛选出感兴趣的那一类。点入某一件商品之后，跳转到商品详情页，向用户展示商品详情。
购物车模块：
用户浏览商品之后，可将商品添加到购物车，购物车模块可以实现商品的添加与删除，数量的加减；
订单模块：
用户在对购物车的商品进行确认勾选之后，可进行订单的提交，进行付款；
个人中心模块：
个人中心模块向用户进行个人信息展示，用户可进行修改；保存有用户的收货地址，用户可进行后台意见反馈；
登录注册模块：
用户个人登录与注册功能的实现。
五、性能优化
SEO优化：
因为SPA单页面应用，是通过AJAX获取数据，这就难保证我们的页面能被搜索引擎收到，并且有一些搜索引擎不支持js和通过ajax获取数据关键词的优化是SEO优化的核心，在title与alt等属性中添加好关键字；网站标签优化，页面标签多采用爬虫喜好的标签，如img、a、h1~h6标签等；
图片优化：
设置图片懒加载、压缩图片，减小图片的体积，将大的图片保存在public目录中，并进行cdn加速。
埋点：在商品浏览页面设置好埋点，当用户点击进某一个商品之后，触发埋点所连接的插件，将其行为记录，后续用做动作行为分析，以进一步精确用户可能感兴趣的商品，推送给用户。
六、项目亮点
页面新颖
七、项目难点：
UI还原度很高、交互体验要求高，商品的选择框
1516
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
