昨天体验了下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 =

在CSS这块有时是按需手写的，效率不算高，毕竟需求低嘛。流行的LESS 、SASS 都没用过，真没太多时间花在这方面。这次，为了做AI应用，还是需要补一下这方面的技能。 在UI方面选了NaiveUI, CSS方面则有个挺时髦的解决方案：Tailwind CSS。它做了一件蛮有用的更新：就是将CSS语句原子化！ 我们听过数据库原子化，CSS语句原子化是个啥？

在UI的使用上，我其实一直用的Bootstrap，用得也顺手。这次要不是更换设计栈，也没想着要改UI框架。主要是Bootstrap在Nuxt上运行不了！ Bootstrap这种UI都是纯前端的，而Nuxt是服务端渲染，有时js调用window

经过一段时间的开发测试，在框架上Nuxt比较适合，在UI上，NaiveUI不错，在CSS上，Unocss就可以。这三者结合起来，可以组成前端开发的三件套。Nuxt有一种模块的机制，可以很方便地拓展它的功能。在前端方面主要是UI 和 CSS，我也选了两个比较适合的。 Nuxt安装 "nuxt": "^3.4.3" nodejs: v18.16.0 1. npx

有句话叫：一入前端深似海啊！这话是对前端极速衍变、个人难以跟上变化所做出的痛苦总结！我自己也是经历了这些痛苦的时期：一个还没学明白，新的东西就又来了。不过自从更新到Vue时，就选下它了，做过几个项目，也没变过。 想着Vue3都发布数年了，是不是要切换到新版呢？找来Vue的文档读了读，看到有关服务端渲染优化(Nuxt)的文章，结合Vue的现实，也深以为然，就又开始了服务端渲染优化路上的狂奔。 Vue

趁着有空想把Vue从2.6升级到3，据称Vue3的速度能快上不少。虽然现阶段不太会去乱折腾，但也要做好技术储备，真有需要马上就切过去！

Rich text editor on Nuxt and Vue

Getting started with NuxtJS

[Login] login process with passport --> req.user is generated automatically by passport create route for '/auth/token' for get jwt token with req.user create nuxtServerInit for fetching token and set