Vant

搭建一个vue-cli + ant design pro移动端开发模板

由 心已入冬 提交于 2020-08-15 04:39:56
利用vue-cli + vant搭建一个移动端开发模板 本文系原创，转载请附带作者信息。项目地址： https://github.com/momozjm/vant-project.git 前言 在项目开发过程中，一个新的项目需要我们从零开始搭建框架，这个时候我们就可以用网上很多的脚手架进行开发，但是我们在业务开发时，还需要对项目的架构进行完善。如果有一个类似于 ant design pro 这种类型的项目可以拿来即用，不需要过多的配置，就可以进行开发的话，岂不是美滋滋。 所以说为了便于后期的快速开发，我决定利用 vue-cli+vant 来打造一个移动端开发的模板，后期进行迭代，完善功能。 项目功能模块（不断更新中...） 项目代码 整个项目的脚手架是用 vue-cli 生成的，具体的生成方式可以自己网上查阅。下面我就简单介绍一下项目中添加了哪些功能模块 一、rem的适配 使用 postcss-pxtorem 与 flexable.js 结合的形式，适配各类机型。此配置是以2倍屏的基础来配置的，也就是说你的设计图也是以2倍屏设计的，这样设计图上的px值是多少你就可以直接拷过来，省去了px转rem的换算。 1：postcss-pxtorem的配置：在vue.config.js中添加如下代码(需要自己新建vue.config.js文件) css: { loaderOptions: {

【珍惜时间】 vant-finance-mobile

由 放肆的年华 提交于 2020-08-13 09:59:08
先说下这个作者大大的项目 运行就跳转到黄色网页了，然后我把网页差掉，接下来就是继续运行，然后就可以打开网页了 先放下作者大大的项目地址，接下来我们看下页面效果 https://github.com/huzongyao/vant-finance-mobile 接下来我们就来看代码喽 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>Vant Finance</title> <style> body { padding: 0; margin: 0 } #h-lb { width: 100%; height: 100%; position: fixed; text-align: center; background-color: #CA4040; } #h-con { position: fixed; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%,

前端也要懂物理 —— 惯性滚动篇

由 时光总嘲笑我的痴心妄想 提交于 2020-08-13 04:20:22
我们在平时编程开发时，除了需要关注技术实现、算法、代码效率等因素之外，更要把所学到的学科知识（如物理学、理论数学等等）灵活应用，毕竟理论和实践相辅相成、密不可分，这无论是对于我们的方案选型、还是技术实践理解都有非常大的帮助。今天就让我们一起来回顾中学物理知识，并灵活运用到惯性滚动的动效实现当中。 惯性滚动 （也叫 滚动回弹 ， momentum-based scrolling ）最早是出现在 iOS 系统中，是指 当用户在终端上滑动页面然后把手指挪开，页面不会马上停下而是继续保持一定时间的滚动效果，并且滚动的速度和持续时间是与滑动手势的强烈程度成正比 。抽象地理解，就像高速行驶的列车制动后依然会往前行驶一段距离才会最终停下。而且在 iOS 系统中，当页面滚动到顶/底部时，还有可能触发 “回弹” 的效果。这里录制了微信 APP 【账单】页面中的 iOS 原生时间选择器的惯性滚动效果： 熟悉 CSS 开发的同学或许会知道，在 Safari 浏览器中有这样一条 CSS 规则： 1 -webkit-overflow-scrolling : touch ; 当其样式值为 touch 时，浏览器会使用具有回弹效果的滚动, 即“当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果”。除此之外，在丰富多姿的 web 前端生态中，很多经典组件的交互都一定程度地沿用了惯性滚动的效果

诚选app优化方案

由 生来就可爱ヽ(ⅴ＜●) 提交于 2020-08-11 07:47:53
解决大文件问题，目前发现整个项目打包的出来的文件过大 1.如图一、图二可以看到在Stat Parsed Gzip下文件的大小相差很大，目前从图三中可以看到两个属性productionSourceMap、ProductionGzip，productionSourceMap为true的时候会生成一些map文件(只是方便看源码)，这样会导致额外的文件，代码的内容也被暴露，所以应该设置为false，减少额外文件产生，另外打包的应该开启Gzip压缩，目前看到ProductionGzip为false，可以设置为true，服务器也需要gzip模式 2.如图一、图二可以看到一些大文件，例如echarts、jquery、vux等一些大文件，例如echarts我们可以在线定制自己需要的模块，通过这样减少文件体积，另外一些文件如果可以从cdn引入的，也可以这么去做，如果可以按需加载的，建议都按需加载，例如vux 图一： 图二： 图三： 图四： 图片懒加载 1.滚动到特定位置才进行图片的加载，这样可以减少页面初始化的时候，一次性加载完所有的资源，导致页面响应过慢，先将img标签的src链接设为同一张图片（比如空白图片），然后给img标签设置自定义属性（比如 data-src），然后将真正的图片地址存储在data-src中，当JS监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中

用vue3.0.1如何搭建仿京东的电商H5项目呢？本文实战教你

