- Published on
🎉 컬러리스트 프로젝트 #6 vite 설치
- 글쓴이
📌 목차
💁🏻
- vite 설치 및 설정
- tailwind ui 설치 및 설정
- daisy ui 설치 및 설정
1. vite를 깔거에요.
1-1. vite와 @vitejs/plugin-react를 devDependency로 설치!
bun add -d vite @vitejs/plugin-react
1-2. vite.contig.ts 설정을 해줄거에요.
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
server: {
port: 3000,
},
// options 객체
plugins: [react()],
})
1-3. vite의 명령어(command)를 package.json의 scripts에 추가합니다.
{
// ...
"scripts": {
"start": "vite",
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
}
// ...
}
2. daisy ui를 깔 건데 그 전에 tailwind ui도 깔 거에요.
2-1 tailwind 설치
bun add -d tailwindcss postcss autoprefixer
bun run tailwindcss init -p
2-2 tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [require("daisyui")],
};
2-3 daisy ui 설치
bun add daisyui