NextUI框架使用教程

最近在折腾一个名为NextUI的新框架，它的组件样式等还是非常美观的，先简单给大家介绍一下吧：

  • NextUI是一个针对React开发的一个组件库

  • 自带 亮色/深色 两种主题，支持自动模式识别

  • 构建在TailWind.CSS之上，性能极佳

  • NextUI是完全组件化的，上手容易

  • 可深度自定义，NextUI提供了插件的模式来定制主题，你可以更改所有的语义标记以创建一个全新的主题




准备工作

  1. 安装node.js和npm包管理器，目前主流的前端框架都需要用到node.js和npm来进行部署安装，安装教程可以自行百度

  2. 安装编辑器，你可以使用HBuilder X或者VSCode，因为我习惯HBuilder X，所以就用它来做演示了。



安装NextUI依赖

NextUI依赖：Vite、React 18、TailWind CSS 3、Framer Motion 4


详细安装教程可以看NextUI官方文档：

https://nextui.org/docs/guide/introduction



一、创建Vite项目

首先我们需要创建一个Vite的项目，打开编辑器，创建一个文件夹，然后打开终端，如图所示：


首先要确认你是否安装了yarn，我这里主要用yarn进行演示

如果你没有安装yarn，可以在下方的终端中使用以下命令安装👇

npm install -g yarn


如果你已经安装了yarn，我们使用下方命令创建一个Vite项目👇

yarn create vite


设置完成后会提示输入项目的名称，我们就直接用Next-UI来作为项目的名称，输入“Next-UI”后，按回车即可


然后会提示选择对应的框架，我这里选择react (使用上下方向键可以进行切换选择)


然后到了选择脚本，我这里选择最简单的javascript



二、安装Framer Motion依赖

使用cd命令进入我们刚刚创建的项目中

cd next-ui


然后使用以下命令，安装Framer Motion

yarn add @nextui-org/react framer-motion



三、安装TailWind.CSS

使用以下命令安装TailWind.CSS

yarn add -D tailwindcss postcss autoprefixer


安装完成之后，再使用下方命令生成配置文件tailwind.config.js

npx tailwindcss init



设置配置文件

接下来我们要修改一下配置文件，打开 next-ui 》src 》tailwind.config.js 这个文件，里面内容如下：

/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}


我们要将以下下内容粘贴到content中

"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",


修改后tailwind.config.js的内容如下：

/** @type {import('tailwindcss').Config} */
export default {
	content: [
		"./index.html",
		"./src/**/*.{js,ts,jsx,tsx}",
	],
	theme: {
		extend: {},
	},
	plugins: [],
}



设置CSS注解

我们需要把以下内容粘贴到 next-ui 》index.css 中

@tailwind base;
@tailwind components;
@tailwind utilities;


如图所示：



开始使用

1、删掉app.css

2、将App.jsx中的内容修改为：

const App = () => {
	retun <div>demo</div>
};

export default App;