Nuxt 开发指南

• 下载与资源
• 安装
• 错误排除
• 全局错误处理
• 渲染模式
• naive UI
• 消息显示
• Unocss安装
• Unocss基本语法
• icones图标
• 全局变量配置
• 页面关键词配置
• 全局CSS
• 全局js
• 外部js和css的引入
• 全局函数utils
• composables
• 中间件
• 插件
• layouts布局
• Grid栅格系统
• 页面和路由
• 动态路由
• 获取当前路径
• useRouter
• navigateTo
• 生命周期函数
• Vue的钩子函数
• 翻页时默认回到顶部
• 组件
• 嵌套组件
• 子组件接受父组件参数
• 子组件向父组件传递参数或方法
• 获取数据
• 更改查询结果的名称
• $fetch
• fetch
• useLazyFetch
• 只客户端渲染
• 状态管理
• Pinia
• useCookie
• Layers
• Server
• 服务端工具函数
• 打包
• 启动端口
• 数据推流
• 加密
• jwt验证
• 获取用户IP地址
• 图形验证码
• 本地存值localStorage
• 删除div
• 模板字符串语法
• 实时渲染div
• 上传图片至IPFS
• 显示图片
• 图片自适应宽度或高度
• mavon-editor
• nuxt-tiptap-editor
• turndown
• Marked
• 实时监听和渲染
• 实时多选数据进输入框

下载与资源

官网 | 中文文档 | 中文文档2 | nuxt-modules | naive ui | Unocss | windicss | windicss github | Nuxt 3.0 全栈开发视频 |

安装

"nuxt": ^4.0.3 nodejs: v22.17.1

1. 直接到github下载模板， https://github.com/nuxt/starter/tree/v4

 - 也可以用npm安装
 npm create nuxt 
 eg:npm create nuxt nuxtstart

 - 更改配置： package.json ->  name

2. npm install --global yarn   //yarn --version  1.22.22
  yarn config set registry https://registry.npmmirror.com  切换到淘宝源
  yarn install

3. yarn dev
http://localhost:3000/ 

//vs code插件
Vetur   Vue 3 Snippets
Naive Ui Snippets   //代码提示
UnoCSS              //代码提示

错误排除

