移动端项目介绍
初始化项目
- vue init webpack vueShop
- 进入项目根目录 cnpm i
- npm run dev
Mint-Ui介绍
- cnpm i mint-ui -S
- 导入所有MintUI组件：
import MintUI from 'mint-ui'
- 导入样式表：
import 'mint-ui/lib/style.css'
- 挂载到Vue身上
Vue.use(MintUI)
- 在 vue 中使用 MintUI中的Button按钮和Toast弹框提示：
primary
Toast({
message: '提示',
position: 'bottom',
duration: 5000
})
注意：使用css component 不需要单独引入组件，但是如果使用js component 并且调用了某方法则需要引入该方法
使用 MUI 代码片段
注意： MUI 不同于 Mint-UI，MUI只是开发出来的一套好用的代码片段，里面提供了配套的样式、配套的HTML代码段，类似于 Bootstrap； 而 Mint-UI，是真正的组件库，是使用 Vue 技术封装出来的 成套的组件，可以无缝的和 VUE项目进行集成开发；
因此，从体验上来说， Mint-UI体验更好，因为这是别人帮我们开发好的现成的Vue组件；
从体验上来说， MUI和Bootstrap类似；
理论上，任何项目都可以使用 MUI 或 Bootstrap，但是，MInt-UI只适用于Vue项目；
注意： MUI 并不能使用 npm 去下载，需要自己手动从 github 上，下载现成的包，自己解压出来，然后手动拷贝到项目中使用；
官网首页
文档地址
- 导入 MUI 的样式表：
import './lib/mui/css/mui.min.css'
- 根据官方提供的文档和example，尝试使用相关的组件
App.vue 组件的基本设置
头部的固定导航栏使用
Mint-UI的Header组件；底部的页签使用
mui的tabbar;购物车的图标，使用 Font Awesome,首先下载包，然后在main.js引入font-awesome.min.css,最后通过类名使用即可
将底部的页签，改造成
router-link来实现单页面的切换；因缺少解析sass文件，需自己配置
cnpm i sass-loader node-sass -S
- Tab Bar 路由激活时候设置高亮的两种方式：
- 全局设置样式如下：
.router-link-active{
color:#007aff !important;
}
- 或者在
new VueRouter的时候，通过linkActiveClass来指定高亮的类：
// 创建路由对象
var router = new VueRouter({
routes: [
{ path: '/', redirect: '/home' }
],
linkActiveClass: 'mui-active'
});
hoem组件
- 轮播图的实现
- 轮播图通过mint-UI的swiper实现
- 发现结构完成之后没有高度，所以自己设置高度
- 下载axios通过 cnpm i axios -S
- 引入axios 请求轮播图接口 拿到数据
- 将请求回来的数据赋值到data里面定义的swiperList，view循环swiperList并生成img
- 将axios设置公有方法
- 在main.js 导入axios import axios from 'axios'
- Vue.prototype 通过Vue的原型添加axios方法
- 组件内部调用则通过 this.axios 调用
- 配置 axios请求 域名 axios.defaults.baseURL
- 九宫格的实现
- 通过mui 九宫格实现基本布局
- 修改九宫格样式（搬砖操作）
- 设置九宫格图片路劲
组件切换动画
1. 给 .tabanim-enter{
transform: translateX(100%);
}
.tabanim-leave-to{
transform: translateX(-100%);
}
.tabanim-leave-active,.tabanim-enter-active{
transition: all 0.3s ease-in-out;
}
3. 去除滚动条
4. 设置动画模式
新闻列表
1. 配置路由 （ router-link跳转 router/index.js 配置路由规则 ）
2. 完成结构 （ 通过mui的图文列表 ），注意：结构拿过来图片地址不对，自己修改
3. 修改样式
4. 发送接口请求数据，将请求回来的数据渲染到页面上
过滤时间
1. Vue.filter()定义全局过滤器
2. 通过moment 实现过滤逻辑
第一步下载
cnpm i moment -S
第二步导入
import moment from 'moment'
第三步使用方法
Vue.filter('fmtDate',function(inp,fmt){
return moment(inp).format(fmt);
})
3. 使用过滤器
新闻详情页
1. 配置路由规则进入新闻详情页
2. 通过路由参数 传参将新闻列表id 传进 新闻详情页
3. 通过 this.$route.params.参数名获取参数
4. 发送请求 将请求回来的数据赋值到data里面
5. 页面渲染
评论区域
1. 首先完成评论区域结构
发表并论
2. 点击发表评论按钮
- 首先给发表按钮注册点击事件
- 点击按钮拿到输入框的值，怎么拿到？（v-model双向数据绑定）
- 发送请求 将输入框的值交给后台
- 完成评论列表结构
-
第一楼
用户：
发表时间：
内容
4. 获取评论列表数据
this.axios.get('/api/getcomments/'+this.id+'?pageindex='+this.pageindex).then(res=>{
if(res.status == 200){
this.commentList = res.data.message
}
})
5. 渲染评论列表
6. 加载更多功能
- 复制mui button 按钮结构
- 给按钮注册点击事件，并让pageindex++后重新获取数据
- 重新获取数据后会发现，数据被覆盖，要想不覆盖需要将数据合并
this.commentList = this.commentList.concat(res.data.message)
- 完善点击发表评论将数据在页面上展示
this.commentList.unshift({
add_time:new Date,
content:this.commentVal,
user_name:'匿名用户'
})
图片列表分类布局
1. 配置路由规则展示图片列表组件
2. 完成滑动导航结构布局
- 导航使用mint-UI的Navbar的头部组建
option A
option B
option C
- 修改选中时及默认的样式
a{
color:#000;
}
.category{
width:100%;
overflow: scroll;
}
.mint-navbar{
display: block;
height:40px;
width:480px;
.mint-tab-item{
float: left;
width:80px;
}
.mint-tab-item.is-selected{
border: 0;
margin: 0;
}
}
- 实现滑动，利用超出滚动头条，将滚动条样式设置透明
::-webkit-scrollbar {
width: 1px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: rgba(0,0,0,0);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0);
}
3. 请求ajax数据，动态渲染导航条
图片列表图片布局
1. 完成图片列表基本结构
2. 动态获取数据并完成列表渲染
3. 实现图片懒加载效果 （利用mint-ui中的v-lazy）
4. 点击导航获取对应分类数据
- 因为导航列表为一个组件，所以点击时间注册失败，此时我们可以手动给导航内容包裹一个a标签，然后给a标签注册点击事件
- 当点击导航的时候应获取对应的图片列表，故将id传到事件函数内部，再赋值给与data里面的数据
- 调用获取图片列表方法重新渲染数据
vue-preview的基本使用
1. 下载包 cnpm i vue-preview -S
2. 在main.js导入并挂载
import VuePreview from 'vue-preview'
Vue.use(VuePreview)
3. 使用组件 和 挂载数据