基于Vue的WebApp项目开发（三）
实现根组件通用的头部和底部样式
明白由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>
基于Vue的WebApp项目开发（三）的更多相关文章
- 基于Vue的WebApp项目开发（二）
利用webpack解析和打包.vue组件页面 相关知识: vue项目中的每个页面其实都是一个.vue的文件,这种文件,Vue称之为组件页面,必须借助于webpack的vue-loader才能运行,所以 ...
- 基于Vue的WebApp项目开发（一）
了解webpack的魔力: 项目结构以及开发环境 webpack初体验之打包文件 1.首先创建三个文件,分别是index.html.main.js和calc.js index.html <!DO ...
- 基于Vue的WebApp项目开发（六）
实现商品购买列表页面 步骤一:新建goodslist.vue文件 <template> <div id="tml"> <!--利用mui中的图文表格组 ...
- 基于Vue的WebApp项目开发（四）
实现新闻咨询页面 目录结构 步骤一:创建newslist.vue文件 <template> <div id="tml"> <!--使用mui框架,实现 ...
- 基于Vue的WebApp项目开发（五）
实现图片分享列表 步骤一:新增图片列表文件photolist.vue <template> <div id="tml"> 图片分享页面 </div&g ...
- 基于Vue的工作流项目模块中，使用动态组件的方式统一呈现不同表单数据的处理方式
在基于Vue的工作流项目模块中,我们在查看表单明细的时候,需要包含公用表单信息,特定表单信息两部分内容.前者表单数据可以统一呈现,而后者则是不同业务的表单数据不同.为了实现更好的维护性,把它们分开作为 ...
- 基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室
一.项目简介 uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目.界面仿制抖音|火山小视频/陌陌直播,支持编译到多端(H5.小程序.Ap ...
- 【技术博客】基于vue的前端快速开发(工具篇)
一.Vue教程 vue.js是一套构建用户界面的渐进式框架.vue采用自底向上增量开发的设计.vue的核心库只关心视图层,非常容易学习,非常容易与其它库和已有项目整合.vue完全有能力驱动采用单文件组 ...
- 基于vue脚手架的项目打包上线（发布）方法和误区
最近要把vue脚手架开发的一个项目上线,只知道vue脚手架是基于node的服务端项目,那么只需要 npm run dev 就可以轻松启动整个项目,当我想当然的给服务器配置合适的node环境(这里也遇到 ...
随机推荐
- Mac下的裁剪快捷键
按[Command]+[C]复制文件,然后按[Command]+[Option]+[V]. 注意:[Command]+[X]只能剪切文字文本.
- (转)[小工具] Linux下列格式化工具 - column
当你看到Linux下命令输出的列歪歪扭扭时,是不是看着很不爽?column 命令就可以方便地解决这个问题. 比如: 我们一般就只用到上面这一个用法. column的其他用法如下: 选项 含义 -c 字 ...
- 第十篇--------javascript函数-参数
javascript函数的参数:形参,实参 //function 参数 //形参列表 function test(a,b,c,d){ //alert(test.length); //形参个数,4个 / ...
- 【es6】字符串扩展
8.模板字符串 模板字符串(template string)是增强版的字符串,用反引号(`)标识.它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量. ${}中可以放 1. ...
- Django获取Header中的信息
今天需要从header中获取一些信息,查了一些资料,需要注意一下几点: request.META.get("header key") 用于获取header的信息 注意的是heade ...
- Windows和Ubuntu双系统时间相差8个小时的问题
由于要学编程,在windows 10上安装了Ubuntu16.04双系统.但是却造成windows时间老是比实际时间慢八个小时,Ubuntu会与网络同步时间,但是在程序中调用主板时间时仍然是UTC时间 ...
- Java 中 String 的常用方法（一）
上一篇介绍了 String 中的几个常用构造方法,由 String 这个核心对象发散出去关于字符的编码,字符的字节表达,对 GC 的影响,正则表达式,模式匹配,这可能是 Java 里内涵最丰富的对象了 ...
- <数据挖掘导论>读书笔记11异常检测
异常检测的目标是发现与大部分其他对象不同的对象.通常,异常对象被称作离群点(Outlier). 异常检测也称偏差检测(Deviation detection),因为异常对象的属性值明显偏离期望的或者常 ...
- Javad的Validator框架概述
Java EE 6 提出了 Bean Validation 规范,使用注解的方式对 Java Bean 进行约束验证,不局限于某一层次或者某一编程模型,灵活易用.下边将向您系统的介绍该规范的各种特性. ...
- 理解Flexbox：你需要知道的一切
这篇文章介绍了Flexbox模块所有基本概念,而且是介绍Flexbox模块的很好的一篇文章,所以这篇文章非常的长,你要有所准备. 学习Flexbox的曲线 @Philip Roberts在Twitte ...