Create your Gitee Account
Explore and code with more than 6 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Without author's permission, this code is only for learning and cannot be used for other purposes.
Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

heima

A Vue.js project to learn vue

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For a detailed explanation on how things work, check out the guide and docs for vue-loader.

由于教程比较早,纯从零开始搭建,学习的时候我用的是vue-cli搭建

(另外由于接口问题,很多图片都挂了,见谅)

技术栈 vue+vue-router+vuex+axios

UI框架 mint-ui 和 mui

插件 vue-preview swiper(挺好用的) better-scroll moment.js(时间格式处理)

一:首页

  1. 完成header区域,使用mint-UI组件
  2. 完成底部tabbar区域,使用的是MUI。
  • MUI的图标在example文件夹中找,火狐对本地HTML支持不好,使用edge或Chrome打开

  • 需要拷贝扩展图标的样式库与字体库。

  • 为购物车图标添加类名。 mui-icon mui-icon-extra mui-icon-extra-cart

  1. 要在中间区域放置一个router-view来展示路由组件

改造tabbar为router-link

###设置路由高亮

  linkActiveClass: 'mui-active'

###点击路由展示组件

制作首页轮播图

用的图片接口是必应公开接口 Swiper组件使用,踩了坑

  • 无法显示底部swiper-pagination
  • 无法无限轮播
    1. 配置错误,swiper4.0配置更新
    2. DOM动态渲染导致计算问题

加载轮播图数据

轮播图API地址(原地址已经失效,使用公开的bing每日图片的api)

使用axios加proxytable代理(踩坑)

遇到奇怪的bug 修改了proxyTable 的配置后,跨域还是不成功,最后删了node_modules重新下载了一次,解决了

改造九宫格区域的样式(mui)

##切换组件的动画

时间的格式的处理

moment.js 1.npm install moment.js

删掉依赖后重新 npm i 后报错 (解决) image.png

二:新闻详情

####绘制新闻资讯界面, 使用 MUI 中的 media-list.html

  1. 绘制界面, 使用 MUI 中的 media-list.html
  2. 使用 axios 获取数据
  3. 渲染真实数据

实现 新闻资讯列表 点击跳转到新闻详情

  1. 把列表中的每一项改造为 router-link,同时,在跳转的时候应该提供唯一的Id标识符
  2. 创建新闻详情的组件页面 NewsInfo.vue
  3. 在 路由模块中,将 新闻详情的 路由地址 和 组件页面对应起来
  4. 使用了better-scroll 实现新闻详情页面滚动
  • (踩的坑)样式穿透 由于scoped的影响 ####(新闻评论区)单独封装一个 comment.vue 评论子组件
  • 加载更多评论
  • 发表评论

###Vue中的scoped及穿透方法

##三:图片分享

使用mui的tab-top-webview-main完成顶部分类滑动栏

滑动的时候报警告:Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

解决方法,可以加上* { touch-action: none; } 这句样式去掉。

原因:(是chrome为了提高页面的滑动流畅度而新折腾出来的一个东西) http://www.cnblogs.com/pearl07/p/6589114.html https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action

使用vue-cli时引入mui.js时取消严格模式

mui在vue_cli上使用

image.png

vue-preview插件使用的坑 image.png

scoped 属性的影响,导致该组件的样式无法设置

##四:商品购买

####商品详情

  • 卡片视图 使用 mui 的mui-card

  • 轮播图 swiper

  • 商品购买 自建一个numbox 组件 初始化

  • 商品参数 问题:路由跳转后,滚动条记录 解决 :

  • 购物车

    • 购物车小球动画 getBoundingClientRec()方法获取位置 ####JavaScript中getBoundingClientRect()方法详解

    • 当商品数量改变时实时接收购买数量 (子传父) 细节:传值转化为数字

    • 根据父组件中的商品存储量改变数字选择框最大值(父传子) mui 自带API

    • ###vuex的使用

      • 点击后商品加入购物车功能
      • 购物车徽标数量的相加
      • 购物车的本地化存储 localStorage
      • 购物车页布局 元素渲染
      • 初始化购物车页面的各个商品数量值(从vuex里获取)
      • 在购物车中改变数量时 同步数据到store中
      • 购物车中删除商品
        1. 页面中删除
        2. store中删除
      • 同步store中的选择状态到页面
      • 商品勾选件数和勾选的总价计算
      • 全选/反选
      • 清空购物车
      • 打包部署至Apache
      • 使用ngrok把本机的网站端口映射到外网

最后:这只是为了记录一下自己做该项目的过程的笔记,入门vue的使用,借鉴了Vue.js-personal-note和课程资料,也存在很多不足,希望各位给予一些指点

Comments ( 0 )

Sign in for post a comment

About

heima练手vue项目 spread retract
JavaScript
Cancel

Releases

No release

Contributors

All

Activities

load more
can not load any more