#nuxt

星空笔记是早年前的一个小项目，还是得维护住！前端框架从Vue变更成Nuxt，倒也没有大改，切换过来还是蛮丝滑的。 框架改动倒也没太大难度，主要是要些时间。临近年底，倒是刚好要整理些资料，刚好符合需求，也就重制上线啰！ 星空笔记简介 星空笔记，基于Hive的区块链笔记。 它是一个去中心的应用，数据存储在Hive区块链上。 它和比特币的离线钱包类似，可以很方便地在本地构建，无需服务器。

Nuxt 基于 Vue.js 创建用于生产环境的完整堆栈网页应用和网站， 免费且开源。Nuxt开发指南，包含前端开发的所有方法和技巧，一栈式开发 -> 前往星空笔记

i18n是多国语言模块，主要是在前端集成多种语言的。以前的应用倒也集成过英语，但设计起来有些麻烦，再就是用户多是中文，就没去集成了。这一拖，就是好几年过去了。 现在想在项目中集成，比如AIJoe，还是有点国际范比较好呢。找了下，Nuxt i18n模块已经准备好了。 看了下文档，试了下手，不是很复杂。看来要更新项目啰。以下是集成步骤，可以参考： yarn add @nuxtjs/i18n

GitHub Pages是个不错的功能，它是GitHub提供的一个免费的静态网站托管服务，它允许 GitHub 用户创建和托管自己的静态网站，这些网站可以通过特定的 GitHub 仓库进行管理和托管。具体的方法可以按GitHub的介绍来就行，不算复杂。 上次的工具升级到喵星后，也给自己的博客主站做了个单独的页面，感觉也还可以。后续就想着不如同步到GitHub Pages上，也多个入口。

下载与资源 安装 错误排除 全局错误处理 渲染模式 naive UI 消息显示 Unocss安装 Unocss基本语法 icones图标 全局变量配置 页面关键词配置 全局CSS 全局js 外部js和css的引入 全局函数utils composables 中间件 插件 layouts布局 Grid栅格系统 页面和路由 动态路由 获取当前路径 useRouter navigateTo 生命周期函数

在个人主页中增加搜索组件，本以为是个简单的活，但没想到，却被卡中了，硬生生耗费了数个小时！ 其中的难题是：每次输入搜索时，得到的数据都要即时渲染到页面，就这个“即时”卡了半天。 设计搜索组件 Nuxt的即时性自是没问题，第一次搜索也是没问题，但涉及多次搜索时就无法即时渲染啰！ 刚开始想到的是computed

Nuxt和Nginx是对好搭档，让应用布署上线那是手拿把掐的事。这次喵星上线比较顺利，一把就通了。只是在渲染上还有些小问题，不知是Hive节点的问题，还是前端没设计好，Nuxt4这个新版我也是第一次用。 布署上线两步曲：一是Nuxt打包，pm2运行应用，二是Nginx反向代理和https证书。 Nuxt打包 直接yarn build , 得到 .output文件，它就是运行的文件啰。进去后，直接node

Hello! The open-source world is buzzing with excitement after NuxtLabs announced its acquisition by Vercel —a move that promises to strengthen Nuxt’s future while keeping its core values intact. For developers

昨天体验了下Nuxt4的新功能，接下来就是各种集成啰，今天的任务是集成manon-editor编辑器。 集成manon-editor其实是折腾了一番，安装后运行不了！只得一行行代码去检查、去测试。折腾了快一天了，还是没解决，都快怀疑人生了。最后突然想到去它的github的issue中找找，看下是不是有解决方案。

Nuxt 4.0新版发布了！想着正好lark blog要更新下（升级为喵星），就想着迁移过来。lark blog一直在用，感觉还可以，只是一些功能还停留在vue2阶段，难有更新了。干脆趁此升级重塑！ 新特性亮点 Nuxt 4 致力于让您的开发体验更流畅： 更清晰的项目结构：全新的 app/ 目录结构 更智能的数据获取：我们借此机会解决了数据层的一些不一致问题并提升了性能 更强的 TypeScript

The most popular social media platforms have had censorship and profiling algorithms since the start, so they have a good picture on how people behave. Also at the age of information, people should be

最近要在前端中集成$AIJoe的充值功能，少不了得实时查询价格。这里要用到两个价格：AIJoe/ETH和 ETH/USD的价格。AIJoe/ETH可以从合约中查到，ETH/USD就要借助工具了，这里选了CoinGecko API。 CoinGecko API 提供免费和付费两种计划。所有 CoinGecko 用户均可免费使用演示版 API 计划，通话费率限制为 30 次/分钟，每月通话上限为 10,000

当一切都开发好后，就是打包和布署啰，开发体验还是很好的：轮子都造好了，放在了顺手的位置。这大概也是不少Vue的开发者转向Nuxt的原因吧。 更改服务器端口 1. yarn build , 得到， .output/server/index.mjs 2. 设置服务器端口 port 源码： .output\server\chunks\nitro\node-server.mjs //const port =

推流 推流就是一边获取一边传输的能力，常见是视频播放。在AI生成中也会常用到，推流有助于提高用户体验。在前端测试中，只有浏览器端的原生就去 fetch 才有 streaming 的能力，其它方法不行！Nuxt的 useFetch, $fetch都不行! const url = " const prompt = "天空为什么是蓝色的？" let query = [{role:

状态管理 useState useState用于创建响应式的且服务端友好的跨组件状态，类似于Vue中的state的功能。 const counter = useState('counter', () => Math.round(Math.random() * 1000)) counter++ counter.value = 20 //重新赋值 const user = useState('user',

useFetch来获取数据 参考 useFetch //express res.status(200).send({ bot: response.data.choices[0].text }) //前端 const url = " // const query = [{role: "user", content: data.get('prompt')}] const prompt

Nuxt.js提供了一些方便的功能来帮助我们构建高性能的应用程序。其中之一就是父子组件的功能。在 Nuxt.js 中，我们可以使用父子组件来组织我们的应用程序。父组件可以包含一个或多个子组件，子组件可以接收父组件传递的数据并渲染出相应的内容。这种组件化的方式可以让我们更好地管理和维护我们的代码。 组件 子组件是直接导入即可，无需引入！ 所有的组件都应写在components这个文件夹中，它会自动导入。

layouts布局 layouts -> default.vue, <slot/>可以将其它页面插入 eg: <template> <div class="body"> <NavBar/> <main class="containerX"> <slot/> </main>

中间件 middleware 目录，Nuxt提供了一个可定制的路由中间件框架，可以在整个应用程序中使用，非常适合在导航到特定路由之前提取想要运行的代码。 //middleware -> search.js export default defineNuxtRouteMiddleware((to,from)=>{ const { type,page } = to.params const

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