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

置顶

AsnLee

于 2020-05-09 17:16:05 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Nuxt JS Vue 文章标签： javascript vue.js node.js

本文链接：https://blog.csdn.net/qq_41597258/article/details/106002387

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>