Nuxt3 + Naive UI 的SSG项目分享(一)

这篇具有很好参考价值的文章主要介绍了Nuxt3 + Naive UI 的SSG项目分享(一)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

搭建Nuxt3项目分享

Nuxt3

自从Vue3发布后,学习Vue3就形成了一个趋势和热潮。
Vue3相比Vue2,引入tree-shaking,使得打包的整体体积变小了;在兼顾vue2的options API的同时还推出了composition API,大大增加了代码的逻辑组织和代码复用能力;采用proxy替换了之前的defineProperty,proxy有多达13种拦截方法;增加了TypeScript支持来对项目的规范做更进一步的约束等等。
Nuxt3 就是基于 Vue3 来做的一款混合式 Vue框架。
我们可以用Nuxt3来开发服务端渲染的项目,也就是常说的ssr;

SPA

SPA(单页面应用),只有一个HTML页面,通过路由实现页面内的局部切换,公共资源部分只加载一次。而Vue框架所开发的项目就属于SPA项目。
平常写的普通页面就是MPA(多页面应用),通过a标签实现页面切换,每次切换页面都要重新加载公共资源部分。

优点

1.无刷新界面,内容的改变不需要重新加载整个页面,良好的交互体验;
2.基于spa这一点,减轻服务器压力,吞吐能力会提高几倍;
3.前后端工作分离模式;

缺点

1.首屏加载慢,业务随着代码量增加而增加,不利于首屏优化;
2.各个浏览器的版本兼容性不一样;
3.不利于seo,即搜索引擎抓取内容非常少;
4.页面复杂度提高;

SPA(单页面应用) 既有它的优点也有它的缺点,我们只能根据我们开发项目的业务的实际需求来进行酌情取舍。
对于SPA(单页面应用) 的首屏加载慢,我们可以采取的一些常见措施:
1.减少入口文件体积
2.静态资源本地缓存以及一些资源的压缩处理
3.UI组件按需加载
4.避免重复加载组件
5.开启gzip压缩
6.使用SSR
SSR也就是我们所说的服务端渲染,组件或页面通过服务器生成html字符串,再发送到浏览器。关于Vue项目的SSR,Vue3官网有给出一些解决方案:更通用的解决方案
而这里分享,我们则采用Nuxt3框架,它是一个构建于 Vue 生态系统之上的全栈框架,为编写 Vue SSR 应用提供开发,同时还可以把它当作一个静态站点生成器来用。

CSR 与 SSR

渲染分为客户端渲染(CSR)和服务端渲染(SSR)。

CSR

CSR(client side render) 服务端只提供json格式的数据,渲染成什么样子由客户端通过JavaScript控制,而SPA的Vue项目则就是这种CSR(client side render) 客户端渲染。

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<link rel="icon" href="/favicon.ico" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>后台管理系统</title>
	</head>
	<body>
		<noscript>
			<strong>很抱歉,在没有启用JavaScript的情况下,默认不能正常工作</strong>
		</noscript>
		<div id="app"></div>
		<script type="module" src="/src/main.ts"></script>
	</body>
</html>

从以上代码,我们可以看到在index.html的这个文件里面,body里面只有一个div

<div id="app"></div>

和一个script的引入

<script type="module" src="/src/main.ts"></script>

在main.ts中,我们可以看到Vue3是将项目的App.vue页面组件挂载到 id 为 app 的dom节点上的。

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router);
router.isReady().then(() => app.mount('#app'));

Vue通过createApp创建了Vue实例对象,并通过mount进行挂载。
CSR(client side render) 客户端渲染通过加载解析index.html,对遇到引入的script加载运行,进行页面的信息和数据的渲染。

SSR

SSR(server side render) 服务端渲染,就是组件或页面通过服务端装填内容数据生成html,客户端进行接收和解析。
SSR vs. SSG
静态站点生成 (Static-Site Generation,缩写为 SSG),也被称为预渲染,是另一种流行的构建快速网站的技术。如果用服务端渲染一个页面所需的数据对每个用户来说都是相同的,那么我们可以只渲染一次,提前在构建过程中完成,而不是每次请求进来都重新渲染页面。预渲染的页面生成后作为静态 HTML 文件被服务器托管。
SSG 保留了和 SSR 应用相同的性能表现:它带来了优秀的首屏加载性能。同时,它比 SSR 应用的花销更小,也更容易部署,因为它输出的是静态 HTML 和资源文件。这里的关键词是静态:SSG 仅可以用于消费静态数据的页面,即数据在构建期间就是已知的,并且在多次部署期间不会改变。每当数据变化时,都需要重新部署。
SSG 也非常适合构建基于内容的网站,比如文档站点或者博客。

