Vue项目之硅谷外卖

Vue项目之硅谷外卖

1、API重要概念：

API接口、对接口、联调、前后台分离、mock数据

2、测试编码

npm run dev —在内存中将我们的项目进行编译打包，并且还打开了浏览器

访问：http://localhost:8080

编码，自动编译打包（HMR），查看效果

3、打包发布

npm run bulid打包生成的资源在dist里面

npm i -g serve

serve dist

访问：http://loaclhost:5000

4、图片Base64：样式中引用的小图片，在webpack打包会自动处理转化为样式内部的Base64编码字符串

5、项目源码目录设计

src

api 与后台交互模块文件夹

common通用资源文件夹，如：fonts/img/stylus

components非路由组件文件夹

filters自定义过滤器模块文件夹

mock模拟数据接口文件夹

pages路由组件文件夹

router路由器组件文件夹

store状态管理文件夹

App.vue应用组件

main.js入口JS

6、安装stylus依赖包

npm i stylus stylus-loader --save-dev

编写样式：

7、显示省略号

.ellipsis{

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

}

8、当点击切换的时候，自动添加on类名

<div @click='goTo('/search')' class='guide_item' :class='{on : '/search' === $route.path}'></div>
goTo(path){
   this.$router.replace(path)
}

9、界面更新就立即创建swiper对象

this是原型对象，里面有个$nextTick，这个回调函数就是一旦完成界面更新，立即调用;

this.$nextTick(()=>{
//创建一个Swiper实例对象，来实现轮播
new Swiper('.swiper-container',{
loop:true//可以循环轮播
//如果需要分页器
pagination:{
el:'.swiper-pagination',}
  })
})

10、actions的参数问题

里面有个系统自动注入的参数context里面有两个属性一个是state,commit；

第二个参数即为我们传递过来的参数；

11、当数据没有请求回来的时候，页面显示问题

在数据没有之前，使用背景图片去代替，利用v-if与v-else来实现，为了用户更好的体验

12、星星评分显示组件封装

props:{
 score:Number,
 size:Number
}
computed:{
//算法：3.2：3+0+2；3.5：3+1+1
startClasses(){
const {score} = this;
const scs = [];
//向scs中添加n个on；
const scoreInteger = Math.floor(score);
for(let i = 0; i<scoreInteger;i++ ){
scs.push(on)
}
//向scs中添加0/1个half
if(score*10-scoreInteger*10 >=5){
scs.push(hale)
}
//向scs中添加n个off
while(scs.length < 5){
  scs.pusk(off)
    }
  }
}
<div class='star' :class='"start-"+size'>
<span class='start-item on'></span>
<span class='start-item on'></span>
<span class='start-item on'></span>
<span class='start-item half'></span>
<span class='start-item off'></span>
</div>

//循环遍历
<div class='star' :class='"start-"+size'>
<span class='start-item' v-for='(sc,index) in startClasses' :class='sc' :key='index'></span>
</div>

13、登录功能

