vue企业项⽬demo_vue-demo Vue实战项⽬
项⽬描述
使⽤ Vue+ Mint-UI + Vue-router + Vue-resource + webpack 构建⼀个Vue实战项⽬
项⽬实现
制作⾸页App组件
完成 Header 区域，使⽤的是 Mint-UI 中的Header组件
制作底部的Tabber 区域，使⽤的是 MUI 的Tabber.html
先把 扩展图标的 css 样式，拷贝到 项⽬中
拷贝 扩展字体库 ttf ⽂件到项⽬中
为 购物车⼩图标添加如下样式 'mui-icon mui-icon-extra mui-icon-extra-cart '
要在中间区域放置⼀个router-view 来展⽰路由匹配到的组件
改造 tabbar 为 router-link
设置路由⾼亮
路由切换
HomeContainer.vue
MemberContainer.vue
ShopcarContainer.vue
SearchContainer.vue
设置路由切换动画
制作轮播图
制作⾸页轮播图布局
加载⾸页轮播图数据
+ 获取数据，使⽤ vue-resource 的 this.$
+ 将获取到的数据保存在 data 中
+ 使⽤ v-for 循环渲染每个 item 项
添加表格内容
使⽤MUI中的 grid-default
--
制作新闻资讯
改造新闻资讯路由链接
新闻资讯页⾯制作
绘制界⾯，使⽤ MUI 中的 media-list
使⽤ vue-resource 获取数据
渲染真实数据
制作新闻详情
把新闻列表中的每⼀项改造为 router-link，同时，在跳转的时候应该提供唯⼀的 id 标识符
创建新闻详情组件页⾯ NewsInfo.vue
mui框架常用组件在路由模块中，将新闻详情的路由地址和组件页⾯对应
实现新闻详情的页⾯布局和数据渲染
评论⼦组件
绘制评论⼦组件
加载评论内容
实现‘加载更多评论’功能
发表评论
把⽂本框做双向数据绑定
为发表按钮绑定⼀个事件
校验评论内容是否为空？如果为空，则提⽰⽤户
通过 vue-resource 发送⼀个请求，将评论内容提交给服务器
发表评论后，重新刷新列表，查看最新评论
+ 当评论成功后，在客户端⼿动拼接⼀个最新评论对象，然后调⽤unshift将其放⼊comments的⾸部，这样就能实现刷新评论列表+ 如果调⽤getComments ⽅法重新刷新评论列表，可能只能得到最后⼀页的数据，前⼏页的评论数据获取不到
--
制作图⽚分享
改造图⽚分享路由链接
图⽚分享页⾯制作
制作顶部导航条
+ 使⽤MUI 中的 tab-top-webview-main.html
+ 导⼊ mui.min.js 并初始化 scroll
~~~
mui('.mui-scroll-wrapper').scroll({
deceleration: 0.0005 //flick 减速系数，系数越⼤，滚动速度越慢，滚动距离越⼩，默认值0.0006
});
~~~
+ 使⽤mui的mui.js出现问题，因此我们需要移除‘严格模式’，使⽤插件：babel-plugin-transform-remove-strict-mode
+ 滚动条的初始化，必须要等到DOM元素加载完毕，所以，将初始化 scroll的代码放在 mounted 声明周期函数中
+ 因为mui的js有问题，使⽤滑动条和tab会有冲突，因此要将tab的类名'mui-tab-item'修改
+ 获取所有分类并渲染分类列表
制作底部图⽚列表
+ 图⽚懒加载，使⽤ mint-ui 提供的 Lazy load组件
+ 美化图⽚列表样式
图⽚详情页⾯制作
路由改造，要将tag属性指定为li元素
获取数据并美化布局
图⽚缩略图制作
+ 使⽤vue-preview插件
+ 获取到图⽚数据后要循环每个图⽚数据，添加 w h msrc(新版vue-preview规定属性) + 注意：如果想更改缩略图样式，那么需要去掉scoped属性
--
制作商品购买
改造路由链接
实现商品列表两列布局
制作商品详情
页⾯布局使⽤MUI中的卡⽚样式 card
页⾯功能：
抽离轮播组件
实现购买数量的选择 -> 使⽤MUI中的numbox
实现图⽂介绍功能
添加商品评论
加⼊购物车功能
+ 加⼊购物车动画
+ 节流(防⽌点击次数过多)
使⽤vuex管理购物车商品数据
使⽤本地存储来⽅便初始时加载购物车中的数据
购物车
制作购物车页⾯
获取购物车商品列表并加载数据
使numbox中的数值与徽标中的数值保持⼀致
增加删除功能
动态计算商品数量及总价
实现返回按钮功能
关于打包
问题：使⽤webpack打包后会发现多了0-14.bundle.js⽂件
原因：产⽣这么多js⽂件的原因是因为路由引⽤⽅式的问题，由于使⽤的是 () => import 即异步路由(路由懒加载)，所以每个组件会被单独进⾏打包。这样能确保你最主要的包⽐较⼩，其他不太重要或者需要时才加载的，则另⾏打包
解决⽅法：如果不想⽣成太多的js⽂件，则使⽤ import xxx from 'xxx/xxx.vue'的⽅式引⽤路由

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。