Nuxt3安装

通过终端执行安装命令创建Nuxt3项目

npx nuxi init 项目名

安装依赖

npm i

以开发模式启动项目

npm run dev

启动成功后,我们可以通过3000的端口打开项目访问。

Naive-UI

Naive UI 是一个 Vue3 的组件库,用 TypeScript 编写,主题可调。
安装

npm i -D naive-ui

我们可以在 SFC 中按需导入使用

<template>
  <n-button>按钮</n-button>
</template>

<script>
  import { defineComponent } from 'vue'
  import { NButton } from 'naive-ui'

  export default defineComponent({
    components: {
      NButton
    }
  })
</script>

关于naive-ui在Nuxt3的应用,naive-ui官网可以参考服务端渲染
Nuxt3使用naive-ui的步骤:
1.我们需要确保naive-ui的版本 >= 2.29.0
2.需要安装 naive-ui 和 @css-render/vue3-ssr
3.在Nuxt3项目自动生成的 nuxt.config.ts 文件增添下列配置:

import { defineNuxtConfig } from 'nuxt'
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  build: {
    transpile:
      process.env.NODE_ENV === 'production'
        ? [
            'naive-ui',
            'vueuc',
            '@css-render/vue3-ssr',
            '@juggle/resize-observer'
          ]
        : ['@juggle/resize-observer']
  },
  vite: {
    optimizeDeps: {
      include:
        process.env.NODE_ENV === 'development'
          ? ['naive-ui', 'vueuc', 'date-fns-tz/esm/formatInTimeZone']
          : []
    }
  }
})

4.Nuxt3项目的plugins的文件夹中增加 naive-ui.ts 文件:

import { setup } from '@css-render/vue3-ssr'
import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin((nuxtApp) => {
  if (process.server) {
    const { collect } = setup(nuxtApp.vueApp)
    const originalRenderMeta = nuxtApp.ssrContext?.renderMeta
    nuxtApp.ssrContext = nuxtApp.ssrContext || {}
    nuxtApp.ssrContext.renderMeta = () => {
      if (!originalRenderMeta) {
        return {
          headTags: collect()
        }
      }
      const originalMeta = originalRenderMeta()
      if ('then' in originalMeta) {
        return originalMeta.then((resolvedOriginalMeta) => {
          return {
            ...resolvedOriginalMeta,
            headTags: resolvedOriginalMeta['headTags'] + collect()
          }
        })
      } else {
        return {
          ...originalMeta,
          headTags: originalMeta['headTags'] + collect()
        }
      }
    }
  }
})

5.在Nuxt3项目中的app.vue中配置naive-ui,调整主题:

<template>
  <NConfigProvider
    :locale="zhCN"
    :date-locale="dateZhCN"
    :theme-overrides="themeOverrides"
    inline-theme-disabled
  >
    <nuxtLayout>
      <NuxtPage />
    </nuxtLayout>
  </NConfigProvider>
</template>
<script setup>
import { zhCN, dateZhCN, NConfigProvider } from "naive-ui";
/**
 * js 文件下使用这个做类型提示
 * @type import('naive-ui').GlobalThemeOverrides
 */
const themeOverrides = {
  common: {
    primaryColor: "#FC8952",
    primaryColorHover: "#FC8952",
    primaryColorPressed: "#FC8952",
    primaryColorSuppl: "#FC8952",
  },
  Button: {
    textColor: "#FC8952",
    border: "1px solid #FF763B",
    textColor: "#FF763B",
  }
};
</script>

6.脱离上下文的 API的应用:
在Nuxt3项目中,我们会碰到需要在一些在setup外调用 dialog、message、notification、loadingBard 的情况;naive-ui为我们提供了 createDiscreteApi 来构建对应的 API;需要调用的API则在参数的数组中注册;
示例:

import {
  createDiscreteApi
} from "naive-ui"
const { message } = createDiscreteApi(["message"])
message.error(msg || '服务端错误')

在Nuxt3项目的页面中,在使用setup语法糖时,我们使用naive-ui的组件不需要进行注册,它会自行注册以及导出:文章来源地址https://www.toymoban.com/news/detail-408357.html

<template>
  <div class="pt-[14rem]">
    <n-result status="500" title="500 服务器错误" :description="error.message">
      <template #footer>
        <n-button @click="handleError">回到首页</n-button>
      </template>
    </n-result>
  </div>
</template>
<script setup>
import { NButton, NResult } from "naive-ui";
const props = defineProps({
  error: Object,
});
const handleError = () => clearError({ redirect: "/" });
</script>

