NextUI用下来相对比较适合技术出身的人,因为这类人大概率没什么太好的审美,比如我,哈哈。
当然也有一些缺点,比如目前少了些富文本渲染的组件,如果你的网站需要用博客去做SEO,可能相对会比较困扰。
针对这点我也有对应的方案去实现博客的渲染,可以看看这个:Next.js项目App目录如何简单集成markdown博客
再贴一下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了,熟悉一下项目目录和官方组件 这里面提到的组件就可以开始用了。