Vue仿饿了么app项目总结

柔光的暖阳◎ 2023-07-11 08:55 73阅读 0赞

## 前言 ##

这是我的第一个基于Vue项目的作品，目的是把之前的前端知识累积加上目前流行的前端框架，以项目的形式展示出来。  
大家在学习Vue的时候，可以将此项目作为学习Vue框架的一个模板  
![cmd-markdown-logo][]

## 源码地址 ##

源码：https://github.com/shifengming/sell

## 实现功能 ##

*  Goods、Ratings、Seller 组件视图均可上下滚动
 *  商品页 点击左侧menu，右侧list对应跳转到相应位置
 *  点击list查看商品详情页，父子组件的通信
 *  评论内容可以筛选查看
 *  购物车组件，包括添加删除商品及动效，购物控件与购物车组件之间为兄弟组件通信，点击购物车图标，展示已选择的商品列表
 *  商家实景图片可以左右滑动
 *  loaclStorage 缓存商家信息（id、name）

## 使用的技术栈 ##

vue2.0 + vue-router + vue-cli + axios + stylus + flex布局 + es6 + eslint + webpack2

## 项目目录 ##

*  app.vue
 *  header.vue头部组件
 *  star.vue星星评分组件
 *  goods.vue商品组件
 *  shopcart.vue购物车组件，包括小球飞入购物车动画
 *  cartcontrol.vue购买加减图标控件–选中数量返回给父组件goods,goods响应后，重新计算选中的数量，将数据发送给购物车组件
 *  food.vue商品详情页
 *  ratingselect.vue评论内容筛选组件
 *  ratings.vue评论组件
 *  seller.vue商家组件
 *  split.vue关于分割线组件

## 项目结构 ##

common文件夹存放的是通用的css和fonts
    componets文件夹用来存放Vue组件
    router文件夹存放Vue组件
    build文件是webpack的打包编译配置文件
    config文件夹存放的是一些配置项，比如我们服务器访问的端口配置等
    dist该文件一开始是不存放，在项目经过build之后才会生成
    Prod.server.js该文件是测试模拟的服务器配置，用来运行dist里面的文件
    config/index.js中，build对象中添加一条端口设置port:9000
    App.vue根组件，所有的子组件都将在这里被引用
    Index.html整个项目的入口文件，将会引用我们的根组件App.vue
    Main.js入口文件的js逻辑，在webpack打包之后将被注入到index.html

## 搭建Vue的运行环境 ##

1，首先是安装node

