Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
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.5K00
代码可运行
举报
文章被收录于专栏:vue学习vue学习
运行总次数:0
代码可运行

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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
基于 Vue3、TypeScript、Vite2、Pinia 开源的后台管理框架
◆ 一、开源项目简介 Geeker Admin,基于 Vue3.2、TypeScript、Vite2、Pinia、Element-Plus 开源的一套后台管理框架。 ◆ 二、开源协议 使用0BSD开源协议 ◆ 三、界面展示 项目截图 1、登录页: 2、首页: 3、表格页: 4、数据大屏: ◆ 四、功能概述 项目功能 使用 Vue3.2 开发,单文件组件 <script setup> 采用 Vite2 作为项目开发、打包工具(配置了 Gzip 打包、TSX 语法、跨域代理、打包预览工具……)  
IT大咖说
2022/08/26
1.7K0
基于 Vue3、TypeScript、Vite2、Pinia 开源的后台管理框架
【Vue H5项目实战】从0到1的自助点餐系统—— 搭建脚手架(Vue3.2 + Vite + TS + Vant + Pinia + Node.js)
H5 项目基于 Web 技术,可以在智能手机、平板电脑等移动设备上的浏览器中运行,无需下载和安装任何应用程序,且H5 项目的代码和资源可以集中在服务器端进行管理,只需更新服务器上的代码,即可让所有顾客访问到最新的系统版本。
中杯可乐多加冰
2024/09/15
5110
Vue + TypeScript + Element 项目实战及踩坑记
本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 。
夜尽天明
2019/06/03
4.7K0
Vite + React + Typescript 构建实战
点击上方蓝字,发现更多精彩 导语 最近前端大火的 Vite 2.0 版本终于出来了,在这里分享一下使用 vite 构建一个前端单页应用以及踩过的坑,希望能带给大家一些收获。 文章首发于个人博客:heavenru.com 该文章主要面向对 Vite 感兴趣,或者做前端项目架构的同学 源码地址:fe-project-base https://github.com/lichenbuliren/fe-project-base 通过这篇文章,你能了解到以下几点: vscode 编辑器配置 git pre-commi
腾讯VTeam技术团队
2021/04/22
1.8K0
【实战技巧】Vue3+Vite工程常用工具的接入方法
Vue3 正式版已经发布一段时间了,和 Vue3 更配的工具 Vite 也已经投入使用了,本文整理了如何将一些常用的工具整合到项目中。
一尾流莺
2022/12/10
2.1K0
vuecli实现移动端视频类webAPP-项目搭建
在平时的前端开发中,我们更多的是完成螺丝钉的角色,即在公司的前端框架下,实现各种业务逻辑,Vue技术栈并不是难点所在,难点往往在于从 0 到 1 搭建一个完整的实践项目,以及项目开发过程中对于很多技术细节的再学习和处理,帮助读者具备开发和统筹一个完整项目的能力是此项目的目标,本项目将通过技术栈的详细讲解、多个功能模块的开发实践、并结合实际项目开发中的产品流程来完成这个任务。
前端逗逗飞
2021/04/30
8470
vuecli实现移动端视频类webAPP-项目搭建
vue-cli3构建H5移动应用(vant+rem)
最后选择是否将配置项保存为预设,然后配置完成,开始生成项目. 进入项目 、启动项目
青梅煮码
2023/01/14
1.3K0
vue-cli3构建H5移动应用(vant+rem)
初探webpack之从零搭建Vue开发环境
平时我们可以用vue-cli很方便地搭建Vue的开发环境,vue-cli确实是个好东西,让我们不需要关心webpack等一些繁杂的配置,然后直接开始写业务代码,但这会造成我们过度依赖vue-cli,忽视了webpack的重要性,当遇到一些特殊场景时候,例如Vue多入口的配置、优化项目的打包速度等等时可能会无从下手。当然现在才开始学习vue2 + webpack可能有点晚,毕竟现在都在考虑转移到vue3 + vite了哈哈。
WindRunnerMax
2021/10/20
1.2K1
做好这 16 个方向,逐步搭建出团队的 vue3 前端架构
由于 vue3.2 版本的发布,<script setup> 的实验性标志已经去掉,这说明这个语法提案已经正式开始使用,并且我个人对这个方案表示非常喜欢,其他的更新[1]请自行了解。到目前为止,我认为 vue3 已经完全可以用于生产环境。在此将我的开发体验,总结至此,分享给大家。
coder_koala
2022/01/13
3.7K0
Vue2.0 项目实战篇-学不会算我的
本篇文章学习记录于: bilibili-黑马程序♞ 104-139集 》》🎯目标:冲击前后端全栈🔥,分享一下学过程:
Java_慈祥
2024/08/15
1K0
Vue2.0 项目实战篇-学不会算我的
优雅的在vue中使用TypeScript
近几年前端对 TypeScript 的呼声越来越高,Typescript 也成为了前端必备的技能。TypeScript 是 JS 类型的超集,并支持了泛型、类型、命名空间、枚举等特性,弥补了 JS 在大型应用开发中的不足。
前端森林
2020/04/23
2.2K0
优雅的在vue中使用TypeScript
Vue3实战系列:Vue3.0 + Vant3.0 搭建种子项目
最近在用 Vue3 写一个开源的商城项目,开源后让大家也可以用现成的 Vue3 大型商城项目源码来练练手,目前处于开发阶段,过程中用到了 Vant3.0,于是就整理了这篇文章来讲一下如何使用 Vue3.0 + Vant 3.0 搭建种子项目。
程序员十三
2020/10/29
2.4K0
Vue3实战系列:Vue3.0 + Vant3.0 搭建种子项目
硅谷甄选运营平台
此次教学课程为硅谷甄选运营平台项目,包含运营平台项目模板从0到1开发,以及数据大屏幕、权限等业务。
小城故事
2024/08/24
2770
Vue3+Vite+Ts+Antd2.x项目搭建
NPM npm init @vitejs/app Yarn yarn create @vitejs/app 项目构建(Ts版) npm 6.x npm init @vitejs/app vue-admin-pro --template vue-ts npm 7+, 需要额外的双横线: npm init @vitejs/app vue-admin-pro -- --template vue-ts yarn yarn create @vitejs/app vue-admin-pro --template
前端小tips
2021/11/29
1.5K0
Vue3+Vite+Ts+Antd2.x项目搭建
[Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍
  在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习惯进行调整。因此在后面几章的学习中,我将会在整个项目基础上,按照自己的需求进行修改设定。
程序员宇说
2019/09/29
1.5K0
[Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍
都 2022 年了,手动搭建 React 开发环境很难吗?
作为一名前端工程师,总是用一些脚手架来快速搭建新项目的基本结构,因此今天尝试着一步步搭建一个 React 的项目环境,看看需要处理哪些问题,查漏补缺!
小东同学
2022/07/29
4.9K0
都 2022 年了,手动搭建 React 开发环境很难吗?
Vue3 全家桶 + Element Plus + Vite + TypeScript + Eslint 项目配置最佳实践
而且 Element Plus + Vite 也出了一段时间了,是时候该上手体验分享一波了。
Sneaker-前端公虾米
2021/06/21
2.6K1
Vue3 全家桶 + Element Plus + Vite + TypeScript + Eslint 项目配置最佳实践
快速搭建基于Vue3+Vite2+Arco+Typescript+Pinia后台管理系统模板,文末有福利
"一个人光勤奋不行,要想获得事业上的成功,必须把勤奋与思考结合起来,勤奋工作的同时,必须认真地思考问题。古语说:“人无远虑,必有近忧”、“思则明,不思则暗”。在工作中除勤奋之外,还要学会思考,要善于思考,处理事务要有谋略,工作中要有章法有套路。
用户9078190
2022/10/28
6950
快速搭建基于Vue3+Vite2+Arco+Typescript+Pinia后台管理系统模板,文末有福利
从 0 搭建 Vite 3 + Vue 3 前端工程化项目
Vue 3 正式版已经发布有一段时间了,随着 Vite 脚手架注定成为下一代前端工具链,许多用户都想基于 Vite 来构建 Vue 项目,如果想基于 Vite 构建 Vue 3 项目,社区模板完全满足您的需求,如果想构建 Vite 3 + Vue 3 + JavaScript 项目,那社区模板不太能满足您的需求,因为社区模板提供 Vue 3 项目几乎是基于 Vite 2 + TypeScript 构建,对于不熟悉 TypeScript 语言的用户不是很友好,因此接下来从 0 开始手把手带大家搭建一套规范的 Vite 3 + Vue 3 + JavaScript 前端工程化项目环境。
前端老道
2023/02/27
3.7K0
从 0 搭建 Vite 3 + Vue 3 前端工程化项目
Vue2 + tailwindcss 初始化
根据需要选择其他的功能插件,例如:Babel, Router, Vuex, CSS Pre-processors, Linter。
Cell
2023/07/11
8720
推荐阅读
相关推荐
基于 Vue3、TypeScript、Vite2、Pinia 开源的后台管理框架
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验