前言

最近试用了挺多的前端UI框架，有一个叫NextUI的框架非常吸引我，因为它的无论是从界面的配色、排版、交互动画等各个方面都是非常完善的，目前测试用来做网页、App都不会出现兼容性的问题，所以这期教程我带大家基于Vite使用NextUI来构建一个静态页面。

NextUI官网：https://nextui.org/

NextUI中文网：https://nextui.org.cn/docs/guide/installation

中文网应该是镜像站，更新存在一定的滞后性，仅在安装时作为参考，最好还是看官方的英文教程

视频教程

视频教程来源于B站UP主@HDAlex_John，图文教程是对视频教程的一些补充

图文教程

准备工作

安装Node.js，现在的前端开发都是基于组件化的方式开发，用传统JS命令式开发效率太低了，所以需要Node.js，本期教程中安装 Node.js 的步骤就跳过了，详细教程可以百度找找

安装Vite，一个面向浏览器环境构建工具，与Webpacker类似

安装React 18 或 更高版本

安装 NextUI

安装 Tailwind CSS 3.4 或更高版本

安装 Framer Motion 11 或更高版本

下方有详细的 NextUI 以及依赖包安装教程

安装 Vite

在命令行中输入以下命令以全局模式安装Vite，这样的话每次使用Vite时就不需要重复安装了

npm install -g create-vite
Shell

安装 React

首先我们使用以下命令创建一个基于Vite的项目

npm init vite
Shell

回车后会返回以下信息，输入y再次回车，然后输入你的项目名称再次回车即可

Need to install the following packages:
create-vite@6.1.0
Ok to proceed? (y)
Shell

接着会提示输入你的项目名称输入项目名称之后，再次回车即可

> npx
> create-vite

? Project name: » vite-project
Shell

然后会提示选择的框架，用上下方向键移动光标选中React 然后回车

√ Project name: ... nextui
? Select a framework: » - Use arrow-keys. Return to submit.
>   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Angular
    Others
Shell

接着就是选择脚本语言，同样是使用上线方向键进行选择，我这里直接选择最简单的JavaScript，然后回车

? Select a variant: » - Use arrow-keys. Return to submit.
    TypeScript
    TypeScript + SWC
>   JavaScript
    JavaScript + SWC
    React Router v7 ↗
Shell

最后我们需要使用以下命令来安装相关的依赖包，这样我们就基于Vite完成了React的安装以及相关的配置了

npm install
Shell

安装 NextUI 及 Framer Motion

官方教程链接（基于Vite）https://nextui.org/docs/frameworks/vite

在命令行中输入以下命令即可快速安装

npm i @nextui-org/react framer-motion
CSS

安装 Tailwind CSS

官方教程链接（基于Vite）https://tailwindcss.com/docs/guides/vite#react

使用以下命令安装 Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
Shell

使用以下命令生成Tailwind CSS配置文件

npx tailwindcss init -p
Shell

修改配置文件

在项目目录中找到 tailwind.config.js 这个配置文件并打开

在文件开头位置添加以下代码

const { nextui } = require("@nextui-org/react");
JavaScript

将以下代码添加到 export default{} 中

  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
  ],
JavaScript

最终的 tailwind.config.js 配置文件如下

const { nextui } = require("@nextui-org/react");

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui()]
}
JavaScript

在项目目录中找到 index.css 这个文件，将以下tailwindcss声明文件添加到文件最开始的位置即可

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

在项目目录中找到main.jsx这个文件，将以下代码复制并覆盖掉原来的代码即可

// main.tsx or main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import {NextUIProvider} from '@nextui-org/react'
import App from './App'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <NextUIProvider>
      <App />
    </NextUIProvider>
  </React.StrictMode>,
)
JavaScript

最后就可以在App.jsx这个文件中编写NextUI的组件，布局之类的了

运行调试&编译静态页面

调试运行可以使用以下命令打开运行

npm run dev
Shell

编译静态页面可以使用以下命令编译，最终会把编译后的静态文件输出到 项目目录/dist/ 下

npm run build
Undefined