vue-mobile-template 前端开源框架

开源项目的由来
某天因公司业务需求,想寻找一款H5移动端的模板进行二次开发。但搜遍整个HUB都没法找到合适的空模板进行二次开发,所以心血来潮,于是有了 vue-mobile-template 。
介绍
基于 vue3.x + CompositionAPI + javascript + vite + vant + vue-router-next + pinia 的开源免费移动端模板,希望减少工作量,帮助大家实现快速开发移动端。
vue-mobile-template默认已加入 Rem布局适配
,可在根目录 postcss.config.js
进行修改。
⛱️ 线上预览
- 尚未搭建
代码仓库
- vue-mobile-template (github): https://github.com/Coder-XiaoYi/vue-mobile-template
- vue-mobile-template (gitee): https://gitee.com/liupeiqiang/vue-mobile-template
安装 yarn
- 复制代码(桌面 cmd 运行)
npm install -g yarn
环境支持
Edge | last 2 versions | last 2 versions | last 2 versions |
---|---|---|---|
![]() |
![]() |
![]() |
![]() |
由于 Vue3 不再支持 IE11,故而 vant 也不支持 IE11 及之前版本。
使用说明
# 克隆项目
git clone https://github.com/Coder-XiaoYi/vue-mobile-template.git
# 进入项目
cd vue-mobile-template
# 安装依赖
yarn
# 运行项目
yarn run dev
# 打包发布
yarn run build
学习交流加 QQ 群
- 查看开发文档、vue-mobile-template 开发文档正在编写中...
️ 鸣谢列表
支持作者
如果觉得框架不错,或者已经在使用了,希望你可以去 Github 或者
Gitee 帮我点个 Star,这将是对我极大的鼓励与支持。
部分框架截屏
![]() |
![]() |
![]() |
![]() |
![]() |
vue-mobile-template 前端开源框架的更多相关文章
- Vue 浅谈前端js框架vue
Vue Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vu ...
- Angular前端开源框架
1. 项目框架介绍 本项目采用了开源项目ngx-admin作为脚手架.基于Angular 8 +,Bootstrap 4+和Nebular,ngx-admin是最受欢迎的后台管理模板,是用于个人和商 ...
- 支付宝前端开源框架Alice(解决各个浏览器的样式不一致的问题)
/**************** 网址:https://github.com/sofish/Alice /****************** @charset "utf-8& ...
- 前端三大框架Angular & React & Vue
前端三大框架: Angular[Google]:一套框架,多种平台移动端 & 桌面端.学会用Angular构建应用,然后把这些代码和能力复用在多种多种不同平台的应用上 —— Web.移动 We ...
- [Vue 牛刀小试]:第十六章 - 针对传统后端开发人员的前端项目框架搭建
一.前言 在之前学习 Vue 基础知识点的文章中,我们还是采用传统的方式,通过在 html 页面上引用 vue.js 这个文件,从而将 Vue 引入到我们的项目开发中.伴随着 Node.js 的出现, ...
- Web前端开发必不可少的9个开源框架
大多数人想到Web开发时,通常会想到HTML或JavaScript,往往忽略了CSS,根据Wikipedia的说法,CSS既是网页中最重要也是最常被遗忘的部分之一,尽管它是万维网的三大基础技术之一. ...
- 2015年最全的移动WEB前端UI框架
目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了.在移动WEB开发的过程中,使用合适的移动WEB UI框架可以大大提升我们的开发效率.下面P ...
- web前端UI框架
分类:WEB前端 时间:2016年1月13日 目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了.在移动WEB开发的过程中,使用合适的移动WE ...
- vue,react,angular三大web前端流行框架简单对比
常用的到的网站 vue学习库: https://github.com/vuejs/awesome-vue#carousel (json数据的格式化,提高本地测试的效率) json在线编辑: http: ...
随机推荐
- 【算法篇】Bitmap 算法
首先,什么是Bitmap算法(位图算法)呢? 一:定义: Bit map就是用一个bit位来标记某个元素对应的Value, 而Key即是该元素.使用Bit为用来存储数据的单位, 可以大大节省存储空间. ...
- Kafka02--Kafka生产者简要原理
前言 在Kafka01--Kafka生产者使用方式中对KafkaProducer的基本使用方式进行了了解.以上只是使用方面,一个好的开元框架必定是易于开发者使用的,但是对生产者的基本逻辑流程和数据流转 ...
- System.getenv和getProperty的区别
/** * System.getenv()是获取---环境变量(environment variables), * 系统层面的,好比我linux系统里的.bash_profile文件里面的变量 * 返 ...
- BMZCTF 端午节就该吃粽子
端午节就该吃粽子 题目如下让我们访问login.php 然后就一个登录界面查看源码发现index.php 我们直接访问发现没有结果使用伪协议读取 然后我们使用base64解密 <?php err ...
- 13_Invariance Principle_LaSalle's Theorem_不变性原理
- css中几个重要概念
替换元素与非替换元素 替换元素:是指浏览器根据元素的标签和属性来决定元素的具体内容. 例如"<img src="xx.jpg">浏览器会根据标签的src属性的 ...
- CSS:两端对齐原理(text-align:justify)
我是一个小白我是一个小白我是一个小白喷我吧,哈哈 写样式的是时候经常会碰到字体两端对齐的效果,一般就网上找端css样式复制下就结束了,没有考虑过原理是啥贴下代码 <head> <me ...
- python-爬楼梯
[题目描述] 假设一段楼梯共n(n>1)个台阶,小朋友一步最多能上3个台阶,那么小朋友上这段楼梯一共有多少种方法. [练习要求]请给出源代码程序和运行测试结果,源代码程序要求添加必要的注释. [ ...
- Myeclipse 中怎样更改web项目的访问名
第一步:在要修改的项目名称上右击选择最下面一列的"prepertise"(属性),进入属性设置界面. 第二步:找到左侧菜单栏的"Myeclipse"中的web项 ...
- video踩坑
查看以及修改video控件样式,原文地址:https://blog.csdn.net/z2181745/article/details/82531686 chrome浏览器,F12调出控制台左上角三点 ...