由 倾然丶 夕夏残阳落幕 提交于 2020-08-11 03:50:34
前言 就在前段时间，vue官方发布了3.0.0-beta.1 版本，趁着五一假期有时间，就把之前的一个电商商城的项目，用最新的 Composition API 拿来改造一下！ 👉GitHub地址请访问🔗： github.com/GitHubGanKa… 项目介绍 vue-jd-h5 是一个电商H5页面前端项目，基于Vue 3.0.0-beta.1 + Vant 实现，主要包括首页、分类页面、我的页面、购物车等。 📖本地线下代码vue2.6在分支 demo 中，使用mockjs数据进行开发，效果图请点击🔗 这里 ❌️master分支是线上生产环境代码，因为部分后台接口已经挂了😫，不建议使用！ 📌 本项目还有很多不足之处，如果有想为此做贡献的伙伴，也欢迎给我们提出PR或者issue ； 🔑 本项目是免费开源的，如果有伙伴想要在次基础上进行二次开发，可以clone或者fork整个仓库，如果能帮助到您，我将感到非常高兴，如果您觉得这个项目不错还请给个start！ 🙏 除了本项目，我结合多年开发经验整理出2020最新企业级实战视频教程 包括 Vue3.0/Js/ES6/TS/React/node等，想学的可进扣扣裙 519293536 免费获取，小白勿进哦！ 搭建步骤 首先,选择一个文件，将代码clone到本地（需要先fork代码到你自己的仓库，别用我的这个链接）： git clone

在vue-vant中使用Clipboard

由 牧云@^-^@ 提交于 2020-08-10 23:49:33
@/mixins/Clipboard.js import { Toast } from 'vant' import Clipboard from 'clipboard' export default { directives: { copy: { inserted(el) { const obj = new Clipboard(el) obj.on('success', () => { Toast('复制成功') }) obj.on('error', () => { Toast('复制失败，请手动选择复制') }) } } } } 在需要的页面中引入 import Clipboard from '@/mixins/Clipboard' export default { mixins: [Clipboard], ... } 在模板中使用 <van-icon v-copy data-clipboard-text="内容" class="iconfont" class-prefix="icon" name="copy"/> 来源： oschina 链接： https://my.oschina.net/u/2266306/blog/4335894

如何使用微信小程序第三方UI组件库

由 旧街凉风 提交于 2020-08-09 17:13:16
组件库主要是vant和微信小程序官方文档 小程序引入第三方UI框架（基于npm模块） 1、初始化package.json文件。 2、安装需要的小程序ui框架。 3、配置小程序（支持npm，配置在下面有写） 4、在app.wxml中引入第三方UI样式。 5、然后就可以使用了。（怎么使用看以下操作） 具体实现： npm init - y 初始化 npm install weui - miniprogram 安装 配置：打开开发者工具一步一步配置 然后在工具栏中找到工具，右键找到构建 npm,然后就直接生成了下面选中的文件（无需手动添加）： 在app.wxss引入样式： 然后xxx.json中引入第三方组件路径。 vant 小程序UI组件库（使用方法和微信小程序官方文档的使用方法大致一致） 组件库地址：https://vant-contrib.gitee.io/vant-weapp/#/intro 1、初始化package.json npm init - y 2、安装需要的小程序ui框架或第三方包 npm i @vant / weapp - S -- production 3、配置小程序 支持npm，打开开发者工具 然后在开发者工具栏中找到工具，右键找到构建 npm. 就生成了下列文件 4、在要引入的页面中添加相关组件并在页面中直接使用 xxx . json中 引入第三方组件路径

搭建一个vue-cli4+webpack移动端框架（开箱即用）

由 丶灬走出姿态 提交于 2020-08-06 08:01:45
简介 这是基于 vue-cli4 实现的移动端框架，其中包含项目常用的配置，组件封装及webpack优化方法，可供快速开发使用。 技术栈：vue-cli4 + webpack4 + vant + axios + less + postcss-px2rem 源码 github.com/Michael-lzg… // 安装依赖 npm install // 本地启动 npm run dev // 生产打包 npm run build 复制代码 在一两年前，vue-cli3已经声驾到3.0+版本，但是由于旧项目一致习惯于vue-cli2的脚手架的使用，之前也写过一篇 搭建一个vue-cli的移动端H5开发模板 简单总结了一点移动端的开发技巧。 近日升级vue-cli脚手架才发现，这已经升级到4.0+版本了，觉得很多必要在新的项目中使用vue-cli4进行开发，加上近来对webpack有了进一步理解，所以结合了vue-cli4和webpack搭建了一个移动端框架，以便开箱即用。 主要包括如下技术点： vue-cli4脚手架 vant按需引入 移动端rem适配 axios拦截封装 util工具类函数封装 vue-router配置 登录权限校验 多环境变量配置 vue.config.js配置 toast组件封装 dialog组件封装 跨域代理设置 webpack打包可视化分析 CDN资源优化
订阅 Vant