• 更改配置（nuxt.config.ts）一般要重启。
• 编译时出错：Named export 'VResizeObserver' not found， nuxt.config.ts 文件中添加如下代码： build: { transpile: ['naive-ui', "vueuc"] },
• MongoServerError:E11000 duplicate key error.... 这可能是数据表中的数据格式冲突导致的（有脏数据），删除整个表即可！
• Naive UI中表格要有 block 属性，否则样式将变得怪异！
• Error: [nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function.
• useFetch的错误， let {data, error} = await useFetch(url) ???? // data.value == null 都会报错，如下： // Uncaught (in promise) TypeError: Cannot read properties of null (reading 'scope')
• Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client ???
• devtools: { enabled: false }
• server-api 在Nginx的https报务中无法开启，总有个错误 500 Server Error！

全局错误处理

Nuxt是一个全栈框架，这意味着在不同的上下文中，有几种不可避免的用户运行时错误来源: 1. Vue渲染生命周期中的错误(SSR + SPA) 2. API或Nitro服务器生命周期中的错误 3. 服务器和客户端启动错误(SSR + SPA)

//全局错误页面  error.vue

渲染模式

浏览器和服务器都可以解释JavaScript代码，将Vue.js组件渲染成HTML元素。这个步骤被称为渲染。Nuxt支持客户端和通用呈现。 客户端渲染 - CSR， 例如 Vue.js、React 通用渲染 - SSR, 例如 Nuxt、Next.js 静态站点生成 - SSG； 混合渲染 - 混合呈现允许每个路由使用路由规则不同的缓存规则，并决定服务器应该如何响应给定URL上的新请求。例如 Nuxt、Next.js 边缘渲染 - edge-side rendering。

naive UI

官网 ｜ 安装指南 ｜ 安装指南2 ｜ naive-ui-nuxt ｜

yarn add naive-ui   //^2.42.0  

1. nuxt.config.ts
build: { transpile: ['naive-ui', "vueuc"] },

2. app -> plugins -> naiveui.ts
import { setup } from '@css-render/vue3-ssr';

export default defineNuxtPlugin((nuxtApp) => {
    if (process.server && nuxtApp.ssrContext) {
        const { collect } = setup(nuxtApp.vueApp || {});

        // @ts-ignore
        const originalRender = nuxtApp.ssrContext.renderMeta?.bind(nuxtApp.ssrContext) || (() => ({}));

        nuxtApp.ssrContext.renderMeta = () => {
            // @ts-ignore
            const result = originalRender();
            // @ts-ignore
            const headTags = result?.headTags || "";

            return {
                headTags: headTags + collect()
            };
        };
    }
});

3. 按需引入

消息显示

脱离上下文的API 使用 createDiscreteApi 来创建一系列消息提示，它比较自由，推荐。

import { createDiscreteApi } from "naive-ui"
// import { useMessage } from "naive-ui" useMessage要有专门设置，暂时不用

let { message } = createDiscreteApi(["message"])
message.error("注册失败！\n"+error.value.data, { duration: 5e3 })
// message.error("注册失败！\n"+error.value.data)
message.success("注册成功", { duration: 5e3 })
// message.success("注册成功")
message.warning("How many roads must a man walk down")
message.loading("If I were you, I will realize that I love you more than any other guy")
message.info(
  "I don't know why nobody told you how to unfold your love",
  {
    keepAliveOnHover: true
  }
)

// 注意： 如果已经导入 message 而没有使用可能会导致错误！尤其是下拉菜单！

Unocss安装

这是一个按需原子化 CSS 引擎，比起直接使用 TailwindCSS 更轻更快！ 它的预设样式可以直接使用 TailwindCSS 和 Windicss 的样式。

// yarn add @unocss/nuxt   //^0.57.4 "^0.58.8"
yarn add unocss @unocss/nuxt //^66.3.3

//配置模块，nuxt.config.ts：
  modules: [
    '@unocss/nuxt',
  ],

// 根目录创建 uno.config.ts
import {
  defineConfig, presetAttributify, presetIcons,
  presetTypography, presetUno, presetWebFonts,
  transformerDirectives, transformerVariantGroup
} from 'unocss'

export default defineConfig({
  rules: [
      //...
  ],
  shortcuts: [
    // ...
  ],
  theme: {
    colors: {
      // ...
    }
  },
  presets: [
    presetUno(),  //工具类预设
    presetAttributify(),  //属性化模式支持
    presetIcons(),    //icon支持
    presetTypography(),
    presetWebFonts({
      fonts: {
        // ...
      },
    }),
  ],
  transformers: [
    transformerDirectives(),
    transformerVariantGroup(),
  ],
})

Unocss基本语法

原子化css | 互动样式 ｜ 样式参考 ｜ Tailwind CSS ｜ 颜色样式 ｜

可以认为Unocss兼具了TailwindCSS 和 Windicss的优点，同时还具有自身的定制性和灵活性。按需引入，体积小，速度快。

1. 基本使用，可以直接在class中定义。在Unocss省略class直接写样式也是可以的，而且有代码提示。
 Index Page
我的国家

2. 在style中定义
 Index Page


3. 混合的写法也是可以的
.test {
  color: white;
  font-size: 2rem;
  @apply bg-blue;
}

3. 属性模式(Attributify Mode)

  Button


4. `uno.config.ts`中定义 rules 或 shortcuts
rules: [
  ['custom-rule', { color: 'red' }],
  ['main2', { margin: '0.25rem', padding: '2rem', color: 'red', 
  'background-color': 'blue'}],
],
shortcuts: {
  // shortcuts to multiple utilities
  'custom-shortcut': 'text-lg text-orange hover:text-teal',
  'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md',
  'btn-green': 'text-white bg-green-500 hover:bg-green-700',
  // single utility alias
  'red': 'text-red-100'
}

/* //常用语句 */
bg-purple-100  背景颜色
text-purple-100 文本颜色
text-center   水平对齐 可用于字体和按键的中心对齐
align-middle  垂直对齐
!w-[80%]    //width: 80% !important;
shadow-sm  盒子阴影
cursor-pointer 指针样式
outline-none 无边框 
font-italic  斜体

hover:bg-purple-500 鼠标悬停时
focus:bg-purple-900  鼠标点击时
flex justify-center items-center  元素居中
flex justify-between  两端对齐
min-h-sceen / min-h-100vh 高度满屏
min-h-80vh 最小高度（可以延伸）
h-80vh / calc(100vh - 10px)
w-full / w-100vw 宽度满屏

w-[95%] lg:w-[85%] ~= w-95vw  lg:w-85vw

文字和水平线
区块链
 


右对齐
X
 //删除按键
m-auto / mx-auto 居中
ml-auto 右对齐
mr-auto 左对齐
px-4 / py-4  左右/上下两边内边距（padding: 1rem;） 其它写法：px-[20px]
pt-4  上部内边距1rem(padding-top: 1rem;)
mx-4 / my-4  左右/上下两边外边距

animate-fade-in  渐入
  虚线分割线

/* flex布局，两端对齐 */
  
  
自定义角色
  
 xxx 
 

 /* 响应式 */
根据常用的设备分辨率方案，默认内置了 5 个断点，sm、md、lg、xl、2xl ：
断点前缀    最小宽度    CSS
sm  640px   @media (min-width: 640px) { ... }
md  768px   @media (min-width: 768px) { ... }
lg  1024px  @media (min-width: 1024px) { ... }
xl  1280px  @media (min-width: 1280px) { ... }
2xl 1536px  @media (min-width: 1536px) { ... }

/* 定位手机屏幕 */
这种方式最令人们惊讶的地方是，要为移动设备设计样式，您需要使用无前缀的功能类，而不是带 sm: 前缀的版本。不要将 sm: 理解为”在小屏幕上”，而应将其视为”在小断点处”
请注意，我们不必为 sm 断点或 xl 断点指定背景色，您只需要指定一个功能类何时开始生效，而不是何时结束。

使用无前缀的功能类来定位移动设备，并在较大的断点处覆盖它们，下面是一些案例：
  //在手机端居中，在屏幕变大时靠左
flex-1 flex justify-end lg:hidden  //手机端时显示，屏幕变大时隐藏
relative hidden lg:flex items-center ml-auto  //在电脑端的样式（在手机端时隐藏）
hidden lg:flex items-center px-4  //在电脑端的样式（在手机端时隐藏）
hidden lg:block ml-auto //在电脑端的样式（在手机端时隐藏）
ml-auto lg:hidden//在手机端时居中，电脑端隐藏

icones图标

官网 ｜ 说明 ｜

yarn add @iconify-json/mdi   //注意按需安装！  //1.2.3
//yarn add @iconify-json/vscode-icons   




  //提示
 //向下的




    

 

全局变量配置

//app.config.ts
export default defineAppConfig({
    title: 'Hello Nuxt888',
    theme: {
      dark: true,
      colors: {
        primary: '#ff0000'
      }
    }
  })
 //app.vue
 {{ appConfig.title }}
 const appConfig = useAppConfig()

 //另外一个简洁的用法是写在composables中，export即可引用
export const title = "hello nuxt"

页面关键词配置

全局配置 ｜ 配置 ｜

//nuxt.config.ts
app: {
  head: {
      titleTemplate: "%s - 固定标题",
      title: "这是首页",
      charset: "utf-8",
      htmlAttrs: {
          lang: "zh-cn"
      },
      meta: [
          { name: "description", content: "首页描述" },
          { name: "keywords", content: "首页关键词" },
      ]
  }
},

//index.vue 对单独页面的设置，会覆盖全局配置
useHead({
  title:"首页index",
  meta:[
      { name:"description",content:"首页描述2" },
      { name:"keywords",content:"首页关键词2" },
  ],
})

全局CSS

// 方法一
1. assets -> main.css
2. nuxt.config.ts中配置：
  css: [
    "~/assets/main.css",
  ], 

// 方法二
//在 app.vue 中引入样式。注意不是在