实现根组件通用的头部和底部样式
明白由webpack搭建起来的Vue项目的执行流程，那么就可以知道实现这个需要只要在根组件和入口文件上做“手脚”即可
<!--以后项目的根组件-->
<template>
<div>
<!--利用mint-ui中的header组件实现整个系统的头部-->
<mt-header fixed title="欢迎来到锋商城"></mt-header> <!--路由占位符-->
<router-view></router-view> <!--利用mui中的tabbar组件实现系统的底部-->
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#tabbar">
<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-contact"></span>
<span class="mui-tab-label">会员</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-contact">
<span class="mui-icon mui-icon-locked"><span class="mui-badge">0</span></span>
<span class="mui-tab-label">购物车</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-map">
<span class="mui-icon mui-icon-search"></span>
<span class="mui-tab-label">搜索</span>
</a>
</nav>
</div>
</template> <script>
//负责导出.vue这个组件对象，它本质上是一个Vue对象
// 所以Vue中该定义的元素都可以使用
export default {
data() {
return { }
},
methods: { },
created() { }
}
</script> <style scoped>
/* 当前页面的CSS样式写到这里，其中scoped表示这个里面
写的CSS代码知识在当前组件页面上有效，不会影响到其他组件页面
* */
</style>
//导入vue核心包
import Vue from 'vue'; //导入App.vue的vue对象
import App from './App.vue'; //导入vue-router
import vueRouter from 'vue-router';
//将vueRouter对象绑定到Vue对象上
Vue.use(vueRouter); //导入路由规则对应的组件对象
import login from './components/account/login.vue'; //定义路由规则
var router1 = new vueRouter({
routes: [{
path: '/login',
component: login
}
]
}); //导入mint-ui的css文件
import 'mint-ui/lib/style.min.css';
//导入mint-ui组件对象
import mintui from 'mint-ui';
//在Vue中全局使用mintui
Vue.use(mintui); //注册mui的css样式
import '../statics/mui/css/mui.css'; //导入一个当前系统的全局基本样式
import '../statics/css/site.css'; //利用Vue对象进行解析渲染
new Vue({
el: '#app',
//使用路由对象实例
router: router1,
render: c => c(App)
})
实现根组件底部的按钮激活时样式设定
有一个很重要的点：就是在切换路由的时候我们能够激活该路由（router-link）某个class，下面请看详细开发步骤
步骤一：修改App.vue文件
<!--以后项目的根组件-->
<template>
<div>
<!--利用mint-ui中的header组件实现整个系统的头部-->
<mt-header fixed title="欢迎来到锋商城"></mt-header> <!--路由占位符-->
<router-view></router-view> <!--利用mui中的tabbar组件实现系统的底部-->
<nav class="mui-bar mui-bar-tab">
<router-link class="mui-tab-item" to="/home">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</router-link>
<router-link class="mui-tab-item" to="/user">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">会员</span>
</router-link>
<router-link class="mui-tab-item" to="/shopcar">
<span class="mui-icon mui-icon-locked"><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> <script>
//负责导出.vue这个组件对象，它本质上是一个Vue对象
// 所以Vue中该定义的元素都可以使用
export default {
data() {
return { }
},
methods: { },
created() { }
}
</script> <style scoped>
/* 当前页面的CSS样式写到这里，其中scoped表示这个里面
写的CSS代码知识在当前组件页面上有效，不会影响到其他组件页面
* */
</style>
步骤二：创建car.vue和Home.vue组件用作测试（以后这两个组件还是非常重要的）
<template>
<div id="tml">
<h3>购物车</h3>
</div>
</template> <script>
export default { }
</script> <style> </style>
<template>
<div id="tml">
<h3>首页</h3>
</div>
</template> <script>
export default { }
</script> <style> </style>
步骤三：创建全局样式，为了组件头部和脚部内容不在根组件App.vue被遮挡（根组件的头部和脚部都为固定布局，脱离了文档流）
body {
background: #fff;
}
#tml {
margin-top: 40px;
margin-bottom: 50px;
}步骤四：配置入口文件main.js（核心代码在这）
//导入vue核心包
import Vue from 'vue'; //导入App.vue的vue对象
import App from './App.vue'; //导入vue-router
import vueRouter from 'vue-router';
//将vueRouter对象绑定到Vue对象上
Vue.use(vueRouter); //导入路由规则对应的组件对象
import home from './components/Home.vue';
import shopcar from './components/shopcar/car.vue'; //定义路由规则
var router1 = new vueRouter({
//改变路由激活时的class名称
linkActiveClass:'mui-active',
routes:[
{path:'/home',component:home},
{path:'/shopcar',component:shopcar}
]
}); //导入mint-ui的css文件
import 'mint-ui/lib/style.min.css';
//导入mint-ui组件对象
import mintui from 'mint-ui';
//在Vue中全局使用mintui
Vue.use(mintui); //注册mui的css样式
import '../statics/mui/css/mui.css'; //导入一个当前系统的全局基本样式
import '../statics/css/site.css'; //利用Vue对象进行解析渲染
new Vue({
el: '#app',
//使用路由对象实例
router: router1,
render: c => c(App)
})
使用vue-resource实现首页轮播图
vue-resource是Vue的一个插件，用来异步获取相关的资源。关于它的具体用法可以看这篇博文，如今比较推崇的是axios。不过该项目使用的还是vue-resource，下面请看开发步骤
步骤一：安装vue-resource
步骤二：创建一个json文件，存储相关的数据
homeslide.json
{
"status": 0,
"message": [
{
"url": "",
"img": "../../statics/img/home/home01.jpg"
}, {
"url": "",
"img": "../../statics/img/home/home02.jpg"
}, {
"url": "",
"img": "../../statics/img/home/home03.jpg"
}
]
}步骤三：配置入口文件main.js
//导入vue核心包
import Vue from 'vue'; //导入vue-router
import vueRouter from 'vue-router';
//将vueRouter对象绑定到Vue对象上
Vue.use(vueRouter); //将vue-resource在vue中绑定，自动在vue对象实例上注入一个$http对象就可以使用ajax方法了
import vueResource from 'vue-resource';
Vue.use(vueResource); //导入App.vue的vue对象
import App from './App.vue'; //导入路由规则对应的组件对象
import home from './components/Home.vue';
import shopcar from './components/shopcar/car.vue'; //定义路由规则
var router1 = new vueRouter({
//改变路由激活时的class名称
linkActiveClass: 'mui-active',
routes: [{
path: '/',
component: home
},
{
path: '/home',
component: home
},
{
path: '/shopcar',
component: shopcar
}
]
}); //导入mint-ui的css文件
import 'mint-ui/lib/style.min.css';
//导入mint-ui组件对象
import mintui from 'mint-ui';
//在Vue中全局使用mintui
Vue.use(mintui); //注册mui的css样式
import '../statics/mui/css/mui.css'; //导入一个当前系统的全局基本样式
import '../statics/css/site.css'; //利用Vue对象进行解析渲染
new Vue({
el: '#app',
//使用路由对象实例
router: router1,
render: c => c(App)
})
步骤四：修改Home.vue文件
<template>
<div id="tml">
<!--mint-ui轮播图-->
<mt-swipe :auto="4000">
<mt-swipe-item v-for="item in list">
<img :src="item.img">
</mt-swipe-item>
</mt-swipe>
</div>
</template> <script>
import { Toast } from 'mint-ui';
export default {
data() {
return {
list: []
}
},
created() {
//当页面中的data和methods对象都创建完毕以后，就会自动调用created
this.getimgs();
},
methods: {
getimgs() {
//实现轮播组件中国的数据请求
// 1.0确定url
var url = '../../statics/json/homeslide.json'
// 2.0调用$http.get()
this.$http.get(url).then(function(response) {
var data = response.body;
//错误处理
if(data.status != 0) {
Toast(data.message);
return;
}
//如果服务器返回数据正常，则赋值给list
this.list = data.message;
})
}
}
}
</script> <style>
.mint-swipe {
height: 300px;
} .mint-swipe-item {
width: 100%;
height: 300px;
} .mint-swipe-item img {
width: 100%;
}
</style>
项目结构图：
实现首页导航区域九宫格图标
步骤一：将MUI的九宫格图标样式导入进Home.vue
<template>
<div id="tml">
<!--mint-ui轮播图-->
<mt-swipe :auto="4000">
<mt-swipe-item v-for="item in list">
<img :src="item.img">
</mt-swipe-item>
</mt-swipe> <!--使用MUI的九宫格-->
<div class="mui-content">
<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="#">
<span class="mui-icon mui-icon-home"></span>
<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="#">
<span class="mui-icon mui-icon-email"></span>
<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="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<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="#">
<span class="mui-icon mui-icon-location"></span>
<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="#">
<span class="mui-icon mui-icon-search"></span>
<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="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">联系我们</div>
</a>
</li>
</ul>
</div> </div>
</template> <script>
import { Toast } from 'mint-ui';
export default {
data() {
return {
list: []
}
},
created() {
//当页面中的data和methods对象都创建完毕以后，就会自动调用created
this.getimgs();
},
methods: {
getimgs() {
//实现轮播组件中国的数据请求
// 1.0确定url
var url = '../../statics/json/homeslide.json'
// 2.0调用$http.get()
this.$http.get(url).then(function (response) {
var data = response.body;
//错误处理
if (data.status != 0) {
Toast(data.message);
return;
}
//如果服务器返回数据正常，则赋值给list
this.list = data.message;
})
}
}
}
</script> <style scoped>
/*重写轮播图样式*/
.mint-swipe {
height: 300px;
}
.mint-swipe-item {
width: 100%;
height: 300px;
}
.mint-swipe-item img {
width: 100%;
}
/*重写九宫格样式*/
.mui-content,
.mui-content ul li a {
background: #fff;
}
</style>
</style>
步骤二：改变九宫格图标样式，首先得先准备好相关的图片资源，然后修改Home.vue中九宫格的背景图片
Home.vue <template>
<div id="tml">
<!--mint-ui轮播图-->
<mt-swipe :auto="4000">
<mt-swipe-item v-for="item in list">
<img :src="item.img">
</mt-swipe-item>
</mt-swipe> <!--使用MUI的九宫格-->
<div class="mui-content">
<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="#">
<span class="mui-icon mui-icon-home"></span>
<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="#">
<span class="mui-icon mui-icon-email"></span>
<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="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<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="#">
<span class="mui-icon mui-icon-location"></span>
<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="#">
<span class="mui-icon mui-icon-search"></span>
<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="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">联系我们</div>
</a>
</li>
</ul>
</div> </div>
</template> <script>
import { Toast } from 'mint-ui';
export default {
data() {
return {
list: []
}
},
created() {
//当页面中的data和methods对象都创建完毕以后，就会自动调用created
this.getimgs();
},
methods: {
getimgs() {
//实现轮播组件中国的数据请求
// 1.0确定url
var url = '../../statics/json/homeslide.json'
// 2.0调用$http.get()
this.$http.get(url).then(function (response) {
var data = response.body;
//错误处理
if (data.status != 0) {
Toast(data.message);
return;
}
//如果服务器返回数据正常，则赋值给list
this.list = data.message;
})
}
}
}
</script> <style scoped>
/*重写轮播图样式*/ .mint-swipe {
height: 310px;
}
.mint-swipe-item {
width: 100%;
height: 300px;
}
.mint-swipe-item img {
width: 100%;
height: 80%;
}
/*重写九宫格样式*/ .mui-content,
.mui-content ul li a {
background: #fff;
}
/*改变九宫格图标样式*/ .mui-grid-9 .mui-icon-home:before,
.mui-grid-9 .mui-icon-email:before,
.mui-grid-9 .mui-icon-chatbubble:before,
.mui-grid-9 .mui-icon-location:before,
.mui-grid-9 .mui-icon-search:before,
.mui-grid-9 .mui-icon-phone:before {
content: '';
display: inline-block;
width: 50px;
height: 50px;
background-repeat: round;
}
.mui-grid-9 .mui-icon-home:before {
background-image: url(../../statics/imgs/Hgrid/1.png);
}
.mui-grid-9 .mui-icon-email:before {
background-image: url(../../statics/imgs/Hgrid/2.png);
}
.mui-grid-9 .mui-icon-chatbubble:before {
background-image: url(../../statics/imgs/Hgrid/3.png);
}
.mui-grid-9 .mui-icon-location:before {
background-image: url(../../statics/imgs/Hgrid/4.png);
}
.mui-grid-9 .mui-icon-search:before {
background-image: url(../../statics/imgs/Hgrid/5.png);
}
.mui-grid-9 .mui-icon-phone:before {
background-image: url(../../statics/imgs/Hgrid/6.png);
}
</style>
</style>
步骤三：添加路由（将Home.vue中a标签换成router-link，href换成to）
<template>
<div id="tml">
<!--mint-ui轮播图-->
<mt-swipe :auto="4000">
<mt-swipe-item v-for="item in list">
<img :src="item.img">
</mt-swipe-item>
</mt-swipe> <!--使用MUI的九宫格-->
<div class="mui-content">
<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">
<router-link to="/news/newlist">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">新闻资讯</div>
</router-link>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<router-link to="/photo/photolist">
<span class="mui-icon mui-icon-email"></span>
<div class="mui-media-body">图片分享</div>
</router-link>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<router-link to="/goods/goodslist">
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">商品购买</div>
</router-link>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<router-link to="/feedback">
<span class="mui-icon mui-icon-location"></span>
<div class="mui-media-body">留言反馈</div>
</router-link>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<router-link to="/vide">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">视频专区</div>
</router-link>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<router-link to="/callme">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">联系我们</div>
</router-link>
</li>
</ul>
</div> </div>
</template> <script>
import { Toast } from 'mint-ui';
export default {
data() {
return {
list: []
}
},
created() {
//当页面中的data和methods对象都创建完毕以后，就会自动调用created
this.getimgs();
},
methods: {
getimgs() {
//实现轮播组件中国的数据请求
// 1.0确定url
var url = '../../statics/json/homeslide.json'
// 2.0调用$http.get()
this.$http.get(url).then(function (response) {
var data = response.body;
//错误处理
if (data.status != 0) {
Toast(data.message);
return;
}
//如果服务器返回数据正常，则赋值给list
this.list = data.message;
})
}
}
}
</script> <style scoped>
/*重写轮播图样式*/ .mint-swipe {
height: 310px;
}
.mint-swipe-item {
width: 100%;
height: 300px;
}
.mint-swipe-item img {
width: 100%;
height: 80%;
}
/*重写九宫格样式*/ .mui-content,
.mui-content ul li a {
background: #fff;
}
/*改变九宫格图标样式*/ .mui-grid-9 .mui-icon-home:before,
.mui-grid-9 .mui-icon-email:before,
.mui-grid-9 .mui-icon-chatbubble:before,
.mui-grid-9 .mui-icon-location:before,
.mui-grid-9 .mui-icon-search:before,
.mui-grid-9 .mui-icon-phone:before {
content: '';
display: inline-block;
width: 50px;
height: 50px;
background-repeat: round;
}
.mui-grid-9 .mui-icon-home:before {
background-image: url(../../statics/imgs/Hgrid/1.png);
}
.mui-grid-9 .mui-icon-email:before {
background-image: url(../../statics/imgs/Hgrid/2.png);
}
.mui-grid-9 .mui-icon-chatbubble:before {
background-image: url(../../statics/imgs/Hgrid/3.png);
}
.mui-grid-9 .mui-icon-location:before {
background-image: url(../../statics/imgs/Hgrid/4.png);
}
.mui-grid-9 .mui-icon-search:before {
background-image: url(../../statics/imgs/Hgrid/5.png);
}
.mui-grid-9 .mui-icon-phone:before {
background-image: url(../../statics/imgs/Hgrid/6.png);
}
</style>
</style>