特点

使用方法

克隆项目

git clone https://github.com/viarotel/vite-uniapp-template.git

安装项目依赖

pnpm install

运行项目

任意编辑器直接运行本项目

# h5端pnpm dev:h5# 微信小程序端pnpm dev:mp-weixin# 安卓端pnpm dev:app-android#... 更多端请参阅 package.json/script

在 HBuilder 中运行本项目

功能示例

静态资源处理

// 使用远程静态资源// import { useAssets } from './utils/assets/remote'// 使用本地静态资源import{useAssets}from'./utils/assets/local'// 全局挂载app.config.globalProperties.$assets=useAssets// template中使用//  <img :src="$assets('/temp.png')" />

全局主题色定制

<!-- 设置文本色为主题色色调为 500 --><divclass="text-primary-500"></div><!-- 设置背景色为主题色色调为 500 --><divclass="bg-primary-500"></div><!-- 设置边框色为主题色色调为 500 --><divclass="border border-primary-500"></div><!-- 更多使用方式请参阅 https://tailwindcss.com/docs -->

请求后端数据

importrequestfrom'@/utils/request/index.js'// GETrequest.get('/mock',{id:'mock-id'},{/* More option */})// POSTrequest.post('/mock',{id:'mock-id'},{/* More option */})// Uploadrequest.upload({url:'/mock',dataType:'json',headers:{'content-type':'multipart/form-data',},})// Commonrequest({method:'post',url:'/mock',data:{id:'mock-id',},headers:{'content-type':'application/json',},})// 扩展方法// 继承于 request.post，请求头默认添加 'Content-Type': 'multipart/form-data'request.form('/mock',{id:'mock-id'},{/* More option */})// 继承于 request.post，请求头默认添加 'Content-Type': 'application/x-www-form-urlencoded'request.query('/mock',{id:'mock-id'},{/* More option */})

路由间功能跳转

// 跳转页面constmethods={routerDemo(){this.$Router.push({path:'/login',query:{id:'id',},})// 获取页面参数this.$Route.query.id// 关闭当前页面跳转到某个页面this.$Router.replace('/login')// 关闭所有打开的页面跳转到某个页面this.$Router.replaceAll('/login')},}// 为路由设置别名// pages.config.js 中constaliasConfig={path:'pages/login/index',// 通过添加 aliasPath 字段aliasPath:'/login',}

使用路由守卫

importstorefrom'@/store/index.js'consthomePath='/pages/index/index'constloginPath='/pages/login/index'constwhiteList=[loginPath]exportdefault(router)=>{constuserStore=store.useUserStore()constloginRoute=to=>({path:loginPath,navType:'reLaunch',force:true,query:{redirect:{path:to.path,query:to.query,},},})router.beforeEach((to,from,next)=>{// console.log('permission.beforeEach.to', to)// console.log('permission.beforeEach.from', from)consttoken=userStore.tokenconstuserId=userStore.userIdconsole.log('token',token)console.log('userId',userId)if(token){if(to.path===loginPath){next(homePath)}elseif(userId){next()}else{userStore.getUserInfo().then(()=>{next()}).catch((error)=>{console.warn(error)userStore.logout({silenced:true})next(loginRoute(to))})}}elseif(whiteList.includes(to.path)){next()}else{next(loginRoute(to))}})router.afterEach(()=>{})}

使用基于路由的中间件

// 使用名为 realname 的中间件constpageConfig={path:'/pages/user/index',aliasPath:'/user',meta:{middleware:['realname'],},}

// 使用 defineMiddleware 定义并包装为中间件importrealnamefrom'./realname/index.js'import{defineMiddleware}from'$uni-router/middleware'exportdefault(app,router)=>{// 使用 defineMiddleware 定义了路由中间件defineMiddleware(realname,{ router, app})}

importstorefrom'@/store/index.js'import{useDialog,useToast}from'@/utils/modals'exportdefault(router)=>{constuserStore=store.useUserStore()router.beforeEach((to,from,next)=>{console.log('realname.beforeEach.to',to)console.log('realname.beforeEach.from',from)constrealStatus=userStore.userInfo.realStatusswitch(realStatus){case3:next()breakcase2:useToast('实名审核中, 请稍后再试').then(()=>{next(false)})breakcase4:useDialog(`${userStore.userInfo.auditResult||'提交的实名信息不符'}`,{title:'实名失败',showCancelButton:true,confirmText:'重新认证',}).then(()=>{next({path:'/pages/realname/index'})}).catch(()=>{next(false)})breakdefault:useDialog('请先进行实名认证',{showCancelButton:true}).then(()=>{next({path:'/pages/realname/index'})}).catch(()=>{next(false)})break}})// router.afterEach(() => {})}

主要使用的包

常见问题

无法正常安装依赖/无法启动

获得帮助

支持项目