VUE项目1

最新推荐文章于 2022-06-22 11:13:28 发布

steve1988717

最新推荐文章于 2022-06-22 11:13:28 发布

阅读量263

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/steve1988717/article/details/94188583

本文详细介绍了如何将Vue项目托管到码云，包括项目初始化、配置忽略文件和README，以及使用MUI和Mint-UI实现小图标、轮播图、九宫格等组件，并讲解了如何与后台交互获取数据，最后提到了时间过滤器的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目代码托管（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，因为轮播图只显示在首页，所以，这个组件标签，只需要写在首页组件模板里就可以了

1 2 3

在这里插入图片描述

现在轮播图框架搭起来了，如何从后台获得数据和图片？（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>

在这里插入图片描述