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 中的