![nuxt42.jpg](https://ipfs.ilark.io/ipfs/QmXkh84s58rCrgXes1a4xC1v3aVLsiVmBXq9Ko27mz961V) - [下载与资源](#下载与资源) - [安装](#安装) - [错误排除](#错误排除) - [全局错误处理](#全局错误处理) - [渲染模式](#渲染模式) - [naive UI](#naive-ui) - [消息显示](#消息显示) - [Unocss安装](#unocss安装) - [Unocss基本语法](#unocss基本语法) - [icones图标](#icones图标) - [全局变量配置](#全局变量配置) - [页面关键词配置](#页面关键词配置) - [全局CSS](#全局css) - [全局js](#全局js) - [外部js和css的引入](#外部js和css的引入) - [全局函数utils](#全局函数utils) - [composables](#composables) - [中间件](#中间件) - [插件](#插件) - [layouts布局](#layouts布局) - [Grid栅格系统](#grid栅格系统) - [页面和路由](#页面和路由) - [动态路由](#动态路由) - [获取当前路径](#获取当前路径) - [useRouter](#userouter) - [navigateTo](#navigateto) - [生命周期函数](#生命周期函数) - [Vue的钩子函数](#vue的钩子函数) - [翻页时默认回到顶部](#翻页时默认回到顶部) - [组件](#组件) - [嵌套组件](#嵌套组件) - [子组件接受父组件参数](#子组件接受父组件参数) - [子组件向父组件传递参数或方法](#子组件向父组件传递参数或方法) - [获取数据](#获取数据) - [更改查询结果的名称](#更改查询结果的名称) - [$fetch](#fetch) - [fetch](#fetch) - [useLazyFetch](#uselazyfetch) - [只客户端渲染](#只客户端渲染) - [状态管理](#状态管理) - [Pinia](#pinia) - [useCookie](#usecookie) - [Layers](#layers) - [Server](#server) - [服务端工具函数](#服务端工具函数) - [打包](#打包) - [启动端口](#启动端口) - [数据推流](#数据推流) - [加密](#加密) - [jwt验证](#jwt验证) - [获取用户IP地址](#获取用户ip地址) - [图形验证码](#图形验证码) - [本地存值localStorage](#本地存值localstorage) - [删除div](#删除div) - [模板字符串语法](#模板字符串语法) - [实时渲染div](#实时渲染div) - [上传图片至IPFS](#上传图片至ipfs) - [显示图片](#显示图片) - [图片自适应宽度或高度](#图片自适应宽度或高度) - [mavon-editor](#mavon-editor) - [nuxt-tiptap-editor](#nuxt-tiptap-editor) - [turndown](#turndown) - [Marked](#marked) - [实时监听和渲染](#实时监听和渲染) - [实时多选数据进输入框](#实时多选数据进输入框) ## 下载与资源 [官网 |](https://nuxt.com/) [中文文档 |](https://nuxt.com.cn/) [中文文档2 |](https://57code.gitee.io/nuxt3-docs-zh/getting-started/installation.html) [nuxt-modules |](https://github.com/nuxt-modules) [naive ui |](https://www.naiveui.com) [Unocss |](https://unocss.dev/integrations/nuxt) [windicss |](https://cn.windicss.org/) [windicss github |](https://github.com/windicss/nuxt-windicss) [Nuxt 3.0 全栈开发视频 |](https://juejin.cn/video/7202149403342143520/section/7202886821187944459) ## 安装 "nuxt": ^4.0.3 nodejs: v22.17.1 ```js 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) ```js //全局错误页面 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 [官网｜](https://www.naiveui.com/zh-CN/os-theme/docs/import-on-demand) [安装指南｜](https://blog.csdn.net/qq_42470947/article/details/148060380) [安装指南2 ｜](https://www.devdeg.com/148.html) [naive-ui-nuxt ｜](https://www.npmjs.com/package/@huntersofbook/naive-ui-nuxt) ```js 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](https://www.naiveui.com/zh-CN/os-theme/components/discrete) 使用 createDiscreteApi 来创建一系列消息提示，它比较自由，推荐。 ```js 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 的样式。 ```js // 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 |](https://juejin.cn/post/7028841960752283656) [互动样式｜](https://unocss.dev/interactive/) [样式参考｜](https://www.tailwindcss.cn/docs) [Tailwind CSS ｜](https://juejin.cn/post/7042901516499288077) [颜色样式｜](https://www.tailwindcss.cn/docs/customizing-colors) 可以认为Unocss兼具了TailwindCSS 和 Windicss的优点，同时还具有自身的定制性和灵活性。按需引入，体积小，速度快。 ```css 1. 基本使用，可以直接在class中定义。在Unocss省略class直接写样式也是可以的，而且有代码提示。

Index Page

我的国家

2. 在style中定义

Index Page

3. 混合的写法也是可以的 .test { color: white; font-size: 2rem; @apply bg-blue; } 3. 属性模式(Attributify Mode) 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 文字和水平线

区块链

右对齐

//删除按键 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图标 [官网｜](https://icones.js.org/collection/mdi) [说明｜](https://antfu.me/posts/icons-in-pure-css-zh) ```html yarn add @iconify-json/mdi //注意按需安装！ //1.2.3 //yarn add @iconify-json/vscode-icons

//提示

//向下的

``` ## 全局变量配置 ```js //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" ``` ## 页面关键词配置 [全局配置｜](https://nuxt.com.cn/docs/api/configuration/nuxt-config) [配置｜](https://juejin.cn/post/7213935228902309948) ```js //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 ```js // 方法一 1. assets -> main.css 2. nuxt.config.ts中配置： css: [ "~/assets/main.css", ], // 方法二 //在 app.vue 中引入样式。注意不是在 ``` ## 图片自适应宽度或高度 [参考](https://cloud.tencent.com/developer/article/2294197) ```js .container { width: 50%; height: 300px; overflow: hidden; /* 防止图片溢出容器 */ } .container img { width: 100%; height: 100%; object-fit: cover; } 上述代码中，我们定义了一个名为 container 的容器，并设置了宽度为 50% 和高度为 300px。接下来，我们通过 overflow 属性设置了容器的溢出属性为 hidden，以防止图片溢出容器。在 img 标签中，我们使用了 width 和 height 属性将图片的大小设置为与容器相同，并且使用了 object-fit 属性将图片按比例缩放并居中显示。具体来说，object-fit 属性的值为 cover，意味着图片会拉伸或缩小以填充整个容器，并保持原始比例。 ``` ## mavon-editor [文档 ](https://www.npmjs.com/package/mavon-editor) [文档2 ](https://hinesboy.github.io/mavonEditor/) [github ](https://github.com/hinesboy/mavonEditor) [新版安装指南 ](https://github.com/hinesboy/mavonEditor/issues/888) ```js 1.yarn add mavon-editor@next //"^3.0.2" // npm install mavon-editor@next --save 2.添加并编辑插件 ~/plugins/mavon-editor.client.js import mavonEditor from 'mavon-editor' import 'mavon-editor/dist/css/index.css' export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.use(mavonEditor) }) 3. 前端使用 4. 上传图片 //增加两个参数： md、@imgAdd
5. 保存草稿箱 @save="saveMavon" 快捷键 ctrl+s saveMavon(value,render){ console.log("this is render"+render) //html渲染的格式 console.log("this is value"+value) //原始格式, String } 6. 解析markdown文本

``` ## nuxt-tiptap-editor [文档｜](https://tiptap.dev/docs/editor/api/utilities/html) [参考｜](https://nuxt-tiptap-editor.vercel.app/docs/important) [参考｜](https://www.itxst.com/tiptap/methods.html) ```js yarn add nuxt-tiptap-editor // npx nuxi@latest module add tiptap //nuxt.config.ts设置： //会自动添加 modules: ['nuxt-tiptap-editor'] //component -> TiptapEditor.vue // 父组件 edit.vue const contentRef = ref() const content = contentRef.value.getContent() //即可得到编辑器中的数据 ``` ## turndown HTML转Markdown 能将复杂的HTML结构转化为简洁的Markdown，方便编辑和发布。 Turndown是轻量级的JavaScript库，适合前端或Node.js项目，易于集成到Web应用。 ```js yarn add turndown //7.2.0 // npm install marked turndown import TurndownService from 'turndown' const turndownService = new TurndownService() const html = '

Hello, World!

This is a sample HTML document.

' const markdown = turndownService.turndown(html) console.log(markdown) const { marked } = require('marked') const Turndown = require('turndown') const turndownService = new Turndown() const html = '

Dynamic

Content

' const markdown = turndownService.turndown(html) console.log(markdown) ``` ## Marked [参考](https://juejin.cn/post/7227603054631600187) 解析Markdown文本 ```js yarn add marked // npm install marked // const marked = require('marked'); import { marked } from 'marked' const markdown = '# Hello, world!' const options = { gfm: true, breaks: true, smartLists: true, highlight: function(code) { return require('highlight.js').highlightAuto(code).value } } const html = marked(markdown, options) // const html = marked.parse('# Marked in Node.js\n\nRendered by **marked**.') console.log(html)

const mdshow = (md) => marked(md, options) ``` ## 实时监听和渲染 ```js //ref() 和 computed() 被自动导入 const count = ref(1) const double = computed(() => count.value * 2) //使用computed监听路由变化 const route = useRoute() const pageKey = computed(()=>route.fullPath) const activeName = computed(()=>route.name) //使用watch监听路由变化 watch(route, (to) => { console.log('路由',to) }, {flush: 'pre', immediate: true, deep: true}) // 使用watch监听数据变化，做出相应逻辑 watch(tagOption, () => { console.log(6688, 'tagOption2', tagOption.value[[tagOption.value.length - 1]]) tagsX.value += tagOption.value[[tagOption.value.length - 1]] }, {flush: 'pre', immediate: true, deep: true}) //使用watch监听路由变化，即刻获取数据，渲染页面 // 每当进入页面都会发生一次 watch // 每当 keywords 数据发生一次变化，就会发生一次 watch watch(()=>route.query.keywords,(newVal)=>{ keywords.value = newVal getData() }, {flush: 'pre', immediate: true, deep: true}) ``` ## 实时多选数据进输入框使用watch实现实时数据更新 ```js //

选择标签或填写：

```

lemooljiang