大组件，首页等

package.json

@@ -35,6 +35,7 @@
     "bootstrap": "^3.3.7",
     "mint-ui": "^2.2.9",
     "vue": "^2.5.2",
+    "vue-resource": "^1.5.1",
     "vue-router": "^3.0.1"
   }
 }

src/App.vue

@@ -1,33 +1,35 @@
 <template>
   <div class="app-container">
 
-	<h1>123</h1>
     <!-- 顶部 Header 区域 -->
 	<mt-header fixed title="Vue商城"></mt-header>
 
     <!-- 中间路由 router-view 区域 -->
-
+	<transition>
+		<router-view></router-view>
+	</transition>
 
     <!-- 底部 TabBar 区域 -->
 	<nav class="mui-bar mui-bar-tab">
-		<a class="mui-tab-item mui-active" href="#tabbar">
+		<router-link class="mui-tab-item" to="/home">
 		    <span class="mui-icon mui-icon-home"></span>
 			<span class="mui-tab-label">首页</span>
-		</a>
-		<a class="mui-tab-item" href="#tabbar-with-chat">
-			<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
-			<span class="mui-tab-label">消息</span>
-		</a>
-		<a class="mui-tab-item" href="#tabbar-with-contact">
+		</router-link>
+		<router-link class="mui-tab-item" to="/member">
 			<span class="mui-icon mui-icon-contact"></span>
-			<span class="mui-tab-label">通讯录</span>
-		</a>
-		<a class="mui-tab-item" href="#tabbar-with-map">
-			<span class="mui-icon mui-icon-gear"></span>
-			<span class="mui-tab-label">设置</span>
-		</a>
+			<span class="mui-tab-label">会员</span>
+		</router-link>
+		<router-link class="mui-tab-item" to="shopcar">
+			<span class="mui-icon mui-icon-extra mui-icon-extra-cart"><span class="mui-badge">0</span></span>
+			<span class="mui-tab-label">购物车</span>
+		</router-link>
+		<router-link class="mui-tab-item" to="search">
+			<span class="mui-icon mui-icon-search"></span>
+			<span class="mui-tab-label">搜索</span>
+		</router-link>
 	</nav>
 
+
   </div>
 </template>
 
@@ -38,5 +40,19 @@
 <style lang="scss" scoped>
 	.app-container {
 		padding-top: 40px;
+		overflow-x: hidden;
+	}
+
+	.v-enter,
+	.v-leave-to {
+		opacity: 0;
+		transform: translateX(100%);
+	}
+	.v-leave-to {
+		transform: translateX(-100%);
+	}
+	.v-enter-active,
+	.v-leave-actice {
+		transition: all 1s ease;
 	}
 </style>

src/components/tabbar/HomeContainer.vue

