一、安装Nuxt4#

1
# 创建新项目
2
pnpm create nuxt@latest <project-name>
3

4
# 进入项目目录
5
cd <project-name>
6

7
# 启动开发服务器
8
pnpm dev

在创建项目时的配置选项：

选择 pnpm 作为包管理器

启用 Git 初始化

暂时不需要加载额外模块

二、安装@nuxt/ui#

1. 安装 Nuxt UI 包

   1
   npm install @nuxt/ui
   

2. 在 nuxt.config.ts 中添加 @nuxt/ui 模块

   1
   export default defineNuxtConfig({
   2
     modules: ['@nuxt/ui'],
   3
     css: ['~/assets/css/main.css']
   4
   });
   

3. 在 assets/css/main.css 中引入 Tailwind CSS 和 Nuxt UI 样式

   1
   @import "tailwindcss";
   2
   @import "@nuxt/ui";
   

4. 建议安装适用于 VSCode 的 Tailwind CSS IntelliSense 扩展，并添加以下设置

   1
   {
   2
     "files.associations": {
   3
       "*.css": "tailwindcss"
   4
     },
   5
     "editor.quickSuggestions": {
   6
       "strings": "on"
   7
     },
   8
     "tailwindCSS.classAttributes": ["class", "ui"],
   9
     "tailwindCSS.experimental.classRegex": [
   10
       ["ui:\\s*{([^)]*)\\s*}", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
   11
     ]
   12
   }
   

5. 使用 App 组件包装您的应用

   1
   <template>
   2
     <UApp>
   3
       <NuxtPage />
   4
     </UApp>
   5
   </template>
   

6. 遇到的坑

   安装完@nuxt/ui后，预览网站报500 错误：Can’t resolve ‘tailwindcss’ in ’…/app/assets/css’。原因是忽略了官网提示的使用pnpm方式安装时提示的一句话导致。

   

   大致是这个意思：如果使用 pnpm，请确保将shamefully-hoist=true或安装在项目的根目录中。.npmrc``tailwindcss

   解决方案：

   1. 在你的项目根目录下创建或编辑 .npmrc 文件

   2. 添加以下内容：

      1
      shamefully-hoist=true
      

   3. 保存文件后，重新运行安装命令：

      1
      pnpm install
      

      这个设置会让 pnpm 的行为更接近 npm/yarn，将所有依赖提升到根目录的 node_modules 中，从而解决依赖找不到的问题。