Vue プロジェクトには PC ページとモバイルページの両方が含まれます

プロジェクトの要件:

ルート（リンク）は同じですが、モバイル端末とPC端末で開くインターフェースは全く異なりますので、
画像.png クエリリンクはPC端末で開いたり、他人に送信したり、モバイルで直接開いたりすることができます。電話の場合は、検索ページをモバイル端末と PC に適合させる必要があります。また、モバイル端末とPC端末のページデザインが違いすぎるため、レスポンシブ対応ができないため、モバイル端末とPC端末のページに対応するページを2つずつ記述する必要があります(両方のページが同じ vue プロジェクト)
一般的な効果:
PC 端末:
画像.png
モバイル端末:

解決：

検索ページに飛んだ後、v-ifでモバイルコンポーネントを表示するかPCコンポーネントを表示するかを決定し、
画像.png
mountで呼び出してデバイスのメソッドを決定することで、どちらのコンポーネントが表示されているかが分かります。

携帯端末の判定方法は以下のとおりです。

// 判断是否是移动端
export function isMobile() {
    
    
  const flag = navigator.userAgent.match(
    /(phone|pad|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows phone)/i
  )
  return flag
}

ヒント: これはコンポーネントの形式で処理されます。実はルーティングでも対応可能で、モバイル端末もPC端末も/pcや/mobileのようにルートとして記述し、/検索ページでデバイスを判定します。、マウントされている場合は携帯電話のページに飛びますが、そうでない場合はPC側です。このように、ルーティングを使用して目的を達成することもできます。

他の：

モバイル端末では数ページしかありませんが、vant を使用して適応させる必要があります。

1.バントの使用:

a.バントを設置する

npm i vant

b. vant を使用すると、使用されるコンポーネントが比較的少ないため、すべてをインポートする必要がないため、従来の使用方法で直接実行されます。
画像.png

import {
    
     createApp } from 'vue';
// 1. 引入你需要的组件
import {
    
     Button } from 'vant';
// 2. 引入组件样式
import 'vant/lib/index.css';

const app = createApp();

// 3. 注册你需要的组件
app.use(Button);

2.モバイル端末への適応

PC 側のプロジェクトはすでにレスポンシブ対応を行っているため、さらに適応する必要はありませんが、モバイル端末はまだ適応する必要があります。そうしないと、UI の 750 ピクセルのデザインドラフトと一致せず、大きな問題が発生します。質問。そこで、vant の vw プランを選択しました。
a. インストールの依存関係:

npm install postcss-px-to-viewport -D

b. vite.config.ts で設定します。

import postcsspxtoviewport from 'postcss-px-to-viewport'
 css: {
    
    
      postcss: {
    
    
        plugins: [
          postcsspxtoviewport({
    
    
            unitToConvert: 'px', // 要转化的单位
            viewportWidth: 750, // UI设计稿的宽度
            unitPrecision: 6, // 转换后的精度，即小数点位数
            propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
            viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
            fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
            selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名，
            minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
            mediaQuery: false, // 是否在媒体查询的css代码中也进行转换，默认false
            replace: true, // 是否转换后直接更换属性值
            // exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
            // exclude: [],
            include: [/form-info-card/,/mobile-page/, /shareMb/, /editMb/], //如果设置了include，那将只有匹配到的文件才会被转换
            landscape: false // 是否处理横屏情况
          })
    },

この vw ソリューションを使用する場合、他にも多くの問題 (モバイルページに適応するだけでインクルードが有効にならない、vant に適応する方法など) があり、次の記事がその際に読むこともできます。。
発生するその他の問題は、この記事のように処理されます: https://blog.csdn.net/weixin_43239880/article/details/132405008?spm=1001.2014.3001.5501