20241225

Vue3 + Typescript + Vite + ESLint + Prettier + Pinia + Router + Tailwind

Vite, Vue3, TypeScript, ESLint, Prettier, Pinia, Vue Router, Tailwind CSS 설치 및 설정

목적

Vite: 빠른 빌드 도구, 서버 실행 중 추가 패키지 설치 반영
Vue3: 쉽고 직관적인 프레임워크
TypeScript: JavaScript의 기능 보완
ESLint: 일관성 있는 코딩을 위한 도구
Prettier: 일관성 있는 코딩 스타일을 위한 도구 (줄바꿈, 공백 등)
Pinia: Vuex 대신 사용하는 상태 관리 라이브러리
Vue Router: URL 라우터
Tailwind CSS: 유틸리티 기반의 CSS 프레임워크

프로젝트 생성

아래 명령어로 새로운 Vite 프로젝트를 생성합니다:

$ npm create vite@latest 프로젝트명 --template vue-ts

프로젝트 디렉토리로 이동하여 의존성 패키지를 설치하고 개발 서버를 실행합니다:

$ cd 프로젝트명

$ npm install

$ npm run dev

@types/node 설치

Node.js 타입을 제공하는 패키지를 설치합니다:

$ npm install --save-dev @types/node

vite.config.ts 설정

Vite 설정 파일을 작성합니다:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import * as path from "path";

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: { "@": path.resolve(__dirname, "./src") },
  },
});

tsconfig.json 설정

TypeScript 설정 파일을 작성합니다:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

ESLint, Prettier 설치

ESLint와 Prettier를 설치하여 코드 스타일을 일관되게 유지합니다:

$ npm install -D prettier

$ npm install -D eslint

$ npm install -D eslint-plugin-vue

$ npm install -D eslint-config-prettier

$ npm install -D @vue/eslint-config-typescript

.eslintrc.js 파일 작성하기

ESLint 설정 파일을 작성합니다:

module.exports = {
  env: {
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'prettier'
  ],
  rules: [
    // override or add rules settings here
  ]
};

Pinia 설정

Pinia를 설치하고 상태 관리를 위한 플러그인을 추가합니다:

$ npm install pinia

import { createPinia } from 'pinia';

const pinia = createPinia();

...use(pinia);

Vue Router 설정

Vue Router를 설치하고 URL 라우팅을 설정합니다:

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

const routes: Array = [
  { path: "/", component: () => import("../views/Home.vue") },
  { path: "/about", component: () => import("../views/About.vue") }
];

export default createRouter({
  history: createWebHistory(),
  routes,
});

main.ts 파일에서 Vue Router를 플러그인으로 추가합니다:

import router from "./router";
...use(router);

Tailwind CSS 설정

Tailwind CSS를 설치하고 설정합니다:

$ npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

$ npx tailwindcss init -p

Tailwind CSS 스타일을 적용하려면 main.ts 파일에 아래를 추가합니다:

import 'tailwindcss/tailwind.css';

ED's Development