vue移动端商城 vant框架使用笔记

本文详细介绍如何在移动端项目中配置Vue,包括安装axios、vuex等库,使用vant UI框架,配置babel-plugin-import,引入fastclick解决移动端点击延迟,以及使用vue-moment进行时间格式化。同时,文章还介绍了如何利用provide/inject实现页面刷新,调整内置样式,使用ImagePreview进行图片预览。

安装axios 、vuex 

npm install axios
npm install vuex --save

 

移动端必备:

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

reset.css:https://meyerweb.com/eric/tools/css/reset/

html {

   font-size: 26.67vw;

    width: 100%;

     height: 100%;

}

body,#app {

   width: 100%;

    height: 100%;

}

div{

    box-sizing: border-box;

}

 

1、在项目更目录下安装vant 

         npm i vant -S

2、babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式

         # 安装 babel-plugin-import 插件

           npm i babel-plugin-import -D

3、// .babelrc 中配置

         // 注意:webpack 1 无需设置 libraryDirectory

         { "plugins": [ ["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true }] ] }

          // 对于使用 babel7 的用户,可以在 babel.config.js 中配置 module.exports = { plugins: [ ['import', { libraryName: 'vant',                      libraryDirectory: 'es', style: true }, 'vant'] ] };

4、在main.js中正式引入

           import { Button, Cell } from 'vant';

           Vue.use(Button).use(Cell);

5.在main.js中引入fastclick

     import FastClick from 'fastclick'

     FastClick.attach(document.body);

使用vue-moment

npm install vue-moment --save

 

页面删除数据实时刷新 provide / inject 组合 方式实现vue页面刷新

通过声明reload方法,控制isRouterAlice属性true or false 来控制router-view的显示或隐藏,从而控制页面的再次加载 

.在需要当前页面刷新的页面中注入App.vue组件提供(provide)的 reload 依赖,然后直接用this.reload来调用就行

 

添加 fastclick的支持

npm install fastclick -S

之后,在main.js中引入,并绑定到body

import FastClick from 'fastclick'

FastClick.attach(document.body);

更改内置样式 

.hello /deep/ .van-button--danger{

      background: skyblue;

      border-color: skyblue;

}

ImagePreview 图片预览

import { ImagePreview } from 'vant';

Vue.use(ImagePreview);

需要绑定到vue的prototype属性上才能用

时间格式化插件vue-moment

npm install vue-moment

Vue.use(require('vue-moment'));

【资源说明】 基于vue2和vant-ui构建的前端H5商城源码+项目说明+在线预览.zip基于vue2和vant-ui构建的前端H5商城源码+项目说明+在线预览.zip 在线预览:http://swqjuelian.github.io 改进和优化大致内容如下: 1. 首页:下拉刷新、商品item一键加收藏、加购物车、分享、图片懒加载 2. 商品详情页:增加van的SKU选择面板 3. 分类:图片懒加载、空分类van-empty 4. 搜索页面:支持上拉加载更多数据(van的list组件运用)、支持价格排序(只有价格排序接口...) 5. 购物车:SKU项左滑可一键收藏和删除、商品标签显示。 6. 结算页:添加支付宝、微信支付方式、优惠卷选择组件、收货地址编辑。 7. 提供商品收藏功能:本地localstroage保存数据、支持左滑删除收藏。 8. 提供收货地址列表、收货地址编辑、新增收货地址。 9. 个人中心:添加待评价快捷按钮。 10. 支持评价商品,针对一个订单中的某个SKU分别评价(模仿京东和淘宝) 11. 提供确认收货、取消订单功能。 12. 订单页允许快捷重新将商品加入到购物车(模仿京东和淘宝)。 13. 细节:各个组件一些CSS样式调节(主要是模仿一下京东和淘宝、会额外添加一些按钮图标之类的) 14. keep-alive 缓存首页和分类页。 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载,沟通交流,互相学习,共同进步!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值