【Vue】Nuxt最佳实践之常用库封装(三)

完结篇，嘻嘻😁，相关专栏文章戳这里拿走 Asn.Li => Nuxt，全文 4744 字，阅读约需要 6 分钟～

目录结构

1. 全局 Loading
2. 自定义分享 (H5)
3. 环境变量
4. 打包优化、性能分析
5. 公用样式
6. 结语

全局 Loading

落地页(首屏渲染)加载提示，利用 client-only 组件 placeholder 属性，⚠️Nuxt2.0 以下采用 no-ssr 组件，同时也可规避页面加载瞬间的样式错位(未及时加载 css 文件)，官方示例 ⬇️

<template>
  <div>
    <sidebar />
    <client-only placeholder="Loading...">
      <!-- this component will only be rendered on client-side -->
      <comments />
    </client-only>
  </div>
</template>

在实际运用中，可以抽象为一个 Container 组件，并提供一个 page 参数为我们工作

<template>
  <div class="container mx-auto">
    <client-only v-if="page">
      <slot />
      <nui-loading slot="placeholder" /> // 自定义加载动画...
    </client-only>
    <slot v-else />
  </div>
</template>

针对页面XHR请求，适用于页面 debug，配合 vconsole 能满足常见的问题定位与调试工作, N