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.$http.get

+ 将获取到的数据保存在 data 中

+ 使用 v-for 循环渲染每个 item 项

添加表格内容

使用MUI中的 grid-default

--

制作新闻资讯

改造新闻资讯路由链接

新闻资讯页面制作

绘制界面，使用 MUI 中的 media-list

使用 vue-resource 获取数据

渲染真实数据

制作新闻详情

把新闻列表中的每一项改造为 router-link,同时，在跳转的时候应该提供唯一的 id 标识符

创建新闻详情组件页面 NewsInfo.vue

在路由模块中，将新闻详情的路由地址和组件页面对应

实现新闻详情的页面布局和数据渲染

评论子组件

绘制评论子组件

加载评论内容

实现‘加载更多评论’功能

发表评论

把文本框做双向数据绑定

为发表按钮绑定一个事件

校验评论内容是否为空？如果为空，则提示用户

通过 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'的方式引用路由