unocss+vite+vue3初使unocss

作者：System 时间：2024年08月23日分类：所有,css 字数：1137

这篇文章距离上次修改已过226天，其中的内容可能已经有所变动。

UnoCSS 是一个更快更轻量的现代化CSS框架，它可以和Vite无缝集成。以下是如何在Vue 3项目中使用UnoCSS的步骤：

创建一个新的Vue 3项目（如果还没有的话）:

npm create vue@latest
# 或者
yarn create vue

进入项目目录并安装UnoCSS及其Vite插件:

cd my-vue-app
npm install unocss @unocss/vite @unocss/preset-uno

在 vite.config.js 文件中配置UnoCSS插件:

// vite.config.js
import { defineConfig } from 'vite'
import Unocss from '@unocss/vite'

export default defineConfig({
  plugins: [
    Unocss({
      // 配置UnoCSS的preset
      presets: [
        require('@unocss/preset-uno').default({ /* 可以在这里配置UnoCSS的特定选项 */ }),
      ],
    }),
  ],
})

在 main.js 或 main.ts 文件中引入UnoCSS提供的样式:

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import 'unocss/vite' // 引入UnoCSS的样式

createApp(App).mount('#app')

现在可以在Vue组件中使用UnoCSS的语法了。例如，创建一个组件 App.vue:

<template>
  <div class="bg-gray-200 p-10 text-center hover:text-blue-600">
    Hello UnoCSS!
  </div>
</template>

<script setup>
// JavaScript代码可以保持为空
</script>

运行 npm run dev 启动开发服务器，你将看到一个带有悬停效果的灰色背景的页面。这就是在Vue 3项目中初使用UnoCSS的基本步骤。

unocss+vite+vue3初使unocss

评论已关闭

推荐阅读