端开发框架和环境都是需要Node.js，先安装node.js开发环境，vue的运行是依赖于node的npm的管理工具来实现的，下载地址(https://nodejs.org/en/)

2，查看node的版本号

下载好node之后，打开cmd管理工具，输入node -v，回车，查看node版本号，出现版本号则说明安装成功

node -v

3，安装淘宝npm镜像

由于npm是国外的，使用起来比较慢，这里使用淘宝cnpm镜像来安装vue，淘宝的cnpm命令管理工具可以代替默认的npm管理工具

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

4，安装全局vue-cli脚手架

淘宝镜像安装之后，我们就可以全局vue-cli脚手架，输入命令:cnpm install -g vue-cli回车；验证是否安装成功，在命令输入vue,出来vue的信息，及说明安装成功

cnpm install -g vue-cli

5，初始化项目

Vue init webpack demo

(demo指的是你新建的项目名称/文件名称)

6，运行项目

npm run dev

然后就会出来http://localhost:8080 把这个网址复制到浏览器中打开

7，发布代码

npm run build

发布完代码后会生成dist目录，保存着项目的所有可运行的代码

## 开发过程中重点问题总结 ##

### better-scroll ###

Better-scroll可能是目前最好用的移动端滚动插件  
插件在移动端使用时需要设置 click：true，否则移动端滑动无效

--------------------

### 分开设置css样式 ###

1，图标icon.css–文字图标样式，通过icomoon.io网站，将svg图片转成文字图标样式

2，公共base.css–处理设备像素比的一些样式，针对border-1px问题，不同设备像素比，显示的线条粗细不同

3，工具mixin.css–设备border-1px样式和背景样式

--------------------

### sticky-footer布局 ###

在这个项目的header组件的详情页采用stick-footer布局

特点：如果页面内容不够长，页脚块粘贴在视窗底部；  
如果内容足够长，页脚块会被内容向下推送

实现：父级 position:fixed，内容设为padding-bottom:64px，页脚相对定位，margin-top:-64px，clear:both为了保证兼容性，父级要清除浮动

![cmd-markdown-logo][cmd-markdown-logo 1]

参考：https://www.jianshu.com/p/3853024d5838

--------------------

### 要求自适应布局 ###

1，左侧宽度固定，右侧宽度自适应

左侧固定width：80px，右侧自适应

parent:
        display:fiexd;
    child-left:
        flex:0 0 80px
    child-right:
    flex:1

2，元素宽度自适应设备宽度，且元素要求等宽高样式

商品详情页面的商品图片展示样式

.img_header {
        position:relative
        width:100% // width是 设备宽度
        height:0
        padding-top:100% // 高度设为0,使用padding撑开
        .img {
            position:absolute //定位布局
            top:0
            left:0
            width:100%
            height:100%
        }
    }

--------------------

### 背景模糊效果 ###

filter：blur(10px)

注意，所有在内的子元素也会模糊，包括文字，所以采用定位布局，背景单独占用一个层，ios有一个设置backdrop-filter:blur(10px)，只会模糊背景,但不支持android

![cmd-markdown-logo][cmd-markdown-logo 2]

--------------------

### transition过渡 ###

在购买控件中使用transition过渡效果，实现添加减少按钮的动效，和小球飞入购物车的动效（模仿贝塞尔曲线的效果）

name-String用于自动生成css过渡类名

name: ‘fade’ 将自动拓展为.fade-enter，.fade-enter-active等。默认类名为 “v”

fade-enter
    fade-enter-active
    fade-leave
    fade-leave-active

--------------------

### seller组件 ###

问题一：seller页面中商品商家实景图片横向滚动

解决方案：每个 li 要 display：inline-block，因为width不会自动撑开父级ul，所以需要将计算后的宽度赋值给ul的width，（每一张图片的width+margin）\*图片数量-一个margin，因为最后一张图片没有margin

同时new BScroll里面要设置scrollX: true,eventPassthrough: ‘vertical’, // 滚动方向横向

![cmd-markdown-logo][cmd-markdown-logo 3]

问题二：打开seller页面，无法滚动

问题分析：出现这种现象是因为better-scroll插件是严格基于DOM的，数据是采用异步传输的，页面刚打开，DOM并没有被渲染，所以，要确保DOM渲染了，才能使用 better-scroll，

解决方案：用到mounted钩子函数，同时必须搭配this.$nextTick()

![cmd-markdown-logo][cmd-markdown-logo 4]  
问题三：在seller页面，刷新后，无法滚动

问题分析：出现这种情况是因为mounted函数在整个生命周期中只会只行一次

解决方案：使用watch方法监控数据变化，并执行滚动函数 this.\_initScroll();this.\_initPicScroll();

--------------------

### 缓存数据 ###

//将页面信息保存到localStorage里
    export function saveToLocal(id, key, value) {
      let seller = window.localStorage.__seller__;//新定义一个key值_store_,存放要保存的数据对象
      if (!seller) { // 不存在Seller
        seller = {};
        seller[id] = {};
      } else {
        seller = JSON.parse(seller);//string格式-->json格式
        if (!seller[id]) {
          seller[id] = {};
        }
      }
      seller[id][key] = value;
      window.localStorage.__seller__ = JSON.stringify(seller);//将json格式转成String格式，存放到window.localStorage._store中
    };
    
    
    //将localStorage信息设置到页面中
    export function loadFromLocal(id, key, def) {
      let seller = window.localStorage.__seller__;
      if (!seller) {//开始是没有的，因为没有点击事件，所以显示默认数据
        return def;
      }
      seller = JSON.parse(seller)[id];//将json格式-->String格式
      if (!seller) {
        return def;
      }
      let ret = seller[key];
      return ret || def;
    };

--------------------

### goods,ratings,seller组件之间切换时会重新渲染 ###

在 app.vue 内使用 keep-alive，保留各组件状态，避免重新渲染

<keep-alive>
        <router-view :seller="seller"></router-view>
    </keep-alive>

--------------------

### vue-router ###

使用<router-link>组件完成导航，<router-link> 默认会被渲染成一个 <a> 标签，但必须使用 to属性，指定连接

// app.vue
     
    <router-link to="/home">home</router-link>
    <router-link to="/about">about</router-link>
    
    
    <router-view></router-view>

// router: index.js
    
    import Vue from 'vue';
    import Router from 'vue-router';
    import goods from 'components/goods/goods.vue';
    import ratings from 'components/ratings/ratings.vue';
    import seller from 'components/seller/seller.vue';
    
    Vue.use(Router);
    
    const routes = [{
      path: '/',
      redirect: '/goods'
    }, {
      path: '/goods',
      component: goods
    }, {
      path: '/ratings',
      component: ratings
    }, {
      path: '/seller',
      component: seller
    }];

--------------------

### axios ###

在vue1.x的时候，vue的官方推荐HTTP请求工具是vue-resource，但是在vue2.0的时候将推荐工具改成了axios

--------------------

### 组件间通讯 ###

vue是组件式开发，所以组件间通讯是必不可少的

*  父传子: props
 *  子传父: $emit
 *  兄弟通讯
    
        event bus: 利用一个中间组件来作为信息传递中介
        
           vuex: 信息树

父传子: props

> 子组件定义 props 来接受父组件传递来的数据对象

// 父组件
    <v-header :seller="seller"></v-header>
    
    // 子组件 header.vue
    props: {
      seller: {
        type: Object
      }
    }

子传父: $emit

> 如果是子组件想传递数据给父组件，需要派发自定义事件，使用 $emit 派发

父组件使用v-on接收监控（v-on可以简写成@）

// 子组件 ratingSelect.vue，派发自定义事件select，将type数据传给父级
    this.$emit('select', type);
    this.$emit('toggle', this.onlyContent2);
    
    
    // 父组件 food.vue 在子组件的模板标签里，使用v-on监控toggleContent传过来的数据
    <ratingselect @select="selectRating" @toggle="toggleContent"></ratingselect>

非父子组件之间通信

1，大型项目可以用 Vue官方推荐的vuex

2，EventBus

3，子组件A $emit 派发具体事件，由父组件 @ 监听得到数据

父组件再利用 $refs 直接访问子组件B的方法，间接实现数据从子组件A传递至子组件B

--------------------

### 组件提取管理 ###

将相同样式或功能的区块单独提出来，作为一个组件。  
另外组件中用到的图片等资源就近维护，即可以考虑在组件文件夹中新建images文件夹。

抽离组件遵循原则：  
要尽量遵循单一职责原则，复用性更高，不要设置额外的margin等影响布局的东西

--------------------

### 打开app应用，默认显示 goods 页面内容 ###

想默认显示goods页面内容，有两种方法，一种是利用重定向，另一种是利用vue-router的导航式编程

1，重定向

routes: [
        {
          path: '/',
          redirect: '/goods'  //重定向
        },
        {
          path: '/goods',
          name: 'goods',
          component: goods
        },{
          path: '/ratings',
          name: 'ratings',
          component: ratings
        },{
          path: '/seller',
          name: 'seller',
          component: seller
        }
      ]

2，导航式编程

router.push('/Goods');

--------------------

## 关于ESlint ##

eslint 是一个js代码风格检查器，配合vue-cli脚手架中的热更新，可以很方便的定位和提示错误。在公司多人协作开发时可以确保代码风格保持一致，可以很方便的阅读他人的代码

## 手机访问项目 ##

1、在config文件夹中的index.js中的host选项，将本地localhost改为0.0.0.0  
![cmd-markdown-logo][cmd-markdown-logo 5]  
2、在cmd中输入ipconfig查看本地IP,  
![cmd-markdown-logo][cmd-markdown-logo 6]

4、端口号访问(http://192.168.0.110:8080),将这个网址复制到网页版“草料二维码”中，用QQ扫码访问即可

## 最后 ##

如果本文对你有帮助得话，给本文点个赞❤️❤️❤️

欢迎大家加入，一起学习前端，共同进步！  
![cmd-markdown-logo][cmd-markdown-logo 7]  
![cmd-markdown-logo][cmd-markdown-logo 8]

[cmd-markdown-logo]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS84LzMwLzE2Y2UyNDQ3NjQwZTgwYjE?x-oss-process=image/format,png
[cmd-markdown-logo 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS84LzMwLzE2Y2UyZDg5ZDRjMjBjNDI?x-oss-process=image/format,png
[cmd-markdown-logo 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS84LzMwLzE2Y2UyZWRhMDQzNmIzMmM?x-oss-process=image/format,png
[cmd-markdown-logo 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS84LzMxLzE2Y2U3NTdjM2U5MDNmM2U?x-oss-process=image/format,png
[cmd-markdown-logo 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS84LzMxLzE2Y2U3NWY5MTYxZWQyMDY?x-oss-process=image/format,png
[cmd-markdown-logo 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS85LzEvMTZjZWI4YTk0NDg4MmFjNQ?x-oss-process=image/format,png
[cmd-markdown-logo 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS85LzEvMTZjZWI4YWZlMGFhOTEyNw?x-oss-process=image/format,png
[cmd-markdown-logo 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8yLzIyLzE3MDZjNGUzNmNhZjkzZmI?x-oss-process=image/format,png
[cmd-markdown-logo 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8yLzIyLzE3MDZjNGU4YjExZDBjZTY?x-oss-process=image/format,png