一、前情提要
1. 需求
需求 : 在当前pc项目中,增加移动端页面
2. 安装
npm install vue3-mq
3. 尺寸须知
# 尺寸
xs 0
sm 576
md 768
lg 992
xl 1200
xxl 1400
二、项目配置
1. main.ts
// 移动端
import { Vue3Mq, MqResponsive } from 'vue3-mq'
const app = createApp(App)
// 引入移动端
app.use(Vue3Mq)
// 全局注册移动端组件
app.component('MqResponsive', MqResponsive)
2. 页面使用
<!-- 移动端: (尺寸0-768) -->
<MqResponsive target="xs-md">
<MobileHome />
</MqResponsive>
<!-- pc端: (尺寸768以上) -->
<MqResponsive target="md+">
<MobileHome />
</MqResponsive>