Svelte flowbite 설치하고 사용하기

Svelte는 React, Vue.js 등과 비슷한 역할을 하는 프론트엔드 웹 프레임워크이다. 2016년에 Rich Harris에 의해 최초 발표되었으며 현재 꾸준한 인기를 얻고 있는 프레임워크이다.

 

 

1. Node.js 설치

Svelte(스벨트)를 사용하려면 Node.js가 필요하다.

Node.js는 자바스크립트로 애플리케이션을 개발할 수 있게 해 주는 도구이다.

 

다음의 사이트에서 Node.js를 다운받아 설치하자. 설치과정은 기본 설정을 그대로 두고 <Next> 버튼을 눌러 진행하면 되므로 생략한다.

• Node.js 공식 사이트 : https://nodejs.org

2. Svelte 설치

Node.js를 설치하면 노드 패키지 매니저(npm)도 함께 설치된다. Svelte는 npm 명령을 통해 설치할 수 있다.

# npm with Template
npm create vite@latest yourfolder -- --template svelte
 
cd yourfolder

npm install

 

폴더내에 들어가면 jsconfig.json 파일에서 "checkJs": 항목을 false 로 변경

{
  ...생략
    "checkJs": false
  },
  ...생략
}

 

아래 내용으로 실행하면

> npm run dev

기본으로 위와같은 실행된 화면이 나오게 됩니다.

3. Flowbite UI 프레임워크 설치

윈도우키 + R누르고 cmd누른다음 '명령프롬프트' 창을 실행합니다.

아니면 아래와 같이 찾아서 실행하셔도 됩니다.

 

실행된 윈도우 '명령 프롬프트'에서 명령어를 순차적으로 실행시켜 tailwindcss와 flowbite를 설치합니다.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npm i -D flowbite-svelte flowbite

 

src 폴더 밑에 app.css 파일 수정

@tailwind base;
@tailwind components;
@tailwind utilities;
 
/* @layer base {
    * { --tw-ring-color: rgb(0 0 0 / 0)!important; } 
} */

 

/  폴더 밑에 tailwind.config.js 파일 수정

export default {
  content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'],
  plugins: [require('flowbite/plugin')],
  darkMode: 'selector',
  theme: {
    extend: {
      colors: {
        // flowbite-svelte
        primary: {
          50: '#FFF5F2',
          100: '#FFF1EE',
          200: '#FFE4DE',
          300: '#FFD5CC',
          400: '#FFBCAD',
          500: '#FE795D',
          600: '#EF562F',
          700: '#EB4F27',
          800: '#CC4522',
          900: '#A5371B'
        }
      }
    }
  }
};

 

• Svelete 공식 사이트 : https://svelte.dev/

• Flowbite 공식 사이트 : https://flowbite-svelte.com/

 

Svelte 부터 flowbite UI 프레임워크 까지 한꺼번에 진행하는 부분을 설명하였습니다.

 

이제 npm run dev 실행하셔서 개발 하시면 될 것 같습니다.!

 

번외로 SvelteKit 설치하기 차이점은 Paging Route 할때 차이가 있다.

# SvelteKit 프로젝트 초기화

npm create svelte@latest yourfolder

.... > 추가선택사항에 대한 선택

# 의존성 설치
npm install

# 개발 서버 시작
npm run dev