到了这里,关于Nuxt3 + Naive UI 的SSG项目分享(一)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • nuxt3项目使用pdfjs-dist预览pdf

    使用的包的源代码是 pdfjs - npm 但是我们实际上项目中使用的是pdfjs打包后的dist文件,也就是pdfjs-dist - npm 所以我们需要使用这个命令 我们可以克隆pdfjs这个包来看源代码,里面有使用的例子,也可以根据源代码自己打包生成你想要的版本的pdfjs-dist,官方文档强调了对于新旧

    2024年02月09日
    浏览(31)
  • Nuxt3项目中的问题汇总-刷新页面useFetch无返回

    坑有千千万,汇总下目前的解决办法,也因为对框架的不够深入,掌握得有限,大家有更好的,请指教【抱拳】 浏览器刷新的时候页面没有显示数据,接口data无返回。本身nuxt的useFetch在参数不变的情况下,数据是不会重新从后台接口去请求数据的,会直接拿上一次的结果。

    2024年02月11日
    浏览(39)
  • nuxt3项目在宝塔上使用pm2放到服务器

    最近在将nuxt3项目扔到服务器上的时候遇到了一些问题,发现打包后的nuxt项目与正常的vue文件有些差别,缺失了index.html文件。 这边就记录下nuxt3项目是怎么放到服务器上的🤔 一、打包nuxt3项目 执行对应的打包命令    yarn build    二、找到打包后的文件     三、这里我使用

    2024年02月21日
    浏览(42)
  • nuxt3 + pinia + swiper +element-plus + less + 腾讯地图 创建项目及使用

    在 nuxt3-app 目录下下载依赖 运行 再访问 http://localhost:3000 即可看到基础界面了 (刚搭建的项目啥文件夹都没有,这里面基本都是我自己创建的。) assets ,存放一些静态资源,包括一些 Sass、Less ,在项目组件中引用的时候需要在开头使用 ~assets/ 符号,如果你的静态资源文件

    2023年04月09日
    浏览(41)
  • Nuxt3 全栈 项目服务器部署 全网最全最细保姆级教程 解决各种小坑 时光小灶

    服务器:Nginx 面板:宝塔面板 个人博客:https://timebk.cn/ 原文地址:原文 第一步肯定是打包咯,前提是项目已开发好了以及没有啥Bug了哈 打包好后,你会在项目根目录下发现多了个 .output 文件夹 打开这个文件夹,将里面的所有文件压缩成压缩包 压缩包格式推荐 .rar ,其它格

    2024年02月12日
    浏览(41)
  • NUXT3项目安装依赖运行后报错 require() of ES Module xxxxx not supported.

    部署nuxt3项目(VUE3),使用cnpm i 和yarn install安装完依赖,报错如下: Cannot start nuxt: require() of ES Module /www/wwwroot/xxx/node_modules/escape-string-regexp/index.js from /www/wwwroot/xxx/node_modules/@babel/highlight/node_modules/chalk/index.js not supported. 误打误撞补上这句就好了: yarn add babel-node babel-node 版本

    2024年02月13日
    浏览(36)
  • 【Nuxt3】modules目录和nuxt3模块的简单介绍

    记录下nuxt3项目中module的用法 使用 modules/ 目录在应用程序中自动注册本地模块。 这是一个很好的地方,可以放置您在构建应用程序时开发的任何本地nuxt模块。 nuxt模块相当于npm包,可以发布到npm社区中 在modules/ 目录下的本地模块,会自动注册模块,无需在 nuxt.config.ts文件中

    2024年04月27日
    浏览(37)
  • 【Nuxt3】nuxt3目录文件详情描述:.nuxt、.output、assets、public、utils(一)

    nuxt3的中文网站 上次简单介绍了nuxt3创建项目的方法和目录文件大概用处。 这次详细说下.nuxt、.output、assets、public、utils五个文件夹的用处。 Nuxt在开发中使用.nuxt/目录来生成你的Vue应用程序。 为了避免将开发构建的输出推送到你的代码仓库中,你应该将这个目录添加到你的

    2024年01月18日
    浏览(84)
  • 【Nuxt】在 Nuxt3 中使用 Element Plus

    在 nuxt.config.ts 中配置 类似写 vue3 项目,可以导入组件,也可以直接使用组件 在 Nuxt 3 中集成 Element Plus 的步骤 20分钟带你入门Nuxt3

    2024年02月05日
    浏览(38)
  • Nuxt3环境变量配置

    Nuxt3 正式发布还不到半年,在投入生产环境使用后,遇到了不少问题,很难找到合适的解决方案,其中环境变量配置就是其中一个,之前一直未能解决,最近要上持续集成,无法绕过这个问题,所以花了点时间研究了一下,最终找到了解决方案,记录一下。 面对一个新框架,

    2024年02月01日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包