@nuxtjs/device 探究

[dailynodejs]

https://github.com/nuxt-community/device-module

[ddd-000]

作用：将设备类型（包括浏览器的检测）的标志注入上下文和组件实例，用来做设备检测。
浏览器检测目前暂不支持：

• 嵌入式浏览器检测
• 获取浏览器版本
  

安装：

yarn add --dev @nuxtjs/device
//Using npm
npm install -D @nuxtjs/device

//nuxt.config.js
{
  buildModules: [
   '@nuxtjs/device',
  ]
}

设备检测：

$device.isDesktop
$device.isMobile
$device.isTablet
$device.isMobileOrTablet
$device.isDesktopOrTablet
$device.isIos
$device.isWindows
$device.isMacOS
$device.isAndroid
$device.isFirefox
$device.isEdge
$device.isChrome
$device.isSafari
$device.isSamsung
$device.isCrawler

通过检测浏览器，可以使用此模块进行图像格式设置。
除了桌面版safari和旧版ie，几乎所有浏览器都支持webp格式
使用：

<template>
  <section>
    <div v-if="$device.isDesktop">
      Desktop
    </div>
    <div v-else-if="$device.isTablet">
      Tablet
    </div>
    <div v-else>
      Mobile
    </div>
  </section>
</template>

{
  buildModules: ['@nuxtjs/device'],
  device: {
      //defaultUserAgent选项可以在运行时使用npm run generate。
    defaultUserAgent: 'Mozilla/5.0 (Linux; Android 5.1.1; Nexus 6 Build/LYZ28E) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.39 Mobile Safari/537.36'
    refreshOnResize : true //调整窗口大小时刷新标志
  }
}

[ddd-000]

动态更改布局：

export default {
  layout: (ctx) => ctx.$device.isMobile ? 'mobile' : 'default'
}

添加自定义标志：

// plugins/custom-flag.js
export default function ({ $device }) {
  $device.isCustom = $device.userAgent.includes('Custom-Agent') ? true : false
}

[ddd-000]

注册插件：this.addPlugin方法
属性：src、options、fileName、mode

• 提供插件：

• 模板插件：

• device-module：

this.addPlugin({
    src: path.resolve(__dirname, 'plugin.js'),
    fileName: 'device.plugin.js',
    options
  })

const { mobile, mobileOrTablet, ios, android, windows, macOS, isSafari, isFirefox, isEdge, isChrome, isSamsung, isCrawler } = extractDevices(ctx, userAgent)
    return {
      <% if (options.test) { %>
      extractDevices,
      <% } %>
      userAgent,
      isMobile: mobile,
      isMobileOrTablet: mobileOrTablet,
      isTablet: !mobile && mobileOrTablet,
      isDesktop: !mobileOrTablet,
      isIos: ios,
      isAndroid: android,
      isWindows: windows,
      isMacOS: macOS,
      isDesktopOrTablet: !mobile,
      isSafari,
      isFirefox,
      isEdge,
      isChrome,
      isSamsung,
      isCrawler
    }

//变为：

const { mobile, mobileOrTablet, ios, android, windows, macOS, isSafari, isFirefox, isEdge, isChrome, isSamsung, isCrawler } = extractDevices(ctx, userAgent)
    return {
      userAgent,
      isMobile: mobile,
      isMobileOrTablet: mobileOrTablet,
      isTablet: !mobile && mobileOrTablet,
      isDesktop: !mobileOrTablet,
      isIos: ios,
      isAndroid: android,
      isWindows: windows,
      isMacOS: macOS,
      isDesktopOrTablet: !mobile,
      isSafari,
      isFirefox,
      isEdge,
      isChrome,
      isSamsung,
      isCrawler
    }

[ddd-000]

defu包：递归分配默认属性
https://github.com/unjs/defu