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
标签：npm,Vue,const,tops,scrollY,外卖,硅谷,列表,scs 来源： https://blog.csdn.net/yangyanqin2545/article/details/118248735