使用vite创建vue项目
npm create vite@latest my-project
cd my-project
npm install
npm run dev
下载unocss
npm install -D unocss
配置vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import UnoCSS from 'unocss/vite'
// https://vite.dev/config/
export default defineConfig({
plugins: [vue(), UnoCSS()],
})
创建uno.config.js
import { defineConfig } from 'unocss'
export default defineConfig({
// ...UnoCSS options
})
测试：App.vue
<script setup>
</script>
<template>
<h1 class="text-9xl font-bold underline color-blue">
Hello world!
</h1>
</template>
<style scoped>
</style>
npm run dev查看结果
这样就可以使用tailwindcss啦ʅ（´◔౪◔）ʃ。
添加谷歌字体（ fonts.google.com ）
1.找到自己喜欢的字体
2.点击
Get font，点击Get embed code，找到自己的字体记住它的名称：Bitcount Single
复制右边的
link代码Copy code，找到自己vue项目里的index.html添加在头部
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bitcount+Single:wght@100..900&display=swap" rel="stylesheet">
<title>Vite + Vue</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
3.编辑uno.config.js在fontFamily添加我们的字体，这里命名为bitcount，如果无法加载，默认使用sans-serif字体
import { defineConfig } from 'unocss'
export default defineConfig({
// ...UnoCSS options
theme: {
fontFamily: {
bitcount: ['Bitcount Single', 'sans-serif'], // Google Fonts
},
},
})
4.App.vue测试字体是否正常启用font-bitcount
<template>
<h1 class="text-9xl font-bold underline color-blue font-bitcount">
Hello world!
</h1>
</template>
npm run dev
完成！！(,,・ω・,,)
