https://github.com/0xlau/vue-mobile-template

🎉 An open-source and free H5 mobile template based on vue3.x + CompositionAPI + JavaScript + vite + vant + vue-router-next + pinia, designed to help developers quickly build HTML5 mobile applications.
https://github.com/0xlau/vue-mobile-template

html5 javascript pinia vite vue3

Last synced: about 1 month ago
JSON representation

🎉 An open-source and free H5 mobile template based on vue3.x + CompositionAPI + JavaScript + vite + vant + vue-router-next + pinia, designed to help developers quickly build HTML5 mobile applications.

• Host: GitHub
• URL: https://github.com/0xlau/vue-mobile-template
• Owner: 0xlau
• License: mit
• Created: 2022-04-18T17:09:19.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2024-05-28T02:03:46.000Z (7 months ago)
• Last Synced: 2024-05-28T11:58:37.938Z (7 months ago)
• Topics: html5, javascript, pinia, vite, vue3
• Language: Vue
• Homepage: https://coder-xiaoyi.github.io/vue-mobile-template
• Size: 1.46 MB
• Stars: 92
• Watchers: 3
• Forks: 18
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


	

	


        

            

		

	    

	        

	    

	    

	        

	    

	    

	        

	    

		

		    

		

		

		    

		

	

	
 



#### 📅 开源项目的由来

某天因公司业务需求，想寻找一款H5移动端的模板进行二次开发。但搜遍整个HUB都没法找到合适的空模板进行二次开发，所以心血来潮，于是有了 vue-mobile-template 。

#### 🌈 介绍

基于 vue3.x + CompositionAPI + javascript + vite + vant + vue-router-next + pinia 的开源免费移动端模板，希望减少工作量，帮助大家实现快速开发移动端。

vue-mobile-template默认已加入 `Rem布局适配`，可在根目录 `postcss.config.js` 进行修改。

#### ✨ 已内置的功能

- 组件

  - GridCard - 网格卡片

  - MsgList - 消息列表

  - SvgIcon - 矢量图形

- 页面

  - 登录页面

  - 聊天消息列表页面

  - 个人中心页面 * 2	

- 功能

  - 登录、登出

  - 页面权限

  - 指令权限

  - Rem布局适配

#### ⛱️ 线上预览

- github 演示

- gitee 演示

- Admin账号密码：admin/admin123

- user账号密码：user1/user1

#### 💒 代码仓库

- 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                                                                |

| ------------------------------------------------------------------------ | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ |

| ![Edge](https://cdn.jsdelivr.net/npm/@browser-logos/edge/edge_32x32.png) | ![Firefox](https://cdn.jsdelivr.net/npm/@browser-logos/firefox/firefox_32x32.png) | ![Chrome](https://cdn.jsdelivr.net/npm/@browser-logos/chrome/chrome_32x32.png) | ![Safari](https://cdn.jsdelivr.net/npm/@browser-logos/safari/safari_32x32.png) |

> 由于 Vue3 不再支持 IE11，故而 vant 也不支持 IE11 及之前版本。

#### ⚡ 使用说明

```bash

# 克隆项目

git clone https://github.com/Coder-XiaoYi/vue-mobile-template.git

# 进入项目

cd vue-mobile-template

# 安装依赖

yarn

# 运行项目

yarn run dev

# 打包发布

yarn run build

```

#### ❤️ 鸣谢列表

- vue

- vue-next

- vant

- vue-router-nex

- vuex

- pinia

- axios

- vue-next-admin

- RuoYi-Vue3

#### 💌 支持作者

如果觉得框架不错，或者已经在使用了，希望你可以去 Github 或者

Gitee 帮我点个 ⭐ Star，这将是对我极大的鼓励与支持。

#### 🙈 部分框架截屏