Vue3 + VantUI demo

在线预览地址

https://libwiki.github.io/interview-demo-page/

主要依赖

• Vue3文档
• Vant组件库文档
• VueRouter4路由文档
• Tailwindcss原子css库文档
• Pinia状态管理器参考文档

开发启动

# 依赖安装
npm install

# 复制一份开发环境的env配置
copy .env.development.back .env.development

# 开发环境启动
npm run dev

# 打包编译
npm run build

推荐启动的IDE与插件

• VS Code + Volar

路由meta页面配置说明

页面路由的meta参数配置均在App.vue中使用到，如果需要自定义可自行编辑逻辑

const meta = {
    title: "首页", // 标题栏
    tabbar: true, // 是否显示底部导航
    refresh: true, // 是否开启下拉刷新（开启后还需要页面进行刷新函数处理监听）
    navbar: true, // 是否显示顶部导航
    showBack: true, // 顶部导航栏是否显示返回按钮
    noToken: true, // 无需登录验证的界面
    pageStyle: {}, // 页面默认样式
    pageBgColor, // 页面背景色（会覆盖pageStyle的backgroundColor）
}

如何开启页面的下拉刷新功能

• 1、设置路由meta的refresh选择为true
• 2、在页面中监听处理下拉刷新事件
  • 注1：其中 window.emitter对象有mitt库提供。具体注册位置在main.js文件中
  • 注2：EventsEnum.onRefresh下拉刷新事件在App.vue中触发

import {EventsEnum} from "@/events/EventsEnum";
import {useRefreshStore} from "@/store/refreshStore";
import {onMounted, onUnmounted} from "vue";

const refreshStore = useRefreshStore()
onMounted(() => { // 页面渲染时进行事件监听
    window.emitter.on(EventsEnum.onRefresh, () => {
        console.log('下拉刷新触发')
        refreshStore.loading = false; // 关闭下拉刷新动画
    }); // 监听处理页面的下拉刷新事件
})

onUnmounted(() => { // 离开页面时移除事件监听
    window.emitter.off(EventsEnum.onRefresh)
})

基础配置文件与导航菜单配置

• 1、src/config/Config.js为项目全局基础配置，项目中将直接引用该文件。配置的上游数据来源于项目根目录下的.env.*

axios网络请求库的两次封装

• 1、src/utils/net.js文件主要为axios的实例创建以及前置、后置处理
• 2、src/api/Http.js文件为axios实例的易用性封装（实际进行网络请求会直接使用该模块）
• 3、网络库的具体使用案例请参考：```src/api/modules/User.js````

rem适配说明

• rem布局适配是什么？
• 项目使用rem进行移动端的布局大小适配，项目中书写的css中px单位的值将自动转换为rem，（具体的转换配置参考：postcss.config.js）
• px => rem的转换倍数 参考：src/utils/flexible.js
• 其中不同的设计稿宽度和项目最大视口均可在design.config.js中进行配置
  • designWidth 设计稿宽度
  • maxViewPort 最大视口宽度（当使用pc端访问项目页面时，每一个页面的最大宽度，保证在pc的视觉问题）
  • pxToRem js中进行像素转换为rem时应用（注：为保证项目模块的统一，该函数会引用至src/utils/helpers.js px2rem()，故在项目中需要动态的进行像素转换rem是请使用此处的助手函数）
  • twRem2Rem 项目中使用了tailwindcss由于设计稿宽度可能不同，会导致tailwindcss默认提供的rem值与项目中的值不一致，故提供了该助手函数进行将tailwindcss中的rem转换为项目对应的设计稿的rem，具体用法参考tailwind.config.js(注：项目中需要使用到同px2rem())

关于Tailwindcss原子css库的配置说明

• 项目中的配置请查看：tailwind.config.js文件
• 项目中使用的spacing与tailwindcss的官方有所区别，使用了0~96px => rem的数值。（需要改动可自行配置即可）
• 注：项目中页面如果发现Tailwindcss无效问题，只需要在style区块中提供任意的css即可，例：.t{}

关于全局less的使用

• 项目在使用Tailwindcss的同时依然支持less,vite.config.js css.preprocessorOptions中自动引入了src/styles/index.less文件
• 故如果需要设置任何全局样式，或者使用less 变量，在上述文件中设置 即可。页面中可直接使用