Vite 프로젝트 생성해보기(with Tailwind CSS)

맥북에어(M1)이며, VSCode를 사용하였습니다.

노드는 16버전과 14버전을 번갈아가면서 사용하고 있지만,

해당 프로젝트를 만들 땐 14버전을 사용하였습니다.

 

Vite 프로젝트 만들기

저는 npm을 사용하기에 npm으로 진행하였습니다.

NPM

$ npm create vite@latest

Yarn

$ yarn create vite

PNPM

$ pnpm create vite

 

Project name 입력

생성할 프로젝트의 폴더명을 입력하시면 됩니다.

사용할 프레임워크 선택하기

저는 vue를 선택하였습니다.

그 이외에도 vanilla, react, preact, lit, svelte를 지원합니다.

 

JavaScript와 TypeScript 중 선택하기

저는 자바스크립트를 더 선호하는 편이라 vue를 선택하였습니다.

(아마 다른 프레임워크도 선택하지 않을까 추측해봅니다.. 공부할 시간이 길지 않아서 테스트는 못해봤습니다.)

생성 완료

생성된 경로와 실행 방법에 대해 설명해줍니다

 

Tailwind CSS 설치

저는 npm으로 설치하였습니다.

$ npm i --save-d tailwindcss postcss autoprefixer

 

init 명령 실행

$ npx tailwindcss init -p

 

Tailwind CSS Config 설정 추가

tailwind가 인식할 파일들의 확장자를 입력해줍니다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

Tailwind CSS의 css 파일 만들기

파일을 src에 만들라고 공식 홈페이지에 예시로 나와있지만,

저는 css파일을 assets 폴더에 정리하는게 마음이 편해서 다음과 같이 진행했습니다.

css 파일명도 제가 마음대로 지었고, style.css의 위치도 이동시켰습니다.

@tailwind base;
@tailwind components;
@tailwind utilities;

 

main.js 수정

저는 assets/css에 파일을 다 옮겼기 때문에 style.css도 경로를 수정하였지만,

그냥 연습용으로 src에 둘 다 만들고 'import ./index.css'와 같은 형태로 추가하셔도 무관합니다.

import { createApp } from 'vue'
import App from './App.vue'

import './assets/css/style.css'
import './assets/css/tailwind.css'

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

 

테일윈드 적용 테스트

기본으로 생성되어있는 HelloWorld.vue 파일의 최상단에 아래와 같이 테일윈드를 사용하여 아무 css를 적용시켜봤습니다.

추가한 코드

실행하여 확인을 해보았더니, 아이콘들이 이동되어있네요.

아마도 테일윈드와 클래스명이 곂친 부분이 있나봅니다.

아무튼 css 적용이 완료되었으므로 테스트를 마칩니다.

css 적용된 모습

 

추가: Router

vue-router 설치

$ npm i vue-router@4 --save

 

router js파일 생성

라우터의 기본 설정을 입력하여 저장해줍니다.

테스트용으로 파일 하나를 만들고, /test 경로도 추가하였습니다.

import { createWebHistory, createRouter } from "vue-router"

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../components/HelloWorld.vue'),
  },
  {
    path: '/test',
    name: 'Test',
    component: () => import('../components/Test.vue'),
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router

 

main.js에 router 추가

router를 import한 후 use로 사용한다고 선언을 해줍니다.

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

import './assets/css/style.css'
import './assets/css/tailwind.css'

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

 

App.vue 변경

기존에 있던 HelloWorld 컴포넌트를 지우고 router-view를 추가해줍니다.

 

라우터 동작 확인

내가 설정한 대로 화면에 제대로 출력이 되는지 확인을 해줍니다.

/

/test

 

+ Vite Config 설정으로 포트 변경하기

기존에 Nuxt 기반으로 사용하다보니, 로컬호스트는 3000번 포트가 편해서 찾아보고 메모해 놓습니다.

difineConfig에 Server.port = 3000을 추가해줍니다.

변경 전

변경 후

접속 확인

 

 

후기

기존에 회사에서 새로만들던 페이지들을 한번 Vite로 옮겨서 실행했봤었는데

Nuxt: 2.4~2.9초

Vite: 0.2~0.15초

라는 말도 안되는 속도차이를 보여줬다..

진짜 왜 쓰는 지 알것같았고, 이번에 새로 만드는 페이지들은 적용할 수도 있다고 얘기를 들었는데

적용할 수 있도록 더 공부를 해놓고 말씀을 드려야겠다

 

 

프로젝트 생성 참고: https://vitejs-kr.github.io/guide/#scaffolding-your-first-vite-project

테일윈드 연결 참고: https://tailwindcss.com/docs/guides/vite

라우터 연결 참고: https://router.vuejs.org/installation.html