vue仿饿了么项目总结2

Vue.js饿了么

Q为遇到的坑报的错 有相应解决方法，BQ为注意点。

• BQ．手机端时，宽高值为设计稿的一半。

• Q．vue动态添加路由组件component报错不能是以一个字符串id？ 解决：路由里component：“xxx”，组件写成字符串了。

• Q．vue脚手架vue-cli起的webpack项目，用localhost可以正常访问，切换到ip就提示无法访问此网站？ 解决：修改config/index.js，将host: ‘localhost’改为host:’0.0.0.0’;重启服务即可。 登陆cli.im（草料网），可生成二维码，手机就能看页面了。

• BQ．webpack-dev-conf.js中，devServer中写入：

const express = require('express');
const app = express();
const appData = require('../data.json');
const seller = appData.seller;
const goods = appData.goods;
const ratings = appData.ratings;

const apiRoutes = express.Router();

app.use('/api',apiRoutes);

before(app) {
      app.get('/api/seller', (req, res) => {
        res.json({
          errno: 0,
          data: seller
        })//接口返回json数据，上面配置的数据seller就赋值给data请求后调用
      }),
      app.get('/api/goods', (req, res) => {
        res.json({
          errno: 0,
          data: goods
        })
      }),
      app.get('/api/ratings', (req, res) => {
        res.json({
          errno: 0,
          data: ratings
        })
      })
}

• BQ.

  Export default{
    data() {  //data定义成函数，是因为组件是可复用的，如果data为对象的话，一个组件改变 会影响其他的，所以改成函数。函数里面返回对象。
    }
  }
  

• BQ.Vue-resource：前后端数据交互。

  this.$http.get(‘/xxx’) 
  .then((res)=>{},(err)=>{});
  

• Q．引入图标字体时 找不到文件？ ？？？解决不了啊 解决：src改为绝对路径，不能使用相对路径

• BQ．引入其他stylus文件时，是@import而不是import。

• BQ．css样式设置单行显示文本，超出部分显示省略号。

   text-overflow:ellipsis;
   overflow:hidden;
   white-space:nowrap;
  

• BQ.Sticky footer布局:如果页面不够长的时候，页脚块粘贴在视口底部；内容足够长时，页脚块会被向下推。

布局与样式：

<div class="detail" v-show="detailShow">
        <div class="detail-wrapper clearfix">
          <div class="detail-main">
           
          </div>
        </div>

        <div class="detail-close">
          
        </div>
</div>

.detail-wrapper
    min-height: 100%
    .detail-main
      margin-top:64px
      padding-bottom:64px
.detail-close
    width: 32px
    height:32px
    margin:-64px auto 0px auto
    font-size: 32px
    position:relative

• BQ.清除浮动的样式：

   .clearfix
  display:inline-block
  &:after
    display:block
    height: 0
    line-height :0
    content :"."
    clear:both
    visibility :hidden
  

• BQ.Flex布局： 父元素display：flex 子元素定宽：flex:0 0 50px,或flex：0 0 auto，都要再加上width：_ px 子元素自适应：flex：1

• BQ．背景模糊的效果：backdrop-filter：blur(10px)（ios有效）

• BQ. 星星组件:

<template>
  <div class="star" :class="starType">
    <span v-for="itemClass in itemClasses" :class="itemClass" class="star-item"></span>
  </div>
</template>

• BQ.文字垂直居中： 父元素display：table 子元素display：table-cell，vertical-align:middle

• BQ.移动端滚动插件：iScroll、better-scroll

• Q.goods滚动？

解决：1.用better-scroll插件时，参数要加click：true 2.使用Better-scroll时，绑定的元素里面只能有一个子元素。

• BQ.Vue1.0与vue2.0的不同： Transition Ref 与el $dispatch与$emit:事件派发

• BQ.Css3动画？？？有待学习啊 ~？？VUE-过渡 有待学习。

• BQ.小球？再看看。

• Q.cart-list动画有问题？ 解决：颜色写在shopcart里，会被动画中的cart-list覆盖掉，所以出现那种情况。把颜色写到content中就好了。

• Q．实现宽高相等的图片。

.pic
  position: relative
  width: 100%
  height: 0
  padding-top: 100%
  & img
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%

• BQ.@click.stop.prevent:取消事件冒泡，阻止事件默认行为

• Q.export与import

Export default{}；
Import xxx from “”；

Export function xxx（）{}；
Import {xxx1，xxx2} from “”；

• BQ.滚动里面要套一个整体div

• BQ.rating列表再看看。 VUE中文文档再看看，生命周期要理解！

• Q.刷新页面出错找不到？ 解决：mode：“history”的原因，去掉就好了。

• BQ.组件引入、注册、html中使用，都用全小写。组件文件夹、文件名也全小写。

• BQ.webpack打包 运行 npm run build命令。