本文详细介绍了如何将Vue项目托管到码云，包括项目初始化、配置忽略文件和README，以及使用MUI和Mint-UI实现小图标、轮播图、九宫格等组件，并讲解了如何与后台交互获取数据，最后提到了时间过滤器的使用。
项目代码托管（github 或者 码云）这里使用码云
1·，在上传之前，需要先给项目添加几个文件
① 新建 .gitignore 文件，告诉哪些文件不用上传
② 新建 README.MD 文件，项目的说明
③ 开源项目都有一个开源协议
都准备好了以后，开始执行下面命令
1，在本地项目初始化一个git库，其实是一个文件夹 使用 git init 命令实现
2，git status 查看当前项目文件的提交状态，是否是已经提交了
3, git add . 将要提交的文件，添加到索引库中
4， git commit -m "init my project"
一、下载安装Git
1、下载Git 官方地址为：https://git-scm.com/download/win
下面是项目的开端
import Vue from "../node_modules/vue/dist/vue.js"
import app from "./app.vue"
// 这是引入mintui
import MintUi from "mint-ui"
// 这是引入mintui的样式
import 'mint-ui/lib/style.css'
// 把引入的mintui挂载到vue中去开始使用
Vue.use(MintUi)
import './lib/mui/css/mui.min.css'
var vm = new Vue({
el:'#app',
data:{
msg:"这是什么的技术"
},
render:c=>c(app)
})
<!doctype html>
<html lang="zh-cn">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no,user-scalable=no">
<script src="../dist/bundle.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
</html>
<template>
<div>
<!-- 头部使用的是mintUI的组件 -->
<mt-header fixed title="我的练习mintUI"></mt-header>
<!-- 底部使用的MUI里面“事例”的组件 -->
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item" href="#tabbar">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item mui-active" 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">
<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>
</nav>
</div>
</template>
<script>
export default {
methods:{
}
}
</script>
<style>
</style>
MUI使用小图标和修改小图标
小图标的高亮显示问题？
上面的mui-active 是MUI提供的高亮类
import VueRouter from "vue-router"
var router = new VueRouter({
routes:[
],
linkActiveClass:'mui-active'
})
export default router
import VueRouter from "vue-router"
Vue.use(VueRouter)
import router from "./router.js"
点击tabbar的小图标进行组件切换
首页轮播图的实现？（这里使用了Mint-Ui的swipe组件）
1，如果是单独引入轮播图插件，可以使用下面方法引入
import { Swipe, SwipeItem } from 'mint-ui';
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
2，全局全部引入MINTui 是如下所示
// 这是引入mintui
import MintUi from "mint-ui"
// 这是引入mintui的样式
import 'mint-ui/lib/style.css'
// 把引入的mintui挂载到vue中去开始使用
Vue.use(MintUi)
2，因为轮播图只显示在首页，所以，这个组件标签，只需要写在首页组件模板里就可以了
现在轮播图框架搭起来了，如何从后台获得数据和图片？（vue-resource）
1,先安装从后台获得数据的插件
cnpm i vue-resource -S
2，在入口文件引入和安装
import VueResource from "vue-resource"
Vue.use(VueResource)
3，这里提供了一个免费的api接口或者轮播图数据，接口是 http://vue.studyit.io/api/getlunbo（现在好像不管用了）
九宫格（MUI）
<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-4">
<a href="#">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
<div class="mui-media-body">Email</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">Chat</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
<span class="mui-icon mui-icon-location"></span>
<div class="mui-media-body">location</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">Search</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">Phone</div></a></li>
</ul>
默认进入home页面的，办法，在路由里面写一句跳转匹配
var router = new VueRouter({
routes:[
{path:'/',redirect: '/home'},
{path:'/home',component: HomeContainer},
{path:'/member',component: MemberContainer},
{path:'/shopcar',component: ShopcarContainer},
{path:'/search',component: SearchContainer}
],
linkActiveClass:'mui-active'
})
给每一个tabbar按钮加过渡滑动动画
.v-enter{
opacity: 0;
transform: translate(100%);
}
.v-leave-to{
opacity: 0;
transform: translate(-100%);
position: absolute;
}
.v-enter-active,
.v-leave-active{
transition: all 0.5s ease;
}
首页新闻按钮跳转到新闻列表
制作新闻列表组件（借用MUi）
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-media">
<a href="javascript:;" class="">
<img class="mui-media-object mui-pull-left" src="https://static.hdslb.com/images/member/noface.gif">
<div class="mui-media-body">
幸福
<p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="https://static.hdslb.com/images/member/noface.gif">
<div class="mui-media-body">
木屋
<p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="https://static.hdslb.com/images/member/noface.gif">
<div class="mui-media-body">
CBD
<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
</div>
</a>
</li>
</ul>
与后台结合，获取新闻资讯列表数据
时间过滤器
扫一扫
1944
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