@@ -0,0 +1,105 @@
+<template>
+	<div>
+		<!-- 轮播图区域 -->
+		<mt-swipe :auto="1000">
+		  <mt-swipe-item v-for="item in bannerList" :key="item.url">
+		  	<img :src="item.img" alt="">
+		  </mt-swipe-item>
+		  <mt-swipe-item>2</mt-swipe-item>
+		  <mt-swipe-item>3</mt-swipe-item>
+		  <mt-swipe-item>4</mt-swipe-item>
+		  <mt-swipe-item>5</mt-swipe-item>
+		</mt-swipe>
+
+		<!-- 九宫格改造为六宫格 -->
+		<ul class="mui-table-view mui-grid-view mui-grid-9">
+	      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
+	              <img src="../../images/menu1(1).png" alt="">
+	              <div class="mui-media-body">新闻资讯</div></a></li>
+	      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
+	              <img src="../../images/menu2.png" alt="">
+	              <div class="mui-media-body">图片分享</div></a></li>
+	      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
+	              <img src="../../images/menu3.png" alt="">
+	              <div class="mui-media-body">商品购买</div></a></li>
+	      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
+	              <img src="../../images/menu4.png" alt="">
+	              <div class="mui-media-body">留言反馈</div></a></li>
+	      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
+	              <img src="../../images/menu5.png" alt="">
+	              <div class="mui-media-body">视频专区</div></a></li>
+	      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
+	              <img src="../../images/menu6.png" alt="">
+	              <div class="mui-media-body">联系我们</div></a></li>
+	    </ul> 
+	</div>
+</template>
+
+<script>
+	import { Toast } from 'mint-ui'
+
+	export default {
+		data() {
+			return {
+				bannerList: []
+			}
+		},
+		created() {
+			this.getBanner()
+		},
+		methods: {
+			getBanner() {
+				// 获取轮播图数据的方法
+				this.$http.get("http://vue.studyit.io/api/getlunbo").then(result => {
+					if (result.body.status === 0) {
+						this.bannerList = result.body.message
+					} else {
+						Toast('加载轮播图失败')
+					}
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.mint-swipe {
+		height: 200px;
+		.mint-swipe-item {
+			&:nth-child(1) {
+				background-color: red;
+			}
+			&:nth-child(2) {
+				background-color: yellow;
+			}
+			&:nth-child(3) {
+				background-color: blue;
+			}
+			&:nth-child(4) {
+				background-color: cyan;
+			}
+			&:nth-child(5) {
+				background-color: pink;
+			}	
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+	.mui-grid-view.mui-grid-9 {
+		background-color: #fff;
+		border: none;
+		img {
+		  width: 60px;
+		  height: 60px;
+		}
+		.mui-media-body{
+		  font-size: 13px;
+		}
+	}
+
+	.mui-grid-view.mui-grid-9 .mui-table-view-cell {
+		border: 0;
+	}
+</style>

src/components/tabbar/MemberContainer.vue

@@ -0,0 +1,9 @@
+<template>
+	<div>
+		<h3>MemberContainer</h3>
+	</div>
+</template>
+
+<script></script>
+
+<style lang="scss" scoped></style>

src/components/tabbar/SearchContainer.vue

@@ -0,0 +1,9 @@
+<template>
+	<div>
+		<h3>SearchContainer</h3>
+	</div>
+</template>
+
+<script></script>
+
+<style lang="scss" scoped></style>

src/components/tabbar/ShopcarContainer.vue

@@ -0,0 +1,9 @@
+<template>
+	<div>
+		<h3>ShopcarContainer</h3>
+	</div>
+</template>
+
+<script></script>
+
+<style lang="scss" scoped></style>

src/index.html

@@ -8,7 +8,7 @@
   <title>Document</title>
 </head>
 
-<body>
+<body style="background-color: #fff;">
   <!-- 这是容器 -->
   <div id="app"></div>
 </body>

src/lib/mui/css/icons-extra.css

@@ -0,0 +1,63 @@
+@font-face {
+    font-family: MuiiconSpread;
+    font-weight: normal;
+    font-style: normal;
+    src:  url('../fonts/mui-icons-extra.ttf') format('truetype'); /* iOS 4.1- */
+}
+.mui-icon-extra
+{
+    font-family: MuiiconSpread;
+    font-size: 24px;
+    font-weight: normal;
+    font-style: normal;
+    line-height: 1;
+    display: inline-block;
+    text-decoration: none;
+    -webkit-font-smoothing: antialiased;
+}
+.mui-icon-extra-cold:before { content: "\e500"; }
+.mui-icon-extra-share:before { content: "\e200"; }
+.mui-icon-extra-class:before { content: "\e118"; }
+.mui-icon-extra-custom:before { content: "\e117"; }
+.mui-icon-extra-new:before { content: "\e103"; }
+.mui-icon-extra-card:before { content: "\e104"; }
+.mui-icon-extra-grech:before { content: "\e105"; }
+.mui-icon-extra-trend:before { content: "\e106"; }
+.mui-icon-extra-filter:before { content: "\e207"; }
+.mui-icon-extra-holiday:before { content: "\e300"; }
+.mui-icon-extra-cart:before { content: "\e107"; }
+.mui-icon-extra-heart:before { content: "\e180"; }
+.mui-icon-extra-computer:before { content: "\e600"; }
+.mui-icon-extra-express:before { content: "\e108"; }
+.mui-icon-extra-gift:before { content: "\e109"; }
+.mui-icon-extra-gold:before { content: "\e102"; }
+.mui-icon-extra-lamp:before { content: "\e601"; }
+.mui-icon-extra-rank:before { content: "\e110"; }
+.mui-icon-extra-notice:before { content: "\e111"; }
+.mui-icon-extra-sweep:before { content: "\e202"; }
+.mui-icon-extra-arrowleftcricle:before { content: "\e401"; }
+.mui-icon-extra-dictionary:before { content: "\e602"; }
+.mui-icon-extra-heart-filled:before { content: "\e119"; }
+.mui-icon-extra-xiaoshuo:before { content: "\e607"; }
+.mui-icon-extra-top:before { content: "\e403"; }
+.mui-icon-extra-people:before { content: "\e203"; }
+.mui-icon-extra-topic:before { content: "\e603"; }
+.mui-icon-extra-hotel:before { content: "\e301"; }
+.mui-icon-extra-like:before { content: "\e206"; }
+.mui-icon-extra-regist:before { content: "\e201"; }
+.mui-icon-extra-order:before { content: "\e113"; }
+.mui-icon-extra-alipay:before { content: "\e114"; }
+.mui-icon-extra-find:before { content: "\e400"; }
+.mui-icon-extra-arrowrightcricle:before { content: "\e402"; }
+.mui-icon-extra-calendar:before { content: "\e115"; }
+.mui-icon-extra-prech:before { content: "\e116"; }
+.mui-icon-extra-cate:before { content: "\e501"; }
+.mui-icon-extra-comment:before { content: "\e209"; }
+.mui-icon-extra-at:before { content: "\e208"; }
+.mui-icon-extra-addpeople:before { content: "\e204"; }
+.mui-icon-extra-peoples:before { content: "\e205"; }
+.mui-icon-extra-calc:before { content: "\e101"; }
+.mui-icon-extra-classroom:before { content: "\e604"; }
+.mui-icon-extra-phone:before { content: "\e404"; }
+.mui-icon-extra-university:before { content: "\e605"; }
+.mui-icon-extra-outline:before { content: "\e606"; }

src/main.js

@@ -3,17 +3,36 @@
 // 导入 Vue
 import Vue from 'vue'
 
+// 1.1 导入路由的包
+import VueRouter from 'vue-router'
+// 1.2 安装路由
+Vue.use(VueRouter)
+
+// 2.1 导入 vue-resource 
+import VueResource from 'vue-resource'
+// 2.2 安装 vue-resource
+Vue.use(VueResource)
+// Vue.http.options.emulateJSON = true
 // 按需导入 Mint-UI 的组件
-import { Header } from 'mint-ui'
+import { Header, Swipe, SwipeItem } from 'mint-ui'
 Vue.component(Header.name, Header)
+Vue.component(Swipe.name, Swipe)
+Vue.component(SwipeItem.name, SwipeItem)
+
+// 1.3 创建自己的 router.js 模块
+// 1.4 导入自己的 router.js 模块
+import router from './router.js'
 
 // 导入 MUI 的样式
 import './lib/mui/css/mui.min.css'
+import './lib/mui/css/icons-extra.css'
 
 // 导入 app 根组件
 import app from './App.vue'
 
 var vm = new Vue({
 	el: '#app',
-	render: c => c(app)
+	render: c => c(app),
+	// 1.4 挂载路由对象到 vm 实例上
+	router
 })

src/router.js

@@ -1,10 +1,22 @@
+// 导入 vue-router
 import VueRouter from 'vue-router'
 
+// 导入对应的路由组件
+import HomeContainer from './components/tabbar/HomeContainer.vue'
+import MemberContainer from './components/tabbar/MemberContainer.vue'
+import ShopcarContainer from './components/tabbar/ShopcarContainer.vue'
+import SearchContainer from './components/tabbar/SearchContainer.vue'
 
-// 3. 创建路由对象
+// 创建路由对象
 var router = new VueRouter({
-  routes: [
-  ]
+  routes: [ // 配置路由规则
+  	{ path: '/', redirect: '/home' },  
+  	{ path: '/home', component: HomeContainer },
+  	{ path: '/member', component: MemberContainer },
+  	{ path: '/shopcar', component: ShopcarContainer },
+  	{ path: '/search', component: SearchContainer }
+  ],
+  linkActiveClass: 'mui-active' // 覆盖默认的路由高亮的类，默认的类叫做 router-link-active
 })
 
 // 把路由对象暴露出去