【3】Vue3 + Nuxt3 基础介绍

什么是Nuxt

在了解 Nuxt 之前,我们先来了解一下创建一个现代应用程序,所需的技术:

  • 支持数据双向绑定 和 组件化( Nuxt 选择了Vue.js )。
  • 处理客户端的导航( Nuxt 选择了vue-router )。
  • 支持开发中热模块替换和生产环境代码打包( Nuxt支持webpack 5和Vite )。
  • 兼容旧版浏览器,支持最新的 JavaScript 语法转译( Nuxt使用esbuild )。
  • 应用程序支持开发环境服务器,也支持服务器端渲染 或 API接口开发。
  • Nuxt 使用 h3来实现部署可移植性(h3是一个极小的高性能的http框架)
  • 如:支持在 Serverless、Workers 和 Node.js 环境中运行。

Nuxt 是一个 直观的 Web 框架

  • 自 2016 年 10 月以来,Nuxt专门负责集成上述所描述的事情 ,并提供前端和后端的功能。
  • Nuxt 框架可以用来快速构建下一个 Vue.js 应用程序,如支持 CSR 、SSR、SSG 渲染模式的应用等。
  • 官网地址: nuxt.com/

Nux3的特点

  • Vue技术栈:Nuxt3 是基于 Vue3 + Vue Router + Vite 等技术栈,全程 Vue3+Vite 开发体验(Fast)。
  • 自动导包,Nuxt 会自动导入辅助函数、组合 API和 Vue API ,无需手动导入。
  • 基于规范的目录结构,Nuxt 还可以对自己的组件、 插件使用自动导入。
  • 约定式路由(目录结构即路由)Nuxt 路由基于vue-router,在 pages/ 目录中创建的每个页面,都会根据目录结构和文件名来自动生成路由
  • 渲染模式:Nuxt 支持多种渲染模式(SSR、CSR、SSG等)
  • 利于搜索引擎优化:服务器端渲染模式,不但可以提高首屏渲染速度,还利于SEO
  • 服务器引擎 : 在开发环境中,它使用 Rollup 和 Node.js 。
  • 在生产环境中,使用 Nitro 将您的应用程序和服务器构建到一个通用.output目录中。Nitro服务引擎提供了跨平台部署的支持,包括 Node、Deno、Serverless、Workers等平台上部署。

Nuxt3 环境搭建

◼ 在开始之前,请确保您已安装推荐的设置:

  • Node.js (最新 LTS 版本,或 16.11以上)
  • VS Code ✓ Volar、ESLint、Prettier

◼ 命令行工具,新建项目(hello-nuxt )

  • 方式一:npx nuxi init hello-nuxt
  • 方式二:pnpm dlx nuxi init hello-nuxt
  • 方式三:npm install --g nuxi && nuxi init hello-nuxt

◼ 运行项目: cd hello-nuxt  yarn install

  • pnpm install --shamefully-hoist(创建一个扁平的 node_modules 目录结构,类似npm 和 yarn)
  • yarn dev

Nuxt3 目录结构

文件详情

package.json Nuxt脚本介绍

应用入口(App.vue)

默认情况下,Nuxt 会将此文件视为入口点,并为应用程序的每个路由呈现其内容,常用于:

  • 定义页面布局Layout 或 自定义布局,如:NuxtLayout
  • 定义路由的占位,如:NuxtPage,编写全局样式,全局监听路由(因为之前介绍到Nuxt是约定式路由,所以并没有路由配置文件) 等等
js 复制代码
<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

<script setup>
//监听全局路由
let router = useRouter()
router.beforeEach((to, from, next) => {
  // 路由跳转前的钩子
  console.log('路由跳转前的钩子')
  next()
})
</script>

配置文件(nuxt.config.ts)

nuxt.config.ts 配置文件位于项目的根目录,可对Nuxt进行自定义配置。

比如,可以进行如下配置: runtimeConfig:运行时配置,即定义环境变量

  • 可通过.env文件中的环境变量来覆盖,优先级(.env > runtimeConfig)
  • .env的变量会打入到process.env中,符合规则的会覆盖runtimeConfig的变量
  • .env一般用于某些终端启动应用时动态指定配置,同时支持dev和pro

如:在runtimeConfig中配置变量

js 复制代码
export default defineNuxtConfig({
  devtools: { enabled: true }, //启动开发者工具
  runtimeConfig: {
    // 运行时配置
    appKey: "Jack", //server
    public: {
      baseURL: "http://codercba.com", // server and client
    },
  },
});

在app.vue中使用

js 复制代码
//1.判断代码执行环境
if (process.server) {
  console.log('运行在 server');
}
if (process.client) {
  console.log('运行在 client');
}
//1.读取运行时的配置
const runtimeConfig = useRuntimeConfig()
if (process.server) {
  console.log(runtimeConfig.appKey); //jack
  console.log(runtimeConfig.public.baseURL); //'http://codercba.com'
}
if (process.client) {
  console.log(runtimeConfig.appKey); //undefined
  console.log(runtimeConfig.public.baseURL);//'http://codercba.com'
}

