5 Star 4 Fork 2

SyncGithub / vue-h5-template

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

VUE-H5-TEMPLATE

vue vant license

Vue-H5-Template 项目以小商城作为基本的内容演示,使用 Vue3.0+Typescript+Vant 搭建 移动端h5页面 开发所需的基础模板,并提供一些通用型的解决方案及扩展功能。

基本说明

部分页面预览:

首页 商详 扩展

手机扫码预览:

安装使用

# 项目下载
# 克隆项目很慢?将地址中的 `github.com` 替换为 `github.com.cnpmjs.org` 试试
$ git clone git@github.com:Ewall1106/vue-h5-template.git

# 安装运行
$ yarn & yarn dev

功能特性

:hammer: 开发规范

  • Eslint 校检及错误提示
  • Prettier 统一代码风格
  • StyleLint 样式风格
  • Typescript 语法支持

:hammer: 初始化配置

  • vw 移动端适配
  • css 预处理器
  • 浏览器默认样式处理
  • promise 降级
  • fast-click 处理

:hammer: 基础功能

  • vuex4.0 封装及使用
  • vue-router4.x 路由配置及权限控制
  • axios+typescript 封装及请求
  • composition-api 及自定义 hooks 封装

:hammer: 组件相关

  • vant 组件的安装及使用
  • scroll 横向滚动组件封装
  • svg-icon 图标组件

:hammer: 其它方面

  • vscode 调试
  • ....

目录结构

|-- public                // public
|-- config                // config配置文件
|-- src
|   |-- api               // 接口列表
|   |-- assets            // 图片资源
|   |-- components        // 公共组件
|   |-- hooks             // 全局hooks
|   |-- icons             // svg图标
|   |-- router            // 路由
|   |-- store             // vuex
|   |-- styles            // 公共样式
|   |-- types             // 文件声明
|   |-- utils             // 工具函数
|   |-- views             // 各级页面
|   |   |-- home          // 首页
|   |   |   |-- components   // 局部组件
|   |   |   |-- hooks        // 局部hooks
|   |   |   |-- index.vue    // 页面
|   |   |-- user          // 用户
|   |   |-- ....          // ...
|   |-- App.vue           // 主页面
|   |-- main.js           // 入口文件
|-- .eslintrc.js          // eslint配置
|-- .prettierrc           // .prettier配置
|-- babel.config.js       // babel配置文件
|-- changelog.md          // 更新日志
|-- package.json          // 客户端依赖
|-- postcss.config.js     // postcss配置文件
|-- vue.config.js         // vue相关配置文件
|-- ...

:bookmark: 目录说明:

  • 目录 components 下的所有公共组件使用 tsx 进行开发。
  • 目录 views 下的业务组件使用 sfc 的形式进行开发。
  • 为什么这样划分?对于公共组件来说,使用 tsx 开发更加灵活、渲染性能更好且更方便测试。对于业务组件,使用 sfc 的方式可以更好的发挥出 vue 的优势,简洁明了。

协议

  • MIT

  • Copyright (c) 2021-present Ewall&熊猫

MIT License Copyright (c) 2020 Ewall&熊猫 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

使用Vue3.0+Typescript+Vant搭建移动端H5页面开发所需的基础模板,并提供一些通用型的解决方案及扩展功能。 展开 收起
TypeScript 等 5 种语言
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
TypeScript
1
https://gitee.com/sync-github/vue-h5-template.git
git@gitee.com:sync-github/vue-h5-template.git
sync-github
vue-h5-template
vue-h5-template
master

搜索帮助