unocss+vite+vue3初使unocss
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的基本步骤。
评论已关闭