NuxtJS从0到1开发SSR项目-添加Nuxt UI

一、安装Nuxt UI

        直接使用官网教程命令

npx nuxi@latest module add ui

二、添加颜色相关配置tailwind.config.ts

        在根目录下新建 tailwind.config.ts 和 app.config.ts（注：官方说明在安装Nuxt UI 时已经自动安装了@nuxt/icon, @nuxtjs/tailwindcss 和 @nuxtjs/color-mode），其中theme-->extend-->colors-->blue搭配着app.config.ts中ui-->primary使用，可设置默认主题色。

// tailwind.config.ts
import type { Config } from 'tailwindcss'export default <Partial<Config>>{theme: {extend: {colors: {h_bg_blue: '#4861f0',h_bg_white: '#fff',b_gray: '#ececec',blue: {50: '#f0f3fe',100: '#dce2fd',200: '#c1cdfc',300: '#97aef9',400: '#6585f5',500: '#4861f0',600: '#2c3ce4',700: '#2429d1',800: '#2324aa',900: '#222586',950: '#191952'}},height: {60: '60px'}}}
}

// app.config.tsexport default defineAppConfig({ui: {primary: 'blue',gray: 'cool'}
})

三、页面试着使用一下组件

其中样式都是使用 tailwindcss 的，不熟悉的可以参考官方配置说明。

<script setup lang="ts">
const selected = ref(true)
</script><template><div class="flex items-center p-5"><UButton>按钮</UButton><UCheckbox class="pl-1.5" v-model="selected" name="notifications" label="勾选框" /></div>
</template>