基于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环境(这里也遇到 ...
随机推荐
- xshell本地上传文件至服务器
今天本地写了个项目,想传到服务器部署起来.就上网百度了一下挺多的,一个个记录下,如有雷同,纯属抄袭. lrzsz方法 rz # 检查是否安装 yum -y install lrzsz # 安装 rpm ...
- 2019.4.25 表格表单与HTML5 && CSS3
目录 表格 标签 属性 表格间距离 表格的内边距 表格的边框 样式 边框合并 行合并 列合并 display 表单 标签 属性 提交的网址 请求方式 input相关 扩大响应范围 字符 密码 单选框 ...
- 微信 oauth 登录 ，回调两次，一个坑，记录一下。
在做微信某个功能的时候,大致需求是:静默授权,得到openId ,然后拿着openId调用接口,判断是否关注.如果是关注的,则发放礼券.每个我网站的会员只会发放一次礼券.如果第二次则会提示已领取过礼券 ...
- 通过view实现字段的只读、隐藏操作【转】
原文地址:http://cn.openerp.cn/view_groups/ 在OpenERP V7视图(ir.ui.view)多了一个非常有用的字段(groups_id) 'groups_id': ...
- DB2 命令大全
check Archiving processing 查看日志归档情况 db2 "SELECT DATE(CAST(START_TIME as TIMESTAMP)) as DATE, co ...
- linux 打包 压缩 解压缩
gzip gzip xxx文件 压缩文件xxx,后缀.gz 并且删除原来文件 gzip -tv xxx.gz 测试压缩文件压完整性 压缩当前文件夹所有文件: zip -r ./1.zip ./* -r ...
- 爱奇艺视频显示列表CSS实现
css: body{margin:0;font-size: 12px;font-family: "宋体":} ul{margin:0;padding:0;list-style: n ...
- Manjaro安装笔记
安装后就可以先配置国内的软件源.使用以下命令: #排列源 sudo pacman-mirrors -g https://www.jianshu.com/p/f2c9ee00698c https://w ...
- javascript中数组的方法你真的都了解吗？
本篇文章主要讲述ES5中的数组,包括数组两种创建方式,属性,以及 9 大类 ,总共23个操作方法,非常全面,看完之后ES5数组这一部分基本都了解了,下一篇文章,我会讲述ES6中对数组的加成,新增了哪些 ...
- Redis之数据类型Sting字符串
Redis String(字符串) string是redis最基本的类型,你可以理解成与Memcached一模一样的类型,一个key对应一个value. string类型是二进制安全的.意思是redi ...