如果我 此时新建一个.env文件

js 复制代码
# 环境变量 .env
NUXT_APP_KEY = 'DDDDDDD'

那么这个时候就会覆盖之前的配置文件中的appKey

appConfig: 应用配置,定义在构建时确定的公共变量,如:theme

  • 配置会和 app.config.ts 的配置合并(优先级 app.config.ts > appConfig)

可以在nuxt.config.ts 中配置应用配置

js 复制代码
//定义应用的配置
  appConfig: {
    title: "Hello Nuxt LUABU",
    theme: {
      primary: "blue",
    },
  },

在app.vue中获取使用

js 复制代码
let appConfig = useAppConfig()
//server client 
console.log(appConfig.title);
console.log(appConfig.theme.primary);

onMounted(() => {
  document.title = appConfig.title
})

当数据过多,也可以在文件目录里面新建一个app.config.ts的文件去储存。

app:app配置

  • head:给每个页面上设置head信息,也支持 useHead 配置和内置组件。

app所有的head添加的配置(SEO优化,加载外部资源)

js 复制代码
 app: {
    //app所有的head添加的配置(SEO优化,加载外部资源)
    head: {
      title: "luabu",
      charset: "UTF-8",
      viewport: "width=device-width, initial-scale=1",
      meta: [
        {
          name: "keywords",
          content: "Luabu Nuxt3",
        },
        {
          name: "description",
          content: "学习网站",
        },
      ],
      link: [
        {
          rel: "shortcut icon",
          href: "favicon.ico",
          type: "image/x-icon",
        },
      ],
      style: [
        {
          children: `body{ color: red}`,
        },
      ],
      script: [
        {
          src: "http://baidu.com",
        },
      ],
    },

也可以动态添加

js 复制代码
组件
<Head>
  <Meta name="Key" content="key key"></Meta>
 </Head>
动态添加app所有的页面添加head的内容
useHead({
  title: 'app useHead'
})

ssr:指定应用渲染模式

router:配置路由相关的信息,比如在客户端渲染可以配置hash路由

alias:路径的别名,默认已配好

modules:配置Nuxt扩展的模块,比如:@pinia/nuxt @nuxt/image

routeRules:定义路由规则,可更改路由的渲染模式或分配基于路由缓存策略(公测阶段)

builder:可指定用 vite 还是 webpack来构建应用,默认是vite。如切换为 webpack 还需要安装额外的依赖。

runtimeConifg vs app.config

runtimeConfig 和 app.config都用于向应用程序公开变量。要确定是否应该使用其中一种,以下是一些指导原则:

  • runtimeConfig:定义环境变量,比如:运行时需要指定的私有或公共token。
  • app.config:定义公共变量,比如:在构建时确定的公共token、网站配置。

Nuxt3 内置组件

◼ Nuxt3 框架也提供一些内置的组件,常用的如下:

  • SEO组件: Html、Body、Head、Title、Meta、Style、Link、NoScript、Base
  • NuxtWelcome :欢迎页面组件,该组件是 @nuxt/ui的一部分  NuxtLayout:是 Nuxt 自带的页面布局组件 NuxtPage:是 Nuxt 自带的页面占位组件
    • ✓ 需要显示位于目录中的顶级或嵌套页面 pages/
    • ✓ 是对 router-view 的封装
  • ClientOnly :该组件中的默认插槽的内容只在客户端渲染
    • ✓ 而fallback插槽的内容只在服务器端渲染
  • NuxtLink :是 Nuxt 自带的页面导航组件
    • ✓ 是 Vue Router组件 和 HTML < a > 标签的封装
相关推荐
herogus丶1 分钟前
【Chrome】‘Good助手‘ 扩展程序使用介绍
前端·chrome
独立开阀者_FwtCoder4 分钟前
面试官:为什么在 Vue3 中 ref 变量要用 .value?
前端·javascript·vue.js
NetX行者7 分钟前
基于Vue 3的AI前端框架汇总及工具对比表
前端·vue.js·人工智能·前端框架·开源
独立开阀者_FwtCoder7 分钟前
手握两大前端框架,Vercel 再出手拿下 Nuxt.js,对前端有什么影响?
前端·javascript·vue.js
独立开阀者_FwtCoder8 分钟前
弃用 html2canvas!快 93 倍的截图神器!
前端·javascript·vue.js
weixin_3993806922 分钟前
TongWeb8.0.9.0.3部署后端应用,前端访问后端报405(by sy+lqw)
前端
伍哥的传说43 分钟前
H3初识——入门介绍之常用中间件
前端·javascript·react.js·中间件·前端框架·node.js·ecmascript
洛小豆1 小时前
深入理解Pinia:Options API vs Composition API两种Store定义方式完全指南
前端·javascript·vue.js
洛小豆1 小时前
JavaScript 对象属性访问的那些坑:她问我为什么用 result.id 而不是 result['id']?我说我不知道...
前端·javascript·vue.js