export default{
data(){
return {
loginWay:true,//true代表短信登录，false代表密码登录}
time:0

}}
//固定的类名，只是确定要不要
<div :class='{on:loginWay}' @click='loginWay = true'>短信登录</div>
<div :class='{on:!loginWay}' @click='loginWay = false'>密码登录</div>

//在标签中添加一个类名，这个类名有或者没有，根据条件来判断的
<button
:class='{right_phone:rightPhone}'
:disabled='!right_phone'
@click.prevent='getCode'>{{time?`已发送（${time}s）`:'获取验证码'}}
</button>
methods:{
//启动倒计时
getCode(){
//如果当前没有计时
if(!this.time){
 this.time = 30;
  let intervalId =  setInterval(()=>{
    this.time --;
    if(this.time==0) {
     clearInterval(intrvalId)
    }
    },1000) 
  }
  //发送请求（向指定手机号发送验证码短信）
 } 
}

14、模板中显示数据的来源

data:自身的数据（内部改变）

props:外部传入的数据（外部改变）

computed:根据data/props别的computed/state/getters

15、动态一次性图形验证码

//每次指定的src要不一样

event.target.src = ‘http://local:4000/captcha?time=’+Date.now()；//在这里携带参数的含义是什么？

16、发送短信验证码

容联.云通信（注册、登录）

17、当前分类（外卖点餐页面）

(1)功能：

实现两个列表滑动；

当滑动右侧列表时，更新当前分类；

当点击某个分类项，右侧列表滑动到对应的位置；

（2）分析：

类名：current标识当前分类

设计一个计算属性：currentIndex

根据哪些数据计算？

scrollY:右侧滑动的Y轴坐标（滑动过程时实时变化）；

tops:所有右侧分类li的top组成的数组；

（3）编码：

在滑动过程中，实时收集scrollY的值

在列表第一次显示后，收集tops

实现currentIndex的计算逻辑

实现列表的滑动：better-scroll
使用：
npm i better-scroll --save;
import BScroll from 'better-scroll';
data(){
return {
 scrollY:0;
 tops:[]
}
}

mounted(){


 this.$store.dispatch('getShopGoods',()=>{
   //列表数据更新显示后执行
   this.$nextTick(()=>{
   this._initScroll();
 })
 
 
}


computed:{


//计算得到当前分类的下标
  currentIndex(){//初始和相关数据发生了变化
  //先得到相关的条件数据
  const {scrollY,tops} = this;
  //根据条件计算产生一个结果
  const index = tops.findIndex((top,index)=>{
     return scrollY >= top && scrollY < tops[index+1]
  })
  //返回结果
  return index
  }
}

methods:{


//初始化滚动
_initScroll(){
    //列表显示之后创建
    new BScroll('.menu-wrapper'，{
    click:true
    });
    this.foodsScroll = new BScroll('.foods-wrapper',{
    probeType:2//惯性的滑动不会触发
    click:true
    })
   })
   //给右侧绑定scroll监听
   this.foodsScroll.on('scroll',({x,y})=>{
   //console.log(x,y);//x,y,代表横轴和纵轴的坐标
   this.scrollY = Math.abs(y);
   })
   
   //给右侧列表绑定scroll结束的监听
  this.foodsScroll.on('scrollEnd',({x,y})=>{
   console.log(1111,x,y);
   this.scrollY = Math.abs(y)
   })
}


//初始化tops
const tops = [];
let top = 0;
tops.push(top);
//找到所有分类的li
const lis =this.$refs.foodsUl.getElementByClassName('food-list-hook');
Array.prototype.slice.call(lis).foeEach(li=>{
top += li.clientHeight;
tops.push(top);
})
//更新数据
this.tops = tops;


//左侧点击事件
cilckMenuItem(index){
   //右侧列表滑动到对应的位置,编码的方式滑动
   //得到目标位置的scrollY
   const scrollY = this.tops[index];
   //立即更新scrollY（让点击的分类项，成为当前分类）
   this.scrollY = scrollY;
   //平滑滚动右侧列表
   this.foodsScroll.scrollTo(0,-scrollY,300)
   }
}

18、已经有数据绑定的数据中添加一个新的属性，让其也有数据绑定，利用Vue.set（）方法可以实现

19、界面不正常去看数据，看看数据是不是和我们想的是不是一样的；

20、移动端的组件库：mint-ui

21、评价列表中过滤得到新数组

（1）条件1

selectType:0/1/2/

rateType:0/1

selectType === 2||selectType === rateType

(2)条件2

onlyShowText : true/false

text:有值/没值

!onlyShowText || text.length > 0

return rating.filter(rating =>{
  const {rateType,text} = rating
  return (selectType === 2 || selectType === rateType ) && (!onlyShowTxt || text.lenngth >0)
})

22、图片懒加载

下载npm i --save vue-lazyload

23、日期格式化过滤器

npm i --save moment

filters.js
import Vue from 'vue'
import moment from 'moment'
Vue.filter('date-format',funtion(value)={
return moment(value).format('YYYY-MM-DD HH:mm:ss')
})

24、打包文件分析与优化

（1）vue脚手架提供了一个用于可视化分析打包文件的包webpack-bundle-analyzer和配hi

（2）启用打包可视化：npm run build --report

（3）npm i --save date-fns