基于 vue-cli4+vant 搭建 H5 通用架子(支持微信公众号)

基于 vue-cli4+vant 搭建 H5 通用架子(支持微信公众号)
已经上传vue3.0+ts分支
如果有优化建议和bug请提issue

代码仓库

功能介绍

  • 支持 px 自动转 vw(rem暂时废弃) 并且忽略 node_modules 下三方包
  • 常用目录别名设置
  • 支持 scss 全局样式、变量、函数…
  • 支持 gzip 压缩
  • 支持本地 mock 模拟数据
  • 支持网站标题动态设置
  • axios 封装
  • cdn 配置加载
  • 支持多环境模式
  • 内置微信公众号 sdk
  • 支持 vant 组件库的按需加载
  • 支持 svg 雪碧图
  • 本项目已经实现vant-ui自带组件库的自适应, 正常开发直接写750px的设计稿像素

代码风格
文档

安装

git clone git@gitee.com:null_639_5368/vue-vant-base.git

或者
下载 zip
演示
http://null_639_5368.gitee.io/vue-vant-base

运行

npm install 或者 yarnnpm run dev:mock 模拟数据模式npm run dev 默认开发模式npm run build 生产模式

注意事项

// config/env.development.js// http统一api请求前缀(开发模式下做跨域处理,一般清楚下不用做特殊处理)
baseApi='/api'
// config/env.production.js// 这里修改为网站发布的目录如'./xxx',如果在根目录修改为'/' (如果这里配置不当会找不到路径导致白屏)
publicPath='/vue-vant-base'// http统一api请求前缀(生产模式下填后端api地址)
baseApi='http://wwww.xxx.com/api'

启动项目如果报错请参考《vue 报错error: ‘to‘ is defined but never used (no-unused-vars)》

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/516354.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

银河证券上云 打开互联网金融思维的魔盒

云栖号案例库:【点击查看更多上云案例】 不知道怎么上云?看云栖号案例库,了解不同行业不同发展阶段的上云方案,助力你上云决策! 近些年,很多证券公司纷纷设立“互联网金融”部门,推出创新业务&a…

如何轻松地将可访问LAN的Pod部署到Kubernetes集群上

撰者 | Jack Wallen 译者 | Katie,责编 | Jerry来源 | CSDN云计算封图 | CSDN 下载自视觉中国想要在Kubernetes集群上部署可访问LAN的Pod来达到目的?接下来就展示一下它实际上是多么容易。Kubernetes更具挑战性的方面之一是部署到集群,同时使…

车市下滑 领克汽车为什么逆势上扬?

云栖号案例库:【点击查看更多上云案例】 不知道怎么上云?看云栖号案例库,了解不同行业不同发展阶段的上云方案,助力你上云决策! 2018年末开始,寒潮席卷中国汽车市场。热了20多年的中国车市,迎来…

使用Vant完成DatetimePicker 日期的选择器

效果演示&#xff1a; 代码 <template><div> <!-- 输入框形式--><van-fieldreadonlyclickablename"calendar":value"timeValue"label"日期选择&#xff1a;"placeholder"发生事故的时间点"click"showP…

token简述

目录 前言1.什么是 token2. 使用Token的意义3. 基于Token的身份验证3.2 Token常用的两种使用方式3.2.1 用设备号 / 设备MAC地址作为Token5. Token实现思路6. Token优势6.1 无状态、可扩展6.2 安全性6.3 可扩展性6.4 多平台跨域6.5 基于标准前言 对于初学者来说,对Token这个玩…

彩生活云上转型 打造全球最大社区服务运营商

云栖号案例库&#xff1a;【点击查看更多上云案例】 不知道怎么上云&#xff1f;看云栖号案例库&#xff0c;了解不同行业不同发展阶段的上云方案&#xff0c;助力你上云决策&#xff01; 在房地产行业增速放缓的大环境下&#xff0c;转型焦虑几乎已经弥漫整个地产行业&#xf…

谷歌这波操作,预警了什么信号??

我们都知道谷歌爸爸收购了Cask Data一家公司。长期以来&#xff0c;谷歌致力于推动围绕 GoogleCloud 的企业业务&#xff0c;但在这方面一直被亚马逊和微软吊打&#xff0c;这次的收购正是为了弥补自身的短板。被收购的 Cask Data 是一家专门提供基于Hadoop的大型数据分析服务解…

css h5移动端背景铺满

