VConsole
由腾讯开发的轻量级、可扩展的前端调试面板，特别适用于移动设备上的网页调试。它提供了一个可视化的界面，可以在手机浏览器中显示 JavaScript 日志、网络请求、本地存储等信息
import VConsole from 'vconsole' new VConsole()
Day.js
一个轻量级的 JavaScript 时间日期处理库，它提供了简洁的 API 来解析、格式化、操作和显示日期和时间。
NProgress
一个轻量级的 JavaScript 库，用于在页面加载或异步操作时显示顶部进度条
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
NProgress.configure({
easing: 'ease', // 动画方式
speed: 500, // 递增进度条的速度
showSpinner: true, // 是否显示加载ico
trickleSpeed: 200, // 自动递增间隔
minimum: 0.3 // 初始化时的最小百分比
})
export default NProgressimport NProgress from 'nprogress'
// 导航开始前
router.beforeEach((to, from) => {
NProgress.start();
});
// 导航结束后
router.afterEach((to, from) => {
NProgress.done();
});echarts
//echarts 引入方式 import * as echarts from 'echarts';
postcss-pxtorem
PostCSS 插件，用于将 CSS 中的 px 单位自动转换为 rem 单位。这在移动端响应式开发中非常有用，特别是采用“Flexible 布局”或“手淘 lib-flexible 方案”时，可以方便地实现不同屏幕尺寸下的等比缩放。
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 16, // 根元素字体大小，rem相对px转换的基准值，通常为16px
propList: ['*'], // 需要转换的属性，* 表示对所有属性都进行转换，支持数组、正则等方式
unitPrecision: 5, // 允许REM单位增长到的最接近的小数点精度
selectorBlackList: [], // 排除不进行转换的类名
replace: true, // 是否直接替换（默认为true）
mediaQuery: false, // 是否转换媒体查询中的px（默认为false）
exclude: path => {
// 不进行转换的文件路径（根据返回值判断，返回值为false则此文件不进行转换）
// return !path.includes('/views/system-dashboard')
}
}
}
};export default {
created() {
this.setFontSize(document, window);
},
methods: {
setFontSize(doc, win) {
let docEl = doc.documentElement;
//检测浏览器是否支持 orientationchange 事件（主要用于移动设备屏幕旋转）
//如果支持则使用 orientationchange，否则使用 resize 事件（窗口大小变化）
let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
let reCaculate = function() {
//获取根元素的可视宽度 (clientWidth)
let clientWidth = docEl.clientWidth;
if (!clientWidth) {
return;
}
docEl.style.fontSize = 16 * (clientWidth / 1920) + 'px';
Vue.prototype.$f = clientWidth / 1920;
};
if (!doc.addEventListener) {
return;
}
//监听屏幕方向或窗口大小变化事件，触发重新计算
win.addEventListener(resizeEvt, reCaculate, false);
//监听 DOM 加载完成事件，确保在页面加载时执行一次计算
doc.addEventListener('DOMContentLoaded', reCaculate, false);
}
}
};
功能总结
这是一个典型的响应式设计解决方案，主要功能包括：
1、动态字体缩放：基于屏幕宽度动态调整根元素字体大小
2、适配不同设备：以1920px为设计基准，自动适配各种屏幕尺寸
3、实时响应：当窗口大小改变时自动重新计算字体大小
4、全局变量提供：通过 Vue.prototype.$f 提供缩放比例供其他组件使用
5、这种方案常用于需要在不同分辨率下保持视觉一致性的PC端管理系统vue3-seamless-scroll
一个用于 Vue 3 的无缝滚动组件，常用于展示新闻列表、公告、商品列表等需要自动、循环、无停顿滚动的场景。