Vue3-Vant-Template
基于Vue3+Vant4的移动端H5模板【没有TS😋】
使用
# 一、本地调试
# 1.安装依赖
npm install
# 2.运行
npm run dev
# 二、打包上线
# 打包
npm run build
# 三、本地预览打包效果
# 预览
npm run preview说明文档
1、路由配置
在 src\pages.js中配置，使用方式与vue-router无异，具体可以参考，pages数组中的元素。
const pages = [
...,
{
path: '/:pathMatch(.*)*',
name: 'NotFound',
component: () => import('@/views/error/404.vue'),
meta: {
title: '页面没有找到🐳'
}
}
];2、settings.js
位置：
src\settings.js
参数说明如下
export default {
/**
* 网页标题
*/
title: import.meta.env.VITE_APP_TITLE,
/**
* 免登录白名单
* @description 可以根据自己的需求，配置白名单
*/
whiteList: [
'/login',
'/404',
'/home',
'/mine',
],
/**
* Token key
* @description 浏览器缓存中token的key
*/
tokenKey: 'vue3-vant-token',
/**
* 请求头token是否拼接 'Bearer '
* @type {boolean}
*/
isTokenBearer: false,
/**
* 是否开启页面标题拼接
* @type {boolean}
* @description 如果开启，则页面标题会自动拼接为：xxx | xxx
*/
isPageTitleJoining: false,
/**
* 是否开启WebHashHistory模式
* @type {boolean}
* @description 因为github pages使用history模式的话，刷新页面会有404的错误，所以使用hash模式
*/
isHashHistory: true
}效果图
|
|
|
|
|
|