Vue仿饿了么app项目总结

前言

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

效果图

这个最后做出来的效果图

实现功能

使用的技术栈

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

项目目录

项目结构

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的管理工具来实现的，下载地址(/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 -g vue-cli回车；验证是否安装成功，在命令输入vue,出来vue的信息，及说明安装成功

cnpm install -g vue-cli
复制代码

5，初始化项目

Vue init webpack demo
复制代码

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

6，运行项目

npm run dev
复制代码

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

7，发布代码

npm run build
复制代码

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

开发过程中重点问题总结

–

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

分开设置css样式

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

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

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

-布局

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

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

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

要求自适应布局

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%
 }
}
复制代码

背景模糊效果

：blur(10px)

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

过渡

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

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

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

fade-enter
fade-enter-active
fade-leave
fade-leave-active
复制代码

组件

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

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

同时new 里面要设置: true,: ”, // 滚动方向横向

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

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

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

问题三：在页面，刷新后，无法滚动问题分析：出现这种情况是因为函数在整个生命周期中只会只行一次

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

缓存数据

//将页面信息保存到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,,组件之间切换时会重新渲染

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

 

复制代码

vue-

使用组件完成导航， 默认会被渲染成一个  标签，但必须使用 to属性，指定连接
复制代码
// app.vue
 
home
about

复制代码
// 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
}];
复制代码

 event bus: 利用一个中间组件来作为信息传递中介
 vuex: 信息树
复制代码

// 父组件

// 子组件 header.vue
props: {
 seller: {
 type: Object
 }
}
复制代码

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

复制代码

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

router.push('/Goods');
复制代码

———END———
限 时 特 惠： 本站每日持续更新海量各大内部创业教程，永久会员只需109元，全站资源免费下载 点击查看详情
站 长 微 信： nanadh666