Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >使用 Vue3.0+Typescript+Vant 搭建基础H5模板

使用 Vue3.0+Typescript+Vant 搭建基础H5模板

作者头像
Ewall
发布于 2021-04-01 09:08:01
发布于 2021-04-01 09:08:01
1.6K04
代码可运行
举报
文章被收录于专栏:vue学习vue学习
运行总次数:4
代码可运行

VUE-H5-TEMPLATE

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

基本说明

部分页面预览:

首页

商详

购物车

我的

首页

商详

购物车

我的

安装使用

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
# 项目下载
# 克隆项目很慢?将地址中的 `github.com` 替换为 `github.com.cnpmjs.org` 试试
$ git clone git@github.com:Ewall1106/vue-h5-template.git

# 安装运行
$ yarn & yarn dev

功能特性

开发规范

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

初始化配置

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

基础功能

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

组件相关

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

其它方面

  • vscode 调试
  • ....

目录结构

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
|-- 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相关配置文件
|-- ...

目录说明:

  • 目录 components 下的所有公共组件使用 tsx 进行开发。
  • 目录 views 下的业务组件使用 sfc 的形式进行开发。
  • 为什么这样划分?对于公共组件来说,使用 tsx 开发更加灵活、渲染性能更好且更方便测试。对于业务组件,使用 sfc 的方式可以更好的发挥出 vue 的优势,简洁明了。
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
VBA实战技巧35:使用VBA组织图形2
引言:本文的代码与昨天发表的《VBA实战技巧34:使用VBA组织图形1》一样,都整理自mrexcel.com,一个很好的令人兴奋的示例,有兴趣的朋友可以仔细研究。
fanjy
2021/09/22
1.9K0
VBA实战技巧34:使用VBA组织图形1
引言:本文的代码整理自mrexcel.com,一个很好的令人兴奋的示例,有兴趣的朋友可以仔细研究。
fanjy
2021/09/22
1.8K0
如何根据Excel某列数据为依据分成一个新的工作表
1. Youtube - Derrick Sherrill 2. GitHub
繁华是客
2023/03/03
7.8K0
VBA专题01:操作形状的VBA代码
Excel提供了多种多样的形状类型,如下图1所示。本文主要讲述VBA操作形状的基础操作。
fanjy
2019/07/19
6.3K0
VBA技术:你需要知道的一些VBA操作形状的代码
在Excel中,可以通过功能区“插入”选项卡“插图”组中的“形状”库按钮在工作表中插入形状。可以使用形状来可视化数据、在形状中添加文本、作为执行宏代码的按钮,等等。
fanjy
2023/02/24
5.4K0
VBA技术:你需要知道的一些VBA操作形状的代码
谈谈使用VBA控制PPT
然而,与Excel不同的是,在PowerPoint中没有宏录制器,因而不能将操作录制成代码。但我们可以借助于Excel的宏录制器,在Excel中录制相关操作的代码,然后稍作修改,将其移植到PowerPoint中。
fanjy
2023/08/30
9940
谈谈使用VBA控制PPT
VBA操作VBA——提取数字
会使用Excel的人都知道数字和文本是应该分开列来存储的,可是总是会碰上一些人仅仅是把Excel当作制作表格的一个简单工具,至于使用函数进行数据处理是根本不会的!
xyj
2020/07/28
4.6K0
VBA操作VBA——提取数字
VBA实战技巧03: 精确追踪工作表中我们关注的形状
有些Excel用户喜欢在工作表中绘制形状,以实现其目的。例如,如下图1所示,绘制一个矩形方框来强调这些单元格中的数据。
fanjy
2020/03/27
1.1K0
VBA专题09:基本的Excel图表编程代码
图表是数据可视化的一种常用呈现方式,VBA代码可以帮助我们自动化创建图表及对图表进行相关的操作,特别是当工作表中有大量图表需要进行重复修改时,VBA十分有用。
fanjy
2020/02/18
5.3K0
ExcelVBA拆分_一簿一表_to_多簿一表
哆哆Excel
2023/09/09
3280
ExcelVBA拆分_一簿一表_to_多簿一表
问与答112:如何查找一列中的内容是否在另一列中并将找到的字符添加颜色?
Q:我在列D的单元格中存放着一些数据,每个单元格中的多个数据使用换行分开,列E是对列D中数据的相应描述,我需要在列E的单元格中查找是否存在列D中的数据,并将找到的数据标上颜色,如下图1所示。
fanjy
2021/04/21
10K0
问与答112:如何查找一列中的内容是否在另一列中并将找到的字符添加颜色?
ExcelVBA拆分之一簿一表_to_一簿多表使用演示
哆哆Excel
2023/09/09
3270
Excel VBA编程
在Excel中,数据只有文本,数值,日期值,逻辑值和错误值五种类型。但是在VBA中,数据类型跟Excel不完全相同。根据数据的特点,VBA将数据分为布尔型(boolean),字节型(byte),整数型(integer),单精度浮点型(single),双精度浮点型(double),货币型(currency),小数型(decimal),字符串型(string),日期型(date),对象型等等
全栈程序员站长
2022/08/11
49.5K0
Excel VBA编程
VBA程序:在Excel中生成奇数阶魔方
大家都知道魔方,因为经常会遇到它。魔方是正方形网格,它的最小尺寸为3×3。魔方中的整数只出现一次,所有单元格都填充数字。水平行、垂直列以及主对角线和次对角线的数字加起之和都相同。这个数字和就叫做魔法常数。
fanjy
2022/06/04
1.2K0
VBA程序:在Excel中生成奇数阶魔方
ExcelVBA拆分之一簿一表_to_一簿多表
哆哆Excel
2023/09/09
3310
ExcelVBA拆分之一簿一表_to_一簿多表
VBA将一行数据分为多行
有个表格,有许多单元格的数据,制作者为了方便,很多数据是写在一行的,类似下面这种:
xyj
2020/07/28
5K2
VBA将一行数据分为多行
常用功能加载宏——拆分工作表
有合并工作表,自然也离不开拆分工作表,将一个总表,按照某一列的内容拆分为多个工作表,然后可以再结合前面的一个工作簿的工作表另存为工作簿功能,就可以生成多个工作簿进行分发了:
xyj
2020/07/28
2.6K0
常用功能加载宏——拆分工作表
VBA技巧:自动给每个工作表添加相同大小和位置的按钮并指定相同的宏
Q:我有一个工作簿,包含有多个工作表,我想在这些工作表的同一位置都添加一个按钮,并对这些按钮指定相同的宏过程,如何实现?
fanjy
2024/05/22
1.1K0
VBA技巧:自动给每个工作表添加相同大小和位置的按钮并指定相同的宏
VBA实用小程序78:统计工作簿内文本框和批注中的字符及单词数
下面的程序可以统计工作簿所有工作表中文本框和批注内的字符和单词的数量。 Sub CountCharWorBOXCMT() Dim wks As Worksheet Dim lCommentch As Long Dim lCommentwords As Long Dim lTxtBoxChar As Long Dim lTxtBoxCharWords As Long Dim objShp As Shape Dim sMsg As String
fanjy
2021/06/01
1.2K0
VBA实用小程序78:统计工作簿内文本框和批注中的字符及单词数
VBA与数据库——简化程序编写-汇总
我们在使用VBA处理Excel数据的时候,很多时候就是对数据进行分类汇总、查找等等。一般这种功能都是使用字典来实现,比如汇总数据功能。
xyj
2021/06/22
1.4K0
VBA与数据库——简化程序编写-汇总
推荐阅读
相关推荐
VBA实战技巧35:使用VBA组织图形2
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验