Vue项目实战——仿每日优鲜(移动端网站)
Hi,我是五柳,一个双非二本、自学编程的前端工程师,欢迎关注我的微信公众号:Code center。
项目描述
一个基于优鲜食物的移动端购物网站(大部分功能模块已实现,适合有一定Vue基础的人学习,项目已经上传到我的GitHub,项目实施需要的资源已经放在素材文件夹下,包括接口文档、图片资源等)
技术栈
Vue CLI + Vue Router + Vuex + Less + Mint UI + axios + Swiper + Animate + Better Scroll + Mock + Vue Touch
项目展示(此处只列举部分)
- 首页
- 城市选择
- 购物车
- 商品详情
- 个人中心
- 收获地址
基本使用
使用less
cnpm install less less-loader -S-D
使用swiper
cnpm install swiper -S-D//在组件中引入//引用swiperimport Swiper from 'swiper' //引入css文件import 'swiper/dist/css/swiper.min.css'//然后在挂载的时候初始化swipermounted() {this.nextTick(() => {this.scroll = new Swiper('.swiper-container', {autoplay: true,// 如果需要分页器pagination: {el: '.swiper-pagination',},})})}
使用mint-ui
cnpm install mint-ui -Scnpm install babel-plugin-component -S-D
打开.babelrc进行配置,在plugin插入一项配置,例如:
"plugins": ["transform-vue-jsx", "transform-runtime", ["component", [{"libraryName" : "mint-ui","style": true}]]]//此处是插入了component这个
使用:
main.js中import 'mint-ui/lib/style.css'import {Navbar, TabItem} from 'mint-ui'
使用vuex
cnpm install vuex -S
创建 store 文件夹
- index.js- state.js- getters.js- mutation-types.js- actions.js- mutations.js
需要注意:每个.js文件写的时候都需要注意导出 export default{} 或 export const …
并且state getters actions mutations都是有多个 每个间要用,号隔开,在index.js 中分别引入(import)state.js getters.js actions.js mutations.js vue vuex
使用vuex Vue.use(vuex),创建vuex
export default Vuex.Store({state,getters,actions,mutations, })
在main.js中为vue实例挂载vuex,引入store/index.js,在实例中挂载。
使用animate.css
cnpm install animate.css
在 main.js 中引入
import animate from 'animate.css'
在页面中使用
<transition enter-active-class="animated fadeIn"></transition>
使用better-scroll
使用better-scroll实现各种滚动效果
npm install better-scroll -S
具体使用看官方文档
this.$nextTick(() => {if(!this.scroll) {this.scroll = new BScroll(this.$refs.wrapper, {click: true})} else {this.scroll.refresh()}})
需要注意的是子元素的高度一定要大于父元素的高度,子元素设置超出隐藏
跨域访问接口
正常情况下,要实现跨域,是通过后台进行配置响应的响应头的参数。
vue-cli 则跨域通过 node.js 代理服务器实现跨域请求。
文件路径 config/index.js
proxyTable: {'/api': { // 匹配所有以 '/api'开头的请求路径 即匹配的是axios中传入的url参数,/api/user 这种形式才会匹配target: 'http://d.apicloud.com/mcm/api', // 代理目标的基础路径changeOrigin: true, // 支持跨域pathRewrite: {// 重写路径: 去掉路径中开头的'/api' 当真正的接口不需要api时重写'^/api': '' //去掉匹配到的路径的/api 如果不去掉就删除pathRewrite}} }//最后得到的路径就是 target+url//假设请求的url为 /api/user//经过node.js代理后 真正请求的是 http://d.apicloud.com/mcm/api/user//需要注意的是F12显示的仍然是localhost:8080/api/usesr 但实际上发送的地址是经过node.js代理服务器实现的跨域请求请求头const instance = axios.create({baseURL: '/api',timeout: 1000,headers: {'X-APICloud-AppId': 'A6914327011091','X-APICloud-AppKey': '8ac17d22e49cb7982d82796097cec52a6c7cd01d.1475375422841'}})//get请求promise = instance.get(url)//post请求promise = instance.post(url)
关于浮点数计算的问题
state.totalPrice = parseFloat((state.totalPrice + food.price).toFixed(2))
需要注意:不能直接(state.totalPrice + food.price).toFixed(2),因为toFixed() 返回一个数值的字符串表现形式。
首页左右滑动效果
组件用的是mint-ui提供的当时 存在一个问题 它只提供了滑动效果 不会和tab动态的关联起来,所以借助了vue-touch。
vue-touch使用:
cnpm install vue-touch@text
main.js绑定vue
import VueTouch from 'vue-touch'Vue.use(VueTouch, {name: 'v-touch'})
FoodList中使用
<v-touch @swipeLeft=""></v-touch> //从左往右滑动<v-touch @swipeRight=""></v-touch> //从右往左滑绑定事件,使用this.$emit('v-swipeLeft') //自定义事件
Home中使用
<FoodList @v-swipeLeft=""/>
绑定事件
触发nav的updateSelectedIndex事件通过this.$refs.nav.updateSelectedIndex(更改的下标) //要先给nav绑定ref="nav"
优化建议:是否可以通过watch监听navBar的下标变化,如果变化了,在this.$nextTick中执行初始化方法。
mockjs图片资源
安装:
cnpm install mockjs -S
在 mock 文件目录下新建 data.js ,格式: Json数据类型。
// mockServer.jsimport Mock from 'mockjs'import data from './data.json'// 返回水果的接口Mock.mock('/fruits', {code:0, data: data.fruits})// 返回食材的接口Mock.mock('/ingredients', {code:0, data: data.ingredients})// 返回零食的接口Mock.mock('/snacks', {code:0, data: data.snacks})//返回牛奶的接口Mock.mock('/milks', {code:0, data: data.milks})//返回蔬菜的接口Mock.mock('/vegetables', {code:0, data: data.vegetables})
在main.js中引入
import './mock/mockServer.js'
Vue项目实战——仿每日优鲜(移动端网站)相关推荐
- Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇
目录 前言完 效果图 : 登录含签权 注册带正则 个人中心 下拉加载更多主页 修改个人中心 视频播放加关注+收藏 评论盖楼A回复B B回复C C回复A类似 项目开始 封装登录.注册 封装登录 从零到一 ...
- Vue项目实战 —— 哔哩哔哩移动端开发—— 第二篇
前期回顾 30秒学会 -- <获取验证码基本操作>_0.活在风浪里的博客-CSDN博客前期回顾 懒人必备 -- 时间神器 moment_0.活在风浪里的博客-CSDN博客亲测好用, ...
- Vue项目实战 —— 哔哩哔哩移动端开发
注册带正则 个人中心 下拉加载更多主页 修改个人中心 视频播放加关注+收藏 评论盖楼A回复B B回复C C回复A类似 功能很多就不一一展示介绍,直接进入开发 项目开始 ===== 在一开始会配置路径别 ...
- Vue项目实战仿饿了么app
1.短信验证 包括:1. 构建登录组件2.展示登录页面 3.验证码点击倒计时 4.短信验证参数获取 5.获取短信验证码 提取输入框组件 Input.vue <template><di ...
- Vue项目实战 —— 后台管理系统( pc端 )
前期回顾 我只写注释 -- 让Ai写代码_的博客-CSDN博客前期回顾 Vue项目实战 -- 哔哩哔哩移动端开发-- 第二篇_的博客-CSDN博客https://blog.csdn.net/m0_57 ...
- 三年半烧掉88亿、4个月市值暴跌7成,“生鲜电商第一股“每日优鲜首份财报不及格
生鲜电商还是一门好生意吗? 头顶"生鲜电商第一股",每日优鲜(NDAQ:MF)上市后首份财报并不及格. 其在2021年二季度净亏损14.332亿元,同比扩大321.78%:调整后的 ...
- Vue项目实战 —— 后台管理系统( pc端 ) 第一篇
前期回顾 我只写注释 -- 让Ai写代码_0.活在风浪里的博客-CSDN博客前期回顾 Vue项目实战 -- 哔哩哔哩移动端开发-- 第二篇_0.活在风浪里的博客-CSDN博客https://b ...
- “996 是福利,007 才是常态”?!千万程序员怒怼每日优鲜!
呔!热度不是你想蹭,想蹭就能蹭-- 作者 | 仲培艺 封图 | CSDN 付费下载自东方IC 出品 | 程序人生(ID:coder_life) App Store 评分一日之间从 4.5 断崖直降至 ...
- c++ using 前置声明_每日优鲜前置仓模式的配货优化方案案例介绍
大渔导读:2019 年零售业供应链最佳实践大奖--银奖 基于每日优鲜前置仓模式的配货优化方案案例:1. 背景介绍: 每日优鲜成立于 2014 年 11 月,是专注于优质生鲜的移动电商,已在北上广深等 ...
最新文章
- bzoj3141: [Hnoi2013]旅行
- 里面如何配置库_【专享】SolidWorks管道库国标模型下载SolidWorks Routing管道设计学习必备...
- QEvent的accept()和ignore()函数功能
- DIV+CSS基础教程
- idea的英文是什么意思_idealisation是什么意思中文翻译
- TypeScript入门教程 之 类/抽象类/构造器/Getter/Setter
- VUE 调试神器 vue-devtools
- 【数据库】第三章 事务、索引和SQL优化
- python3.7输出语句_python3.4用循环往mysql5.7中写数据并输出的实现方法
- 9个元素换6次达到排序序列_全面讲解十大经典排序算法(Python实现)
- SSD接口类型小知识
- 极验:验证码在黑灰产对抗中的角色和实践
- 程序员,停止你的焦虑
- 【Vitis Accel】1 - HLS 简介
- ros1-gazebo创建世界和机器人模型(单线雷达、多线雷达、相机)
- Cytoscape安装及使用
- Settings搜索栏界面绘制
- 【数据库系统原理作业】八、集合查询、派生词查询、数据更新、空值的处理、视图
- 【面试】1110- 一年前端社招面试总结,入职阿里菜鸟
- Qt 正则表达式的使用