使用绝对定位强制定义盒模型的区域 .page{background-color: #F7F7F7;width: 100%;position: absolute;top: 0px;bottom: 0px; }

【开发者成长】“机器学习还是很难用!”

云栖号资讯&#xff1a;【点击查看更多行业资讯】 在这里您可以找到不同行业的第一手的上云资讯&#xff0c;还在等什么&#xff0c;快来&#xff01; 机器学习仍然很难用&#xff0c;但情况开始有所改善了。 以下为译文&#xff1a; 我是一名Cortex贡献者&#xff0c;Cortex是…

cropper基本用法

文章目录 1. 基本使用步骤2. 更换裁剪的图片3. 将裁剪后的图片,输出为 base64 格式的字符串1. 基本使用步骤 在 <head> 中导入 cropper.css 样式表: <link rel="stylesheet" href="/assets/lib/cropper/cropper.css"

这个年均开销3500万美元的 FBI 机密部门,将结合面部识别与大数据技术来调查案件...

撰者 | Thomas Brewster译者 | Katie&#xff0c;责编 | Jerry来源 | CSDN云计算FBI面部识别大数据&#xff0c;瞄准恐怖犯罪事件在发生大规模枪击或恐怖袭击后&#xff0c;调查人员可能会留有数小时的闭路电视录像&#xff0c;证人的视频或社交媒体的剪辑。以2013年的波士顿马…

节省50%部署时间的5大KS8服务

云栖号资讯&#xff1a;【点击查看更多行业资讯】 在这里您可以找到不同行业的第一手的上云资讯&#xff0c;还在等什么&#xff0c;快来&#xff01; Kubernetes已然成为IT世界的重要组成部分&#xff0c;并且仍在不断地发展壮大&#xff0c;现阶段&#xff0c;Kubernetes已经…

内网穿透访问Vue项目的时候出现Invalid Host header解决办法

出现Invalid Host header解决办法 内网穿透 适用场景: 在本地的Vue-cli3项目, 需要其他人浏览. 如果没有外网的服务器, 可以把自己的电脑当做服务器. 这时候需要外网的人能访问到自己的电脑. 内网穿透工具: 这个有很多, 比如花生壳, Frp, ngrok, 我用的是国内的sunny-ngrok. 使…

耗时又繁重的SQL诊断优化,以后就都交给数据库自治服务DAS吧!

作者&#xff1a;斯干&#xff0c;阿里云数据库高级技术专家 在我们业务系统中&#xff0c;数据库越来越扮演着举足轻重的角色。 和其它公司一样&#xff0c;在阿里巴巴业务场景下&#xff0c;大部分业务跟数据库有着非常紧密的关系&#xff0c;数据库一个微小的抖动都有可能…

大事件后台管理系统开发实战(下)

文章目录 续前篇:大事件后台管理系统开发实战(中)1. 文章类别1.1 点击编辑按钮展示修改文章分类的弹出层1.2 为修改文章分类的弹出层填充表单数据1.3 更新文章分类的数据1.4 删除文章分类2. 文章列表2.1 创建文章列表页面2.2 定义查询参数对象q2.3 请求文章列表数据并使用模…

【医疗】疫情下的医院信息化短板如何补足?

云栖号资讯&#xff1a;【点击查看更多行业资讯】 在这里您可以找到不同行业的第一手的上云资讯&#xff0c;还在等什么&#xff0c;快来&#xff01; 疫情初期&#xff0c;武汉大量患者拥挤在医院的视频在网上传播。 一时间&#xff0c;各地各级医院正尽最大努力利用信息化手…

《vue+vant 文本超出两行部分省略号显示》

今天做移动端项目&#xff0c;遇到了这个问题 面向百度后总结得到了这个结果。 首先&#xff0c;我们要知道css的三条属性。 overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出则不换行 这里不符合我们的要求所有…

这三年被分布式坑惨了,曝光十大坑

本篇主要内容如下&#xff1a;前言我们都在讨论分布式&#xff0c;特别是面试的时候&#xff0c;不管是招初级软件工程师还是高级&#xff0c;都会要求懂分布式&#xff0c;甚至要求用过。传得沸沸扬扬的分布式到底是什么东东&#xff0c;有什么优势&#xff1f;借用火影忍术风…

斗胆推荐一款刚出的微服务网关

前言 使用 API 网关作为内部服务面向客户端的单一入口&#xff0c;是一种普遍采用的架构模式。企业组织通过良好定义的 API 将内部系统向内部和外部用户公开&#xff0c;通常都会采用 API 网关来处理横向的关注点&#xff0c;包括访问控制、速率限制、负载均衡等等&#xff0c…

js删除数组中的某个对象

var keyid str6-986; var tableData [{Id:6789-201,Type:试产},{Id:str6-986,Type:量产},{Id:o786-112,Type:试产} ]; for(var i0; i<tableData.length; i){if(tableData[i].Id keyid){tableData.splice(i,1);} } console.log(tableData);