基于vue的h5项目模板(vue3/vite) 基于vue3+Vite+Vant搭建一套通用的移动端模板;按照常见业务场景,给出常见功能使用示例: http封装(请求/响应拦截、api列表)/路由/权限/rem/国际化/自定义图标字体/模块化store/图表(vue-echarts)/模拟过滤器(3.x过滤器被删除,不再受支持)/全局混入/全局自定义指令/事件总线/上传/下载以及相关组件的封装,setup示例等等
h5项目的一个起手模板,方便迅速开发。UI框架使用Vant。
-
可从Github直接拉取代码
-
或者使用v-project-cli脚手架选择h5模板(https://www.npmjs.com/package/v-project-cli)。
npm install -g v-project-cli
安装完成后使用 vp init my-project命令 选择h5拉取代码http ok
路由 ok
权限 ok
rem ok
国际化 ok
iconfont ok
store ok
图表 (暂时使用vue-echarts) ok
filter ok(3.x过滤器被删除,不再受支持。官方建议用函数调用或计算属性替换它们,本模板内使用 混入计算属性/自定义全局fiter指令 模拟全局filter)
mixin ok
directives ok
事件总线(mitt) ok
upload half
download half
- assets
- lang: 语言文件
- http: axios请求拦截,响应拦截
- service: 接口列表
- common: 公用函数
- filter: 过滤器 (3.x已取消过滤器,本模板内使用计算属性模拟全局filter,文件夹只是为了存放全局使用的过滤器作用的计算属性使用)
- mixins: 全局混入对象
- utils: 工具函数
- columns: 存放表格固定表头
- directive: 自定义指令
- local: 国际化
package.json锁定版本
less中无法正确计算calc的问题 解决方法:在表达式前添加"" height: calc("100% - 50px");
用自定义指令模拟的v-filter过滤指令,需绑定在离过滤内容最近的DOM上
登录界面随意输入即可登录