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

最新推荐文章于 2025-01-08 12:10:46 发布

原创

最新推荐文章于 2025-01-08 12:10:46 发布 · 置顶 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #node.js

本文介绍了Nuxt.js项目的最佳实践，包括全局Loading的实现，自定义分享功能（针对H5），环境变量配置，打包优化与性能分析，以及公用样式的设定。通过组件化和配置优化，提升用户体验和项目性能。

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

目录结构

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

全局 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>