vue项目_vue项目搭建 - CSDN
精华内容
参与话题
  • vue项目-商城app

    千次阅读 2019-06-25 10:56:06
    .gitignore 里面设置上传项目时可以忽略的文件,eg:node_modules 一、制作首页hadder和tabbar 完成Header区域,使用的的是mint-ui中的Header组件 制作底部的Tabbar区域,使用的是mui中的Tabbar.html - 在制作...

    .gitignore 里面设置上传项目时可以忽略的文件,eg:node_modules

    一、制作首页hadder和tabbar

    1. 完成Header区域,使用的的是mint-ui中的Header组件
    2. 制作底部的Tabbar区域,使用的是mui中的Tabbar.html
      - 在制作购物车小图标的时候,先把扩展图标的css样式,拷贝到项目中
      - 再拷贝我们的字体库ttf文件到项目中
      - 为购物车小图标添加图像样式
    3. 要在中间区域放置一个router-view来展示路由匹配的组件

    切换页面(改造tabbar为router-link):

    • 在main.js中引入vue-router import VueRouter from "vue-router"
    • 将a标签改为router-link,href改为to
    • 在router.js中引入路由组件
    	import VueRouter from 'vue-router'
    	
    	// 导入对应的路由组件
    	import HomeContainer from '../components/tabbar/HomeContainer.vue'
    	import MemberContainer from '../components/tabbar/MemberContainer.vue'
    	import ShopcarContainer from '../components/tabbar/ShopcarContainer.vue'
    	import SearchContainer from '../components/tabbar/SearchContainer.vue'
    	
    	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' // 覆盖默认的路由高亮的类,默认的类叫做router-link-active
    	})
    
    	export default router
    
    
    • 给App.vue中添加一个router-view标签

    scss中&符号是交集选择器,不写是后代选择器

    二、制作轮播图

    1. 获取数据使用vue-resource

    2. 在main.js中导入vue-rosource

    3. 在main.js中配置请求路径
      Vue.http.options.root = 'http://www.liulongbin.top:3005'

    • 在script中methods中定义方法,获取数据
    	<script>
    		export default {
    			data () {
    				return{
    					lunbotulist:[]
    				}
    			},
    			created() {
    				this.getlunbotu()
    			},
    			methods: {
    				getlunbotu() {
    					this.$http.get('api/getlunbo').then(res => {
    						if(res.body.status === 0) {
    							this.lunbotulist = res.body.message
    						}
    					})
    				}
    			}
    		}
    	</script>
    

    渲染页面使用v-for循环,在组件中使用v-for时,要使用:key

    三、九宫格到六宫格改造工程

    • 使用mui中的组件,将九宫格改造为六宫格
    • 图标可引入自己的图标,修改样式就ok

    四、组件切换时的动画效果

    用transition将中间内容包起来

    	<transition>
    		  <router-view></router-view>
    	</transition>
    

    设置类

    <style>
    	.v-enter,
    	.v-leave-to {
    		  opacity: 0;
    		  transform: translateX(100%);
    	  }
    	  
    	  .v-enter-active,
    	  .v-leave-active {
    		  transition: all 0.5s ease;
    	  }
    </style>
    

    问题:

    1. Header栏向右偏移
    2. 底部也会偏移,并且出现滚动条
    3. 要进入的元素先向左然后向上飘

    解决:

    • 出现滚动条的原因:因为在切换页面的时候,他的真正宽度是两个页面拼接起来的宽度
      - 给外层container添加一个overflow-x: hidden
    	.app-container {
    	       	padding-top:40px;
    			padding-bottom: 50px;
    			overflow-x: hidden;
    	  }
    
    • 解决底部滚动条问题
    	 .v-enter {
    		  opacity: 0;
    		  transform: translateX(100%);
    	  }
    	  
    	  .v-leave-to {
    		  opacity: 0;
    		  transform: translateX(-100%);
    	  }
    	
    	  .v-enter-active,
    	  .v-leave-active {
    		  transition: all 0.5s ease;
    	  }
    
    • 解决元素飘动问题,给.v-leave-to动画加一个定位
    	.v-enter {
    		  opacity: 0;
    		  transform: translateX(100%);
    	  }
    	  
    	  .v-leave-to {
    		  opacity: 0;
    		  transform: translateX(-100%);
    		  position: absolute;
    	  }
    	
    	  .v-enter-active,
    	  .v-leave-active {
    		  transition: all 0.5s ease;
    	  }
    

    五、改造新闻资讯的路由连接

    • 将a标签改为router-link,href改为to,to=‘home/newslist’
    • 在router.js导入对应的路由组件

    六、新闻资讯页面绘制

    1. 绘制界面,使用mui中的midia-list.html
    2. 使用vue-resource获取数据
    3. 渲染真实数据

    给时间定义一个全局过滤器

    安装moment npm install moment -S

    	import moment from 'moment'   // 导入格式化的时间插件
    	
    	Vue.filter('dateFormat', function (dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
    	  return moment(dataStr).format(pattern)
    	})
    

    使用:

    	<span>发表时间:{{item.add_time | dateFormat('YYYY-MM-DD')}}</span>
    

    七、点击新闻资讯列表跳转到新闻详情

    1. 把列表中的每一项改造为 router-link,同时在跳转的时候应该提供唯一的id标识符
      <router-link :to="'/home/newsinfo/'+item.id">
    2. 创建新闻详情的组件页面NewsInfo.vue
    3. 在路由模块router.js中,将新闻详情的路由地址和组件页面对应起来
    	<script>
    		export default {
    		    data(){
    		        return {
    		            id: this.$route.params.id, //将url地址中传递过来的id值,挂载到data上,方便以后调用
    		            newsinfo:{}
    		        }
    		    }
    		}
    	</script>
    
    1. 实现新闻详情页面布局和渲染

    八、单独封装一个 comment.vue 的评论子组件

    1. 先创建一个单独的comment.vue组件模板

    2. 在需要使用comment组件的页面中,先动手导入comment组件

      import comment from './comment.vue'

    3. 在父组件中,使用components属性。将刚才导入comment组件注册为自己的子组件

    	methods: {
    	        getNewsInfo(){//获取新闻详情
    	            this.$http.get('api/getnew/'+this.id).then(res => {
    	                if(res.body.status ===0 ){
    	                    this.newsinfo = res.body.message[0];
    	                }else {
    	                    Toast('加载失败');
    	                }
    	            })
    	        }
    	    },
    	
    	    components: {// 用来注册子组件
    	        "comment-box": comment
    	    }
    
    1. 将注册子组件时候的注册名称以标签形式在页面中引用即可

      <comment-box></comment-box>

    2. 获取所有的评论数据显示到页面中getComments()方法

      父组件向子组件传值

      <comment-box :id="this.id"></comment-box>

      props: ['id']

    九、点击加载更多评论的功能

    1. 为加载更多按钮绑定点击事件,在事件中,请求下一页数据
    	<mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
    
    1. 点击加载更多,让pageIndex++,然后重新调用this.getComments()方法,重新获取最新一页的数据

    2. 为了防止新数据覆盖老数据的情况,点击加载更多的时候,每当获取到新数据,应该让老数据调用数组concat方法,拼接新数组

    	methods:{
    	        getComments(){// 获取评论
    	            this.$http.get('api/getcomments/' + this.id + '?pageindex=' + this.pageIndex).then(res => {
    	                if(res.body.status === 0){
    	                    // 获取新评论时不会把老数据清空覆盖
    	                    this.comments = this.comments.concat(res.body.message);
    	                }else {
    	                    Toast('获取评论失败');
    	                }
    	            })
    	        },
    	        getMore(){// 加载更多
    	            this.pageIndex++;
    	            this.getComments();
    	        }
    	    }
    

    十、发表评论

    1. 把文本框做双向数据绑定v-model='msg'
    2. 为发表按钮绑定一个事件@click="postComment"
    3. 校验评论内容是否为空,如果为空则Toast提示用户
    4. 通过vue-resource发送一个请求,把评论内容提交给服务器并保存
    5. 当发表评论完成后,重新刷新列表,以查看最近的评论
      - 如果调用getComments方法重新刷新评论列表的话,可能只能得到 最后一页的评论,前几页的评论获取不到
      - 换一种思路:当评论成功后,在客户端手动拼接出一个最新的评论对象,然后调用数组的unshift方法,把最新的评论追加到date中comments的开头;这样就能完美实现刷新评论列表的需求

    在main.js中全局设置post时候表单数据格式组织形式 application/x-www-form-urlencoded

    Vue.http.options.emulateJSON = true

     	postComment(){// 发表评论
    
                // 校验是否为空内容
                if(this.msg.trim().length === 0){
                    return Toast('评论内容不能为空!');
                }
                
                this.$http.post("api/postcomment/" + this.$route.params.id,{content:this.msg.trim()}).then(function(res) {
                    if(res.body.status === 0){
                    	//拼接出一个评论对象
                        var cmt = {user_name: '匿名用户', add_time: Date.now(), content: this.msg.trim()};
                        this.comments.unshift(cmt);
                        this.msg = "";
                    }
                })
            }
    

    十一、制作图片分享页面

    1. 改造图片分析按钮为路由的链接并显示对应的组件页面
    2. 绘制图片列表组件页面结构并美化样式
      - 制作顶部的滑动条
      - 制作底部的图片列表
    3. 获取所有分类,并渲染分类列表

    制作顶部滑动条的坑

    另有博客专门介绍这部分内容:vue在引用mui.js文件时会遇到的各种问题

    1. 使用MUI中的tab-top-webview-main.html
    2. 需要把slider区域的mui-fullscreen类去掉
    3. 滑动条无法正常触发滑动,通过检查官方文档,发现这是JS组件,需要被初始化一下
      - 导入 mui.js
      - 调用官方提供的方式去初始化:
    mui('.mui-scroll-wrapper').scroll({
        deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
    });
    
    1. 我们在初始化滑动条的时候,导入的mui.js ,但是控制台报错: Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode
      - mui.js 中用到了’caller’,‘callee’,and’arguments’,但是webpack打包好的bundle.js 中,默认是启用严格模式的,所以这两者冲突了
      - 解决方案:
      a. 把mui.js中的非严格模式的代码改掉,但是不现实
      b. 把webpack打包时候的严格模式禁用掉
      - 最终,我们选择了plan B移除严格模式:使用这个插件babel-plugin-transform-remove-strict-mode
    2. 刚进入图片分享页面的时候滑动条无法正常工作,然后发现如果要初始化滑动条,必须要等DOM元素加载完毕,所以我们把初始化滑动条的代码,搬到了mounted生命周期函数中
    3. 当滑动条调试OK后,发现tabbar无法正常工作了,这时需要把每个tabbar按钮的样式中mui-tab-item重新改一下名字,并且复制其样式

    十二、制作图片列表区域

    1. 图片列表需要使用懒加载技术,使用Mint-UI提供的现成的组件lazy-load
    2. 渲染图片列表数据
    3. 实现了点击图片跳转到图片详情页面
    4. 实现详情页面的布局和美化,同时获取数据渲染页面
    5. 实现图片详情中缩略图的功能
      - 使用插件vue-preview这个缩略图插件
      安装 npm i vue-preview -S
      直接使用标签 <vue-preview :slides="list"></vue-preview>
      - 获取到所有的图片列表
      - 每个图片数据对象中,必须有w和h属性

    十三、完成商品列表页面

    • 绘制商品列表页面
    • 实现商品列表的经典两列布局
    	.good-list {
    	    display: flex;
    	    flex-wrap: wrap; 
    	    padding: 7px;
    	    justify-content: space-between;
    	
    	    .goods-item {
    	        padding: 2px;
    	        width: 49%;
    	        border: 1px solid #ccc;
    	        box-shadow: 0 0 8px #ccc;
    	        margin: 4px 0;
    	        display: flex;
    	        flex-direction: column;
    	        justify-content: space-between;
    	        min-height: 293px;
    	
    	        img {
    	            width: 100%;
    	        }
    	
    	        .title {
    	            font-size: 14px;
    	        }
    	
    	        .info {
    	            background-color: #ddd;
    	            
    	            p {
    	                margin: 0;
    	                padding: 5px;
    	            }
    	
    	            .price {
    	
    	                .now {
    	                        color: red;
    	                        font-weight: bold;
    	                        font-size: 16px;
    	                }
    	
    	                .old {
    	                    text-decoration: line-through;
    	                    font-size: 12px;
    	                    margin-left: 10px;
    	                }
    	            }
    	
    	            .sell {
    	                display: flex;
    	                justify-content: space-between;
    	            }
    	        }
    	    }
    	}
    
    • 加载商品列表中的数据并实现加载更多

    十四、商品详情页面

    • 改造路由链接,绘制商品详情页面并美化
    • 使用编程式导航,传递对象
    		   goDesc(id) {
    	            this.$router.push({name: 'goodsdesc', params: {id}})
    	        },
    	
    	        goComment(id) {
    	            this.$router.push({name: 'goodscomment', params: {id}})
    	        }
    
    • 绘制商品购买区域样式
    • 使用编程式导航实现图文介绍和商品评论跳转
    • 完成商品详情中的图文介绍和评论页面的渲染

    十五、加入购物车的小球动画

    • 绘制小球,添加样式
    	 .ball {
    	        width: 15px;
    	        height: 15px;
    	        border-radius: 50%;
    	        background-color: red;
    	        position: absolute;
    	        z-index: 99;
    	        top: 390px;
    	        left: 146px;
    	    }
    
    • 小球动画
    		<transition 
                @before-enter="beforeEnter"
                @enter="enter"
                @after-enter="afterEnter">
                <div class="ball" v-show="ballFlag" ref="ball"></div>
            </transition>
    
    		beforeEnter(el) {
                el.style.transform = 'translate(0,0)'
            },
    
            enter(el,done) {
            	//先得到徽标的横纵坐标,再得到小球的横纵坐标
            	//然后让 y 值求差, x 值也求差,得到的结果,就是横纵坐标要位移的距离
                el.offsetWidth;
                //获取小球在页面上的位置
                const ballPosition = this.$refs.ball.getBoundingClientRect();
                //获取徽标在页面上的位置
                const badgePosition = document.getElementById('badge').getBoundingClientRect();
                const xDist = badgePosition.left - ballPosition.left;
                const yDist = badgePosition.top - ballPosition.top;
    			
                el.style.transform = `translate(${xDist}px,${yDist}px)`;
                el.style.transition = 'all 0.5s cubic-bezier(.4,-0.3,1,.68)';
                done()
            },
    
            afterEnter(el) {
                this.ballFlag = !this.ballFlag
            }
    

    十六、加入购物车及购物车页面的数量传递问题

    如何实现加入购物车时,拿到选择的数量

    • 涉及到子组件向父组件传值(事件调用机制)
    • 事件调用本质:父向子传递方法,子调用这个方法, 同时把数据当作参数传递给这个方法
    		getSelectedCount(count) {
    			//当子组件把选中的数量传递给父组件时,把选中的值保存到data上
                this.selectedCount = count;
    
            }
    

    <p>购买数量:<numbox @getcount="getSelectedCount" :max="goodsinfo.stock_quantity"></numbox></p>

    • 子组件什么时候把值传给父组件

    <input id="test" class="mui-input-numbox" type="number" value="1" @change="countChanged" ref="numbox"/>

    	methods: {
            countChanged() {
            	//每当文本框的数据被修改时,立即把最新的数据通过事件调用,传递给父组件
                this.$emit("getcount",parseInt(this.$refs.numbox.value));
            }
        },
    
        props: ["max"], // 设置可加入购物车数量最大值
    
        watch: {
        		//使用watch监听父组件传递过来的max值
            	max: function(newVal,oldVal) {
                mui(".mui-numbox").numbox().setOption("max",newVal);
            }
        }
    

    在父组件的getSelectedCount()方法中可以拿到传递过来的值

    十七、使用vuex并设计购物车数据存储方式

    vuex是什么?怎么用?

    将商品对象设计成以下样式

    { id: 商品id, count: 要购买数量, price: 商品价格, selected: false }

    • 在goodsInfo.vue中拼接出一个要保存到store中car数组里的商品信息对象
    • 点击加入购物车,把商品信息保存到store中的car上
      - 如果在购物车中,之前就已经有了这个对应的商品了,那么,只需要更新数据
      - 如果没有,则直接把商品数量push到car中即可

    项目源码:商城app源码 vue_app

    展开全文
  • 适合初学者练手的vue项目(附github源码)

    万次阅读 多人点赞 2019-01-24 14:00:52
    vue慢慢的成为了前端最受欢迎的框架之一,在很多项目之中开发都能用得到,如今也已经发展到3.0了,可能是因为这个框架可以提高工作效率,因此受到大家的追捧,在之前的文章里面也说过,2019年,大前端学习小程序和...
        

    vue慢慢的成为了前端最受欢迎的框架之一,在很多项目之中开发都能用得到,如今也已经发展到3.0了,可能是因为这个框架可以提高工作效率,因此受到大家的追捧,在之前的文章里面也说过,2019年,大前端学习小程序和vue是必备技能。

    如果在平时的工作里,有些公司用不到这两项技能,那你也要在业余的时间里面,找一些教程和练手的vue小项目。以下是今年的一些可以练笔的项目,这些源码稍微学习其中的几个,基础能力都能够有所进步。

    1:Vue2.0入门项目
    https://github.com/SD-Gaming/Vue2.0_to_do_list-addName-

    2:慕课网Vue2.0购物车教程(注释版)
    https://github.com/SD-Gaming/Vue2.0-ShoppingCart-MOOC

    3:初中级项目:CNode社区
    https://github.com/SD-Gaming/Vue2.0_CNode.bbs

    Vue初/中级项目,CnodeJS社区重构。( a junior project of Vue.js, rewrite cnodejs.org )预览(DEMO): https://heuristic-stonebraker-33e1b8.…

    4:基于vue2.0的网易云音乐播放器,api来自于NeteaseCloudMusicApi,v2.0为最新版本 http://www.daiwei.org/vue-music/

    想用vue把我现在的个人网站重新写一下,新的风格,新的技术,什么都是新的
    https://github.com/IFmiss/vue-website

    5:Vue 音乐搜索、播放 Demo
    https://github.com/Sioxas/vue-music/

    6:基于vue2 + vue-router + vuex 构建的一个音乐类单页面应用 —— echo回声 http://echo.liansixin.win
    https://github.com/uncleLian/vue2-echo

    7:基于vue2 + vue-router + vuex 构建的一个新闻类单页面应用 —— 今日头条(移动端) http://toutiao.liansixin.win
    https://github.com/uncleLian/vue2-news

    8:Xiaomi Mobile Mall. 小米移动商城 http://show.thisummer.com/mi
    https://github.com/Jon-Millent/mi-shop

    9:仿网易云WebApp,基于vue实现的WebAPP
    https://github.com/tgsx/Web_MusicAPP

    10:vue+express+socket.io仿微博、微信的聊天社交平台
    https://github.com/CBDxin/VueSocial

    11:vue2 +vue-router2 + es6 +webpack 高仿饿了么app商家详情,demo:https://www.myblogbo.com/sell
    https://github.com/chengengfengC/vue2.x-sell

    12:vue+router+vue-cli+webpack
    https://github.com/Hacker233/Unstructured-data-processing

    13:高仿饿了么App ---内附教程
    https://github.com/QAQXiYangYang/vue-ele

    14:一个精制的音乐播放软件,使用了vue2.0及vue全家桶。
    https://github.com/ZHOUYUANN/vuemusic

    15:vue2.0阅读器 http://huangshouqi.com/vue-reader.html
    https://github.com/huangshouqi/vue-reader

    16:基于webpack2 + Vue2搭建的PC端后台运维管理系统脚手架,已集成VUE2全家桶:
    https://github.com/rootsli/vue2admin

    17:全家桶做了个简单的移动端购物app
    https://github.com/OEEO/shoppingApp

    18:VUE 后台管理界面案例(mock+express实现前后端分离)
    https://github.com/toutouping/vue-web-demo

    19:各站点数据整合;图片,视频,文章;在线云音乐播放器;
    https://github.com/linkenliu/MissCloudVue

    20:饿了么点餐系统
    https://github.com/SimonZhangITer/VueDemo_Sell_Eleme

    21:vue音乐播放器
    https://github.com/LuanMingyang/vue2-music-app

    22:基于vuejs+koa2+mysql的高仿饿了么移动APP
    https://github.com/The-Never/elm

    23:vue全家桶+localStorage实现一个简易的通讯录
    https://github.com/windlany/vue-mail-list

    24:用vue仿的小米商城
    https://github.com/shiyaming1994/mi

    25:仿严选商城
    https://github.com/wwp123/shopping-yanxuan

    26:music webapp
    https://github.com/aloneWang/vue-music

    27:vue项目(vue全家桶+nodejs) 电商网站
    https://github.com/LadyChatterleyLover/mall

    28:基于Vue2.0+Vuex+Axios+NodeJs+Express+MySQL实现京东移动web商城

    https://github.com/huangche007/vue-jd

    原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1
    90后前端妹子,爱编程,爱运营,爱摄影,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。对于博客上面有存在疑问或者不会的问题,可以加入qq技术交流群聊:473819131。

    展开全文
  • Vue开源项目汇总(史上最全)

    万次阅读 多人点赞 2019-01-09 08:42:05
    目录 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 ...element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuej...

    转自:https://blog.csdn.net/aaronzzq/article/details/80936708

    目录

    UI组件

    开发框架

    实用库

    服务端

    • nuxt.js ★4564 - 用于服务器渲染Vue app的最小化框架
    • unvue ★310 - 使用简单的通用VueJS应用
    • express-vue ★302 - 简单的使用服务器端渲染vue.js
    • vue-ssr ★92 - 非常简单的VueJS服务器端渲染模板
    • doubanMovie-SSR ★85 - Vue豆瓣电影服务端渲染
    • vue-ssr ★80 - 结合Express使用Vue2服务端渲染
    • vue-easy-renderer ★44 - Nodejs服务端渲染

    辅助工具

    应用实例

    Demo示例

    展开全文
  • VUE实战项目之喵喵电影

    千人学习 2019-05-13 17:27:50
    2019全新打造Web前端教程,Vue实战项目之喵喵电影,详细讲解项目演示与开发流程。
  • Vue实战项目开发--首页开发

    万次阅读 多人点赞 2018-10-29 22:39:18
    注意:项目的图片资源都是去哪儿网站的在线图片(图片来源网站),只可以用来练习哦,小心侵权 1. 首页header区域开发    在home目录下新建一个components文件夹,然后把首页home拆分成不同的组件放在components...

    首页开发

    注意:项目的图片资源都是去哪儿网站的在线图片(图片来源网站),只可以用来练习哦,小心侵权

    1. 首页header区域开发

           

       在home目录下新建一个components文件夹,然后把首页home拆分成不同的组件放在components文件夹下,最后通过在home.vue中引用对应的组件就可以了

     主要编写的代码有Home.vue和Header.vue

     home.vue: 

    <template>
    <div>
      <home-header></home-header>
    </div>
    </template>
    <script>
    import HomeHeader from './components/Header'
    export default {
      name: 'Home',
      components:{
        HomeHeader
      },
      data () {
        return {
          
        }
      },
      computed: {},
      created () {},
      methods: {}
    }
    </script>
    <style lang="less" scoped></style>
    

        Header.vue

    <template>
      <div class="header">
        <div class="header-left">返回</div>
        <div class="header-input">输入城市/经典/游玩主题</div>
        <div class="header-right">城市</div>
      </div>
    </template>
    <script>
    export default {
      name: 'HomeHeader',
      data () {
        return {
          
        }
      },
      computed: {},
      created () {},
      methods: {}
    }
    </script>
    <style lang="stylus" scoped>
      .header
        display: flex
        line-height: .86rem
        background: #00bcd4
        color: #fff
        .header-left
          width: .64rem 
          float: left
        .header-input
          flex: 1
          height: .64rem
          line-height .64rem
          margin-left: .2rem 
          margin-top: .12rem
          background: #ffffff
          border-radius: .1rem
          color: #ccc
        .header-right
          width: 1.24rem
          float: right
          text-align : center
    </style>
    

       Header.vue的样式使用stylus预处理框架来写的css样式,需要安装依赖

    npm install stylus stylus-loader --save

    iconfont的使用和代码的优化

       在iconfont网站注册登录后,并创建自己的项目的图标库后,把你需要的图标加入到这个项目中

    下载到本地后,在项目的assets/styles中新建一个iconfont文件夹,然后把刚才下载的文件解压,把里面这几个文件  iconfont.eot、iconfont.svg、iconfont.ttf和iconfont.woff放到新建的iconfont文件夹中,把iconfont.css放到assets/styles路径下,并修改iconfont.css的对前面四个文件的引用(因为前面四个文件的路径变化了):

    
    @font-face {font-family: "iconfont";
      src: url('./iconfont/iconfont.eot?t=1540351455180'); /* IE9*/
      src: url('./iconfont/iconfont.eot?t=1540351455180#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAS4AAsAAAAABywAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY8mkksY21hcAAAAYAAAABgAAABnLTOHs9nbHlmAAAB4AAAANIAAADsyjr7HGhlYWQAAAK0AAAALwAAADYTC1G+aGhlYQAAAuQAAAAcAAAAJAfeA4VobXR4AAADAAAAAA4AAAAQEAAAAGxvY2EAAAMQAAAACgAAAAoAngBobWF4cAAAAxwAAAAfAAAAIAERADBuYW1lAAADPAAAAUUAAAJtPlT+fXBvc3QAAASEAAAAMgAAAEOSzck0eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByeqTw3Z27438AQw9zM0AAUZgTJAQDkYwxCeJztkMENgEAIBAdRczGW4dOXMV4/vqz8rgwFzodFuGQIbAiPBQZAjdXoQS4E12muhK9M4fcctierDspStprv+zuFJC5STJ1/lpFfc/T93dRTa3jGZWt4rjU30AfLSRNieJxjYGRg+N/A9IO5mUGIgYGTkU1EnFHMyMxEnVHNxJzRTI+R6dg/F3EJxn0cYgIc/5w42Bn3cnPIM5f/s5F0kPznziEoysG4k0OMk/Ewtzw7AxAwA83bz1zK7MDAzSDOoMzAoKrHqG7HaC7HKM4HZgC5fIzscoysanaMYvKMYnyMauqMt9a+YGF5sXYdiFw38SALy8GJE0AkYy8Xs6gshyOY5AHKwdQ5wFRMmHjQiltGgJHLH0wyMIIcwcLA1MDABLSbUZEJSP9haAByGADaMDL4AAB4nGNgZGBgAOLOzkOi8fw2Xxm4WRhA4Po3tvsI+n8DCwNzM5DLwcAEEgUAO60LEQB4nGNgZGBgbvjfwBDDwgACQJKRARWwAABHCgJteJxjYWBgYEHCAACwABEAAAAAAAAAKABoAHYAAHicY2BkYGBgYVBhYGYAASYg5gJCBob/YD4DAAx/AUIAeJxlj01OwzAQhV/6B6QSqqhgh+QFYgEo/RGrblhUavdddN+mTpsqiSPHrdQDcB6OwAk4AtyAO/BIJ5s2lsffvHljTwDc4Acejt8t95E9XDI7cg0XuBeuU38QbpBfhJto41W4Rf1N2MczpsJtdGF5g9e4YvaEd2EPHXwI13CNT+E69S/hBvlbuIk7/Aq30PHqwj7mXle4jUcv9sdWL5xeqeVBxaHJIpM5v4KZXu+Sha3S6pxrW8QmU4OgX0lTnWlb3VPs10PnIhVZk6oJqzpJjMqt2erQBRvn8lGvF4kehCblWGP+tsYCjnEFhSUOjDFCGGSIyujoO1Vm9K+xQ8Jee1Y9zed0WxTU/3OFAQL0z1xTurLSeTpPgT1fG1J1dCtuy56UNJFezUkSskJe1rZUQuoBNmVXjhF6XNGJPyhnSP8ACVpuyAAAAHicY2BigAAuBuyAhZGJkZmRhZGVgS0tMS+jNJOtOL+0uDSfPSszMa8kv5SBAQBvVQhZAAA=') format('woff'),
      url('./iconfont/iconfont.ttf?t=1540351455180') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
      url('./iconfont/iconfont.svg?t=1540351455180#iconfont') format('svg'); /* iOS 4.1- */
    }
    
    .iconfont {
      font-family:"iconfont" !important;
      font-size:16px;
      font-style:normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    

    注意:这里有三种使用图标的样式,你可以看下载的文件里三种不同的引入方式,点击打开就可以查看了(特别重要

     不同的引用方式,复制不同的代码

    然后在main.js中引入就可以使用了

    import './assets/styles/iconfont.css'

    使用:

     <i class="iconfont">&#xe624;</i>

    代码优化:在build的webpack.base.conf.js中这样增加这段代码

       

    然后在main.js和Header.vue中就可以修改引入方式(注意:)

    main.js:

    import 'styles/reset.css'
    import 'styles/border.css'
    import 'styles/iconfont.css'

     Header.vue:这里是styuls的css预处理设置的css

     @import '~styles/varibles.styl'

       varibles.styl:

    $bgColor = #00bcd4

       然后就可以在Header.vue中使用:

    @import '~styles/varibles.styl'
      .header
        display flex
        line-height .86rem
        background $bgColor
        color #fff

    首页轮播图

    因为新加一个功能,然后就可以在GitHub上创建一个index-swiper分支,可以参考这个博客(GitHub--创建新的分支(转)

    使用轮播图需要安装一个插件(插件地址:vue-awesome-awiper):

    npm install vue-awesome-swiper@2.6.7 --save

    然后就是引入这个这个插件,分别可以全局引入和局部引入(具体的操作就看上面的插件地址中有说明)

    全局引入:

    import Vue from 'vue'
    import VueAwesomeSwiper from 'vue-awesome-swiper'
    
    // require styles
    import 'swiper/dist/css/swiper.css'
    
    Vue.use(VueAwesomeSwiper, /* { default global options } */)

    局部引入:

    import 'swiper/dist/css/swiper.css'
    
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    
    export default {
      components: {
        swiper,
        swiperSlide
      }
    }

    Swiper.vue:

    <template>
        <div class="wrapper">
            <swiper :options="swiperOption" >
                <swiper-slide v-for="item of swiperList" :key="item.id">
                    <img class="swiper-img" :src="item.imgUrl" alt="">
                </swiper-slide>
                <div class="swiper-pagination"  slot="pagination"></div>
            </swiper>
        </div> 
    </template>
    <script>
    export default {
        name:'HomeSwiper',
        data () {
            return {
                swiperOption:{
                    pagination: '.swiper-pagination',
                    loop: true
                },
                swiperList: [
                    {
                        id: '0001',
                        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1810/e0/c99056cd01148902.jpg_750x200_8b93d0b5.jpg'
                    },
                    {
                        id: '0002',
                        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1808/7e/19b06067afac3402.jpg_750x200_f613313a.jpg'
                    },
                    {
                        id: '0003',
                        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1809/2d/0d7dc3400a50b502.jpg_750x200_4ca95dd4.jpg'
                    }
                ]
            }
        }
    }
    </script>
    <style lang="stylus" scoped>
        .wrapper >>> .swiper-pagination-bullet-active
            background #ffffff
        .wrapper
            width 100%
            height 0
            overflow hidden
            padding-bottom 26.66%
            background #eeeeee
            // height 31.25vw (浏览器有差异,不建议)
            .swiper-img
                width 100% 
    </style>
    

    Home.vue(改变):

    <template>
    <div>
      <home-header></home-header>
      <home-swiper></home-swiper>
    </div>
    </template>
    <script>
    import HomeHeader from './components/Header'
    import HomeSwiper from './components/Swiper'
    export default {
      name: 'Home',
      components:{
        HomeHeader,
        HomeSwiper
      },
      data () {
        return {
          
        }
      },
      computed: {},
      created () {},
      methods: {}
    }
    </script>
    <style lang="less" scoped></style>
    

    如果你是分支上进行这部分的代码的开发,则需要执行以下操作:

    git add .
    git commit -m '这里写这次提交的说明' 
    git push <- 上传index-swiper分支上->
     
    git checkout master <- 切换回主分支->
    git merge index-swiper <- 将index-swiper分支合并到主分支上->

    图标区域页面布局

    这里我们新建了一个分支index-icons,用于icons图标区域的功能实现,这里主要看代码就可以了

    <template>
      <div class="icons">
        <div class="icon">
          <div class="icon-img">
            <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" alt="">
          </div>
          <p class="icon-desc">热门景点</p>
        </div>
        <div class="icon">
          <div class="icon-img">
            <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" alt="">
          </div>
          <p class="icon-desc">热门景点</p>
        </div>
        <div class="icon">
          <div class="icon-img">
            <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" alt="">
          </div>
          <p class="icon-desc">热门景点</p>
        </div>
        <div class="icon">
          <div class="icon-img">
            <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" alt="">
          </div>
          <p class="icon-desc">热门景点</p>
        </div>
        <div class="icon">
          <div class="icon-img">
            <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" alt="">
          </div>
          <p class="icon-desc">热门景点</p>
        </div>
        <div class="icon">
          <div class="icon-img">
            <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" alt="">
          </div>
          <p class="icon-desc">热门景点</p>
        </div>
        <div class="icon">
          <div class="icon-img">
            <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" alt="">
          </div>
          <p class="icon-desc">热门景点</p>
        </div>
        <div class="icon">
          <div class="icon-img">
            <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" alt="">
          </div>
          <p class="icon-desc">热门景点</p>
        </div>
        <div class="icon">
          <div class="icon-img">
            <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" alt="">
          </div>
          <p class="icon-desc">热门景点</p>
        </div>
      </div>
    </template>
    <script>
    export default {
      name: 'HomeIcons'
    }
    </script>
    <style lang="stylus" scoped>
      @import '~styles/varibles.styl';
      .icons
        width 100%
        overflow hidden
        height 0
        padding-bottom 50%
        .icon
          position relative
          overflow hidden
          float left
          width 25%
          height 0
          padding-bottom 25%
          .icon-img
            position absolute
            top 0
            left 0
            right 0
            bottom .44rem
            box-sizing border-box
            padding .1rem
            .icon-img-content 
              display block
              margin 0 auto
              height 100%
          .icon-desc
            position absolute
            left 0
            right 0
            bottom 0
            height .44rem
            line-height .44rem
            text-align center
            color $darkTextColor
    </style>
    

    Home.vue:

    <template>
      <div>
        <home-header></home-header>
        <home-swiper></home-swiper>
        <home-icons></home-icons>  (新增的)
      </div>
    </template>
    
    <script>
    import HomeHeader from './components/Header'
    import HomeSwiper from './components/Swiper'
    import HomeIcons from './components/Icons' (import引入)
    export default {
      name: 'Home',
      components:{
        HomeHeader,
        HomeSwiper,
        HomeIcons   (注册)
      },
      data () {
        return {
          
        }
      },
      computed: {},
      created () {},
      methods: {}
    }
    </script>
    <style lang="less" scoped></style>
    

    图标区域逻辑实现

    Icons.vue:

    <template>
      <div class="icons">
        <swiper :options="swiperOption">
          <swiper-slide v-for="(page,index) of pages" :key="index"
          >
            <div 
              class="icon"
              v-for="item of page"
              :key="item.id"
            >
              <div class="icon-img">
                <img class="icon-img-content" :src="item.imgUrl" alt="">
              </div>
              <p class="icon-desc">{{item.desc}}</p>
            </div> 
          </swiper-slide>
        </swiper>
      </div>
    </template>
    <script>
    export default {
      name: 'HomeIcons',
      data () {
        return {
          swiperOption:{
            autoplay: false
          },
          iconList: [
            {
              id:'0001',
              imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
              desc: '景点门票'
            },
            {
              id:'0002',
              imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/ab/6f7d6e44963c9302.png',
              desc: '泡温泉'
            },
            {
              id:'0003',
              imgUrl:'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',
              desc: '成都必游'
            },
            {
              id:'0004',
              imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/e3/67df61427c8e1302.png',
              desc: '川剧变脸'
            },
            {
              id:'0005',
              imgUrl:'https://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png',
              desc: '打卡圣地'
            },
            {
              id:'0006',
              imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/ea/01d081dacb03cc02.png',
              desc: '赏秋色'
            },
            {
              id:'0007',
              imgUrl:'http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png',
              desc: '一日游'
            },
            {
              id:'0008',
              imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/54/35899492b1302802.png',
              desc: '成都熊猫基地'
            },
             {
              id:'0009',
              imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
              desc: '全部'
            }
          ]
        }
      },
      computed: {
        pages () {
          const pages = []
          this.iconList.forEach((item,index) => {
            const page = Math.floor(index / 8)
            if(!pages[page]) {
              pages[page] = []
            }
            pages[page].push(item)
          })
          return pages
        }
      }
    }
    </script>
    <style lang="stylus" scoped>
      @import '~styles/varibles.styl';
      @import '~styles/mixins.styl';
      .icons >>> .swiper-container
        height 0
        padding-bottom 50%
      .icon
        position relative
        overflow hidden
        float left
        width 25%
        height 0
        padding-bottom 25%
        .icon-img
          position absolute
          top 0
          left 0
          right 0
          bottom .44rem
          box-sizing border-box
          padding .1rem
          .icon-img-content 
            display block
            margin 0 auto
            height 100%
        .icon-desc
          position absolute
          left 0
          right 0
          bottom 0
          height .44rem
          line-height .44rem
          text-align center
          color $darkTextColor
          ellipsis() 
    </style>
    

    注意:这里css样式设置布局和计算属性来把原来的数组处理成了一个二维数组

    mixins.styl(用stylus把常用的样式封装起来):

    ellipsis() 
      overflow hidden
      white-space nowrap
      text-overflow ellipsis

    *Icons.vue的css样式部分(注意这里是在Icons.vue里面的,使用stylus来写的css样式):

    <style lang="stylus" scoped>
      @import '~styles/varibles.styl';
      @import '~styles/mixins.styl';
      .icons >>> .swiper-container
        height 0
        padding-bottom 50%
      .icon
        position relative
        overflow hidden
        float left
        width 25%
        height 0
        padding-bottom 25%
        .icon-img
          position absolute
          top 0
          left 0
          right 0
          bottom .44rem
          box-sizing border-box
          padding .1rem
          .icon-img-content 
            display block
            margin 0 auto
            height 100%
        .icon-desc
          position absolute
          left 0
          right 0
          bottom 0
          height .44rem
          line-height .44rem
          text-align center
          color $darkTextColor
          ellipsis() 
    </style>

    *计算属性(注意这里是Icons.vue中的计算属性,把iconList处理成的一个二维数组,再使用两层v-for来循环出所有的图标,让超过8个的图标数组可以显示在第二页,滑动可以看到):

    computed: {
        pages () {
          const pages = []
          this.iconList.forEach((item,index) => {
            const page = Math.floor(index / 8)
            if(!pages[page]) {
              pages[page] = []
            }
            pages[page].push(item)
          })
          return pages
        }
      }

    第一页:

    第二页:

    推荐组建开发

    Recommend.vue

    <template>
      <div>
        <div class="title">热销推荐</div>
        <ul>
          <li class="item border-bottom" v-for="item of recommendList" :key="item.key">
            <img class="item-img" :src="item.imgUrl" alt="">
            <div class="item-info">
              <p class="item-title">{{item.title}}</p>
              <p class="item-desc">{{item.desc}}</p>
              <button class="item-button">查看详情</button>
            </div>
          </li>
        </ul>
      </div>
    </template>
    <script>
    export default {
      name: 'HomeRecommend',
      data () {
        return {
          recommendList: [
            {
              id: '0001',
              imgUrl: 'http://img1.qunarzz.com/sight/p0/1612/1d/1d9a740c1f9e0efaa3.img.jpg_200x200_63285bd9.jpg',
              title: '成都海昌极地海洋公园',
              desc: '蠢萌企鹅陪你嗨翻这个秋'
            },
             {
              id: '0002',
              imgUrl: 'http://img1.qunarzz.com/sight/p0/201407/03/a584374ee80b738e2600d6bcaf1299e3.jpg_200x200_c26fb243.jpg',
              title: '都江堰',
              desc: '气势磅礴的“世界水利文化鼻祖'
            },
             {
              id: '0003',
              imgUrl: 'http://img1.qunarzz.com/sight/p0/201301/16/ae96ce4058bd5cf093835fbb.jpg_200x200_e4cb9743.jpg',
              title: '青城道温泉',
              desc: '吐纳青城气息,享受自然温暖'
            },
            {
              id: '0004',
              imgUrl: 'http://img1.qunarzz.com/sight/p0/201307/23/b8db11dca4378903c8d65eac.jpg_200x200_56f59a84.jpg',
              title: '成都动物园',
              desc: '?好评如潮,小伙伴热推景点~'
            }
          ]
        }
      }
    }
    </script>
    <style lang="stylus" scoped>
      @import '~styles/mixins.styl'
      .title
        margin-top .2rem
        line-height .8rem
        background #eee 
        text-indent .2rem
      .item
        overflow hidden
        display flex
        height 1.9rem
        .item-img
          width 1.7rem
          height 1.7rem
          padding .1rem
        .item-info
          flex 1
          padding .1rem
          min-width 0
          .item-title 
            line-height .54rem
            font-size .32rem
            ellipsis() 
          .item-desc
            line-height .4rem
            color #ccc
            ellipsis() 
          .item-button
            line-height .44rem
            margin-top .2rem
            background #ff9300
            padding 0 .2rem
            border-radius  .06rem
            color #fff
    </style>
    

    Home.vue:

    <template>
      <div>
        <home-header></home-header>
        <home-swiper></home-swiper>
        <home-icons></home-icons>
        <home-recommend></home-recommend>
      </div>
    </template>
    
    <script>
    import HomeHeader from './components/Header'
    import HomeSwiper from './components/Swiper'
    import HomeIcons from './components/Icons'
    import HomeRecommend from './components/Recommend'
    export default {
      name: 'Home',
      components:{
        HomeHeader,
        HomeSwiper,
        HomeIcons,
        HomeRecommend
      },
      data () {
        return {
          
        }
      },
      computed: {},
      created () {},
      methods: {}
    }
    </script>
    
    <style lang="less" scoped></style>
    

    效果图:

    周末去哪儿-模块

    直接把Recommend.vue的内容复制到Weekend.vue中,然后把name修改了,在把样式修改了,就可以了

    Weekend.vue:

    <template>
      <div>
        <div class="title">周末去哪儿</div>
        <ul>
          <li 
            class="item border-bottom" 
            v-for="item of recommendList" 
            :key="item.key"
          > 
            <div class="item-img-wrapper">
              <img class="item-img" :src="item.imgUrl" alt="">
            </div>
            <div class="item-info">
              <p class="item-title">{{item.title}}</p>
              <p class="item-desc">{{item.desc}}</p>
            </div>
          </li>
        </ul>
      </div>
    </template>
    <script>
    export default {
      name: 'HomeWeekend',
      data () {
        return {
          recommendList: [
            {
              id: '0001',
              imgUrl: 'http://img1.qunarzz.com/sight/source/1509/ff/4184c6c13edbb.jpg_r_640x214_60474b61.jpg',
              title: '成都周边秋色',
              desc: '细数成都周边秋天最美仙境'
            },
             {
              id: '0002',
              imgUrl: 'http://img1.qunarzz.com/sight/source/1505/a2/78e4dbcfd45a6d.jpg_r_640x214_7a62b06a.jpg',
              title: '成都必游TOP10',
              desc: '成都的标志,也是现代人对老成都的记忆'
            },
             {
              id: '0003',
              imgUrl: 'http://img1.qunarzz.com/sight/source/1505/63/0ffcb5c329a19c.jpg_r_640x214_93fd1e5a.jpg',
              title: '慢游成都最美古镇',
              desc: '撷取一份悠闲,寻觅散落在时光里的幸福'
            },
            {
              id: '0004',
              imgUrl: 'http://img1.qunarzz.com/sight/source/1505/b8/e6206794272459.jpg_r_640x214_a002ded9.jpg',
              title: '郊野户外深呼吸',
              desc: '做个久违的深呼吸,来一场清肺之旅'
            }
          ]
        }
      }
    }
    </script>
    <style lang="stylus" scoped>
      @import '~styles/mixins.styl'
      .title
        margin-top .2rem
        line-height .8rem
        background #eee 
        text-indent .2rem
      .item-img-wrapper
        overflow hidden
        height 0
        padding-bottom 33.9%
        .item-img
          width 100%
      .item-info
        padding .1rem
        .item-title 
          line-height .54rem
          font-size .32rem
          ellipsis() 
        .item-desc
          line-height .4rem
          color #ccc
          ellipsis() 
    </style>
    

    Home.vue

    <template>
      <div>
        <home-header></home-header>
        <home-swiper></home-swiper>
        <home-icons></home-icons>
        <home-recommend></home-recommend>
        <home-weekend></home-weekend>
      </div>
    </template>
    
    <script>
    import HomeHeader from './components/Header'
    import HomeSwiper from './components/Swiper'
    import HomeIcons from './components/Icons'
    import HomeRecommend from './components/Recommend'
    import HomeWeekend from './components/Weekend'
    export default {
      name: 'Home',
      components:{
        HomeHeader,
        HomeSwiper,
        HomeIcons,
        HomeRecommend,
        HomeWeekend
      },
      data () {
        return {
          
        }
      },
      computed: {},
      created () {},
      methods: {}
    }
    </script>
    
    <style lang="less" scoped></style>
    

    显示效果:

    Ajax获取首页数据

    这里使用vue推荐的axios来实现Ajax的请求

    因为不是每一个人都有服务器来实现请求,所以这里我们使用模拟的数据来实现请求

    • 首先安装axios来实现Ajax请求数据
      npm install axios --save

      在Home.vue中引入:

      import axios from 'axios'
       mounted () {
          this.getHomeinfo()
        },
        methods: {
          getHomeinfo () {
            axios.get('/api/index.json')
              .then(this.getHomeinfoSucc)
          },
          getHomeinfoSucc (res) {
            console.log(res)
          }
        }

      上面就是在Home.vue中的axios的使用

    • 在static文件夹下新建一个mock文件夹,新建一个index.json文件,用来模拟数据

           

           index.json:

    {
      "ret": true,
      "data": {
        "city": "成都",
        "swiperList": [
          {
              "id": "0001",
              "imgUrl": "http://img1.qunarzz.com/piao/fusion/1810/e0/c99056cd01148902.jpg_750x200_8b93d0b5.jpg"
          },
          {
              "id": "0002",
              "imgUrl": "http://img1.qunarzz.com/piao/fusion/1808/7e/19b06067afac3402.jpg_750x200_f613313a.jpg"
          },
          {
              "id": "0003",
              "imgUrl": "http://img1.qunarzz.com/piao/fusion/1809/2d/0d7dc3400a50b502.jpg_750x200_4ca95dd4.jpg"
          }
        ],
        "iconList": [
          {
            "id": "0001",
            "imgUrl": "http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
            "desc": "景点门票"
          },
          {
            "id": "0002",
            "imgUrl": "http://img1.qunarzz.com/piao/fusion/1803/ab/6f7d6e44963c9302.png",
            "desc": "泡温泉"
          },
          {
            "id": "0003",
            "imgUrl": "http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png",
            "desc": "成都必游"
          },
          {
            "id": "0004",
            "imgUrl": "http://img1.qunarzz.com/piao/fusion/1803/e3/67df61427c8e1302.png",
            "desc": "川剧变脸"
          },
          {
            "id": "0005",
            "imgUrl": "https://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png",
            "desc": "打卡圣地"
          },
          {
            "id": "0006",
            "imgUrl": "http://img1.qunarzz.com/piao/fusion/1803/ea/01d081dacb03cc02.png",
            "desc": "赏秋色"
          },
          {
            "id": "0007",
            "imgUrl": "http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png",
            "desc": "一日游"
          },
          {
            "id": "0008",
            "imgUrl": "http://img1.qunarzz.com/piao/fusion/1803/54/35899492b1302802.png",
            "desc": "成都熊猫基地"
          },
           {
            "id": "0009",
            "imgUrl": "http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
            "desc": "全部"
          }
        ],
        "recommendList": [
          {
            "id": "0001",
            "imgUrl": "http://img1.qunarzz.com/sight/p0/1612/1d/1d9a740c1f9e0efaa3.img.jpg_200x200_63285bd9.jpg",
            "title": "成都海昌极地海洋公园",
            "desc": "蠢萌企鹅陪你嗨翻这个秋"
          },
           {
             "id": "0002",
             "imgUrl": "http://img1.qunarzz.com/sight/p0/201407/03/a584374ee80b738e2600d6bcaf1299e3.jpg_200x200_c26fb243.jpg",
            "title": "都江堰",
            "desc": "气势磅礴的“世界水利文化鼻祖"
          },
           {
            "id": "0003",
            "imgUrl": "http://img1.qunarzz.com/sight/p0/201301/16/ae96ce4058bd5cf093835fbb.jpg_200x200_e4cb9743.jpg",
            "title": "青城道温泉",
            "desc": "吐纳青城气息,享受自然温暖"
          },
          {
            "id": "0004",
            "imgUrl": "http://img1.qunarzz.com/sight/p0/201307/23/b8db11dca4378903c8d65eac.jpg_200x200_56f59a84.jpg",
            "title": "成都动物园",
            "desc": "?好评如潮,小伙伴热推景点~"
          }
        ],
        "weekendList": [
          {
            "id": "0001",
            "imgUrl": "http://img1.qunarzz.com/sight/source/1509/ff/4184c6c13edbb.jpg_r_640x214_60474b61.jpg",
            "title": "成都周边秋色",
            "desc": "细数成都周边秋天最美仙境"
          },
            {
            "id": "0002",
            "imgUrl": "http://img1.qunarzz.com/sight/source/1505/a2/78e4dbcfd45a6d.jpg_r_640x214_7a62b06a.jpg",
            "title": "成都必游TOP10",
            "desc": "成都的标志,也是现代人对老成都的记忆"
          },
            {
            "id": "0003",
            "imgUrl": "http://img1.qunarzz.com/sight/source/1505/63/0ffcb5c329a19c.jpg_r_640x214_93fd1e5a.jpg",
            "title": "慢游成都最美古镇",
            "desc": "撷取一份悠闲,寻觅散落在时光里的幸福"
          },
          {
            "id": "0004",
            "imgUrl": "http://img1.qunarzz.com/sight/source/1505/b8/e6206794272459.jpg_r_640x214_a002ded9.jpg",
            "title": "郊野户外深呼吸",
            "desc": "做个久违的深呼吸,来一场清肺之旅"
          }
        ]
      }
    }
    
    • 修改webpack配置(修改config/index.js):

           

    proxyTable: {
          
    },

       在dev下的proxyTable中新增下面的内容 

    proxyTable: {
          '/api': {
            target: 'http://localhost:8080',
            pathRewrite: {
              '^/api': '/static/mock'
            }
          }
    },

       作用是使我们在开发环境访问API的index.json时自动去找模拟的数据(/static/mock/index.json),而在正式环境时就访问正式的接口,减少后期的更改请求接口的问题

    首页父子组件数据传递

    在Home.vue中获取全部的数据,然后在传递给子组件

    • 首先,在Home.vue的data中定义需要传递的数据名称

            

    •  然后把取到的值赋值给data中的定义好的属性

            

    • 最后传递给子组件,子组件接受

            传递给子组件(通过属性的方式):

             

             子组件接受:

              

              

              注意:这里list:Array和city:String是表示子组件接受父组件传递来的数据是什么类型的,如果父组件传递的不是这个类型的就会报错,

    还有就是在swiper.vue中会出现轮播图显示的是最后一张图片,因为父组件传递了一个空数组造成,这里这样处理

              

              

    然后这里实现的是当数组为空时,swiper不会进行循环,首页部分就完成了

    最最最后就是把代码提交到GitHub上(我的这个练手项目在github上地址:项目地址,有需要的小伙伴可以拉取下来,运行下)

    展开全文
  • VUE项目实践--网站管理系统

    千次阅读 2019-03-07 16:40:06
    使用vue-cli来构建一个vue项目 什么是vue-cli?有了它我们还需要webpack吗? 通过几天的学习都知道webpack的使用难度真的有点高,而且文档又很难阅读。而vue-cli是一个可用帮助我们直接进行开发vue的脚手架(帮助...
  • Vue项目启动原理及项目的创建

    万次阅读 2018-06-08 13:29:40
    首先看下图:一般一个初步的Vue项目创建好之后都会有这三个文件:index.html 、main.js 、App.js;1、index.html :众做周知,Vue是单页面形式开发,而这个index.html文件在其中起着特别重要的作用。所有组件(后缀名...
  • vue全面介绍--全家桶、项目实例

    万次阅读 多人点赞 2017-03-28 17:38:13
    2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angular.js和react.js的优点,并剔除了它们的缺点”。授予了这么高的评价的vue.js,也是开源世界华人的骄傲,因为它的作者是位...
  • vue项目实战】Vue工程化项目--猫眼电影移动端

    万次阅读 多人点赞 2020-02-24 17:06:55
    使用 vue-cli 创建项目。现在先把主框架搭起来,熟悉路由和组件,后面在 项目demo 持续贴出完整项目代码。 vue初始化项目 首先全局安装Vue脚手架——vue-cli npm/cnpm install vue-cli -g 新建一个文件夹vue-demo...
  • Vue 项目搭建流程和使用大全

    万次阅读 2019-07-10 18:34:14
    Vue 项目搭建流程及项目中遇到的问题 项目搭建流程 1.使用vue cli 搭建项目框架 cnpm install -g vue-cli 安装vue cli 脚手架 vue init webpack projectName 创建项目 cd projectName cnpm install 安装依赖...
  • vue项目打包步骤

    万次阅读 多人点赞 2020-06-22 18:35:03
    vue项目打包终端运行命令 npm run build打包成功的标志与项目的改变,如下图:点击index.html,通过浏览器运行,出现以下报错,如图:那么应该如下修改呢?具体步骤如下:1、查看package.js文件的scripts命令2、打开...
  • vue 关闭vue项目中烦死人的ESlint

    万次阅读 多人点赞 2020-04-19 14:43:09
    【已解决】vue 关闭vue项目中烦死人的ESlint 很多时候,因为一些书写问题,ESlint会报错。
  • VSCode配置启动Vue项目

    万次阅读 多人点赞 2019-10-09 11:11:27
    注意:这个是1.2版本的配置,现在1.3版配置已经不是这样了 下载安装并配置VSCode 随便百度上搜个最新的VSCode安装好后,点击Ctrl + Shit + X打开插件扩展窗口进行插件扩展,这里要安装两个插件。...
  • Vue + Spring Boot 项目实战(一):项目简介

    万次阅读 多人点赞 2020-09-03 22:26:42
    白卷是一款使用 Vue+Spring Boot 开发的前后端分离项目。除用于入门练手之外,亦可作为搭建小型 Web 项目的脚手架。
  • vue项目访问顺序

    万次阅读 2020-08-21 17:39:28
    1.vue项目访问顺序 访问index.html后,main.js会将app.vue组件显示,会再通过进入router里的index.js从而进入hello.vue组件.进而展现整个页面。 2.mian.js(项目开始展示内容) import Vue from 'vue' import App from ...
  • vue项目环境搭建及一个简单的vue例子

    万次阅读 多人点赞 2018-06-27 11:16:15
    大家好,今天下午对于vue项目环境的搭建进行了研究,一直以来,我都是用cdn的方式将vue.js引入Html界面,然后就开始刷vue的官方文档了。在刷过文档之后,我就想着,真实的项目是怎么样子的呢,然后就开始了vue-cli...
  • Linux服务器部署vue项目

    万次阅读 2019-10-12 21:12:14
    新建一个vue项目。 //详细的怎么创建。我这里就不说了。 vue init webpack vuetest 得到的项目目录 执行, npm run build // 进行打包操作 当最后看到这样代表打包成功 此时你可连接服务器。我这里用.....
  • 搭建VUE项目(三)VUE项目实现页面跳转

    万次阅读 多人点赞 2020-03-27 16:22:13
    打开一个VUE项目,目录结构是这样的:如现在有两个页面aaa和HelloWorld,路由配置在index.js中:import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import ...
  • nginx下部署vue项目概览

    万次阅读 2020-09-29 10:34:13
    今天要用到服务器nginx,还需要把自己的vue项目部署到服务器上去所以就写一下记录下来。首先要去nginx官网下下载nginx: 下载地址:https://nginx.org/en/download.html 下载下来会是一个解压包,解压到你想放...
  • 现在的Vue脚手架已经升级到3.x版本,即vue-cli3。 脚手架升级之后,安装的命令发生了变化,所以这篇文章会跟大家演示新旧版本的脚手架安装过程。 下面的安装过程均是在window平台下安装。 一、准备工作 1. 安装node...
1 2 3 4 5 ... 20
收藏数 235,997
精华内容 94,398
关键字:

vue项目