NextUI集成——快速为Next.js项目获得一个好看的UI

发布于:2024-12-18 ⋅ 阅读:(55) ⋅ 点赞:(0)

NextUI用下来相对比较适合技术出身的人,因为这类人大概率没什么太好的审美,比如我,哈哈。

当然也有一些缺点,比如目前少了些富文本渲染的组件,如果你的网站需要用博客去做SEO,可能相对会比较困扰。

针对这点我也有对应的方案去实现博客的渲染,可以看看这个:Next.js项目App目录如何简单集成markdown博客

再贴一下NextUI的官方文档:

NextUI官方网站

可以用的组件

NextUI用到的node版本相对Vue的版本更高些,所以如果你之前用Vue开发习惯了,可能得升级一下Node版本,用nvm(node版本管理工具)可能相对合适一些。

这里贴一下nvm相关的安装,如果你的版本足够,可以跳过这一步(或者可以硬着头皮先跳过,等发现node版本不够用的时候再回来安装nvm,然后升级node版本:

Windows下载地址(Mac用户请自行解决):

https://github.com/coreybutler/nvm-windows/releases

拉到下面下载安装nvm-setup.exe

常用命令:

nvm ls                // 当前已安装node版本列表 前面带星号表示当前使用
nvm list available    // 查看已发布node版本
nvm intall 21         // 安装node21最新稳定版
nvm use 21            // 使用已安装node21
nvm unintall 21       // 删除已安装node21(或者直接进入nvm安装目录删除对应node文件夹)

然后再node -v检查版本,21绝对够了,我自己就是这个版本。

OK了之后就可以开始创建项目了,直接在工作区打开命令行,运行:

# 使用nvm管理node版本的要先调对版本
nvm use [版本号]

# 如
nvm use 21.6.2
# 安装 (不是第一次安装nextui可以不用)
npm install -g nextui-cli

# 初始化项目
nextui init [项目名]
# 如
nextui init my-first-nextui-project

运行期间要选择一些选项,建议选app和npm,另外运行完之后会创建项目的文件夹,所以在编辑器工作区运行上面的命令就行

下面需要启动项目:

# 进入项目目录
cd [项目名]

# 安装依赖
npm install

# 启动项目
npm run dev

然后浏览器打开localhost:3000访问。

最后再把所有的组件都安装一下,后面有需要的时候方便用,在命令行执行:

nextui add --all

基本就都OK了,熟悉一下项目目录和官方组件 这里面提到的组件就可以开始用了。


网站公告

今日签到

点亮在社区的每一天
去签到