VUE项目1

项目代码托管（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)
})

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）

            

                
                    
                    
Home
                
            
            

                
                    5
                    
Email
                
            
            

                    
                    
Chat
            

                    
                    
location
            

                    
                    
Search
            

                    
                    
Phone
		        
		

默认进入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）

				

					
						
						

							幸福
							
能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？
						
					
				
				

					
						
						

							木屋
							
想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.
						
					
				
				

					
						
						

							CBD
							
烤炉模式的城，到黄昏，如同打翻的调色盘一般.
						
					
				

			

与后台结合，获取新闻资讯列表数据

时间过滤器