[Vue] 초기 세팅 끝내기 (Vue Router, Tailwind CSS, ESlint, Prettier)

Vue3 + Vite + Typescript로 생성한 프로젝트에 Vue Router, Tailwind CSS, ESlint, Prettier를 적용해보자.

 

1. Vue Router 설정

yarn add vue-router

 

 

router/index.ts 파일에 아래 코드를 작성한다.

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
  //경로 설정
    {
      path: '/',
      name: 'main',
      component: //루트 경로에서 렌더링할 컴포넌트,
      children: [
        //중첩 라우팅 설정
      ],
    },
});

export default router;

 

 

main.ts파일을 아래와 같이 수정한다.

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

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

 

 

App.vue파일에 <router-view>를 추가한다.

<router-view>는 최상위 outlet으로 최상위 경로와 일치하는 컴포넌트를 <router-view>위치에 렌더링한다.

<template>
  <router-view></router-view>
</template>

 

위와 같이 설정을 완료했으면 아래의 예시처럼 적용할 수 있다.

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'layout',
      component: MainLayoutVue,
      children: [
        // 배경 레이아웃을 적용할 페이지의 경로 설정
        // '/'경로와 일치할때 MainLayoutVue의 <router-view> 내에 렌더링
        { path: '/main', name: 'main', component: MainPageVue },
      ],
    },
    // /popup 경로일때는 배경 레이아웃을 적용하지 않음
    { path: '/popup', name: 'popup', component: PopUpVue },
    
	// 설정된 경로 외에는 NotFoundVue가 보임
    {
      path: '/:pathMatch(.*)*',
      component: NotFoundVue,
    },
  ],
});

export default router;

 

MainLayoutVue는 배경 레이아웃 컴포넌트로 해당 레이아웃을 적용할 모든 컴포넌트들은 children:[]에 경로를 작성하면 된다. MainLayoutVue도 App.vue처럼 <router-view>가 설정되어있고 그 내부에 중첩되어 컴포넌트들이 렌더링된다.

 

좀 더 자세한 설명은 공식문서를 참조하면 된다.

 

 

2. tailwind CSS 설정

 

먼저 tailwindcss와 의존성 패키지를 설치 한다.

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
yarn tailwindcss init -p

 

tailwind.config.js 파일을 수정하여 모든 파일에서 tailwind가 적용되도록 한다.

export default {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
};

 

src/index.css 파일을 아래의 코드를 넣어 생성한다.

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

 

src/main.ts 파일에  index.css 파일을 import해주면 완료!

import { createApp } from 'vue'
import App from './App.vue'
import "./index.css"
createApp(App).mount('#app')

 

 

 

3. ESlint, Prettier 설정

먼저 필요한 패키지들을 설치한다.

yarn add -D eslint
yarn add -D @vue/eslint-config-typescript eslint-plugin-vue

yarn add -D prettier
yarn add -D @vue/eslint-config-prettier

• @vue/eslint-config-prettier: ESLint와 Prettier를 함께 사용할 때 충돌을 방지하기 위해 필요하다.

 

그 다음 .eslintrc.cjs 파일을 아래와 같이 설정한다.

처음에는 React에서 하던대로 extends 내부에 'plugin:@typescript-eslint/recommended'를 추가했는데 너무 많은 eslint오류가 나서 삭제했다. ESlint에서 Vue의 문법을 Typescript 문법 오류로 처리하는 충돌이 발생해서 그런 것 같다.

module.exports = {
  root: true,
  env: {
    node: true,
    browser: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier',
  ],
  overrides: [
    {
      env: {
        node: true,
      },
      files: ['.eslintrc.{js,cjs}'],
      parserOptions: {
        sourceType: 'script',
      },
    },
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint', 'vue'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'vue/multi-word-component-names': 'off',
    quotes: 'off',
  },
};

 

🤔 eslint파일의 rules에 prettier를 추가해서 적용했더니 개발 환경에 따라(나는 intellj, 팀원은 vscode) 특정 prettier 규칙이 적용이 잘 안되는 문제가 발생해서 prettier 설정 파일을 따로 생성하였다. 

 

.eslintrc.cjs와 동일한 루트 경로에 .prettierrc 파일을 생성한다.

Prettier 설정들을 개인의 성향에 따라 다르므로, 팀원들과 논의 후 결정하는게 좋다. 

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 120,
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "endOfLine": "auto",
  "vueIndentScriptAndStyle": false
}

 

Vue에서는 일반적으로 세미콜론을 사용하지 않는다고 한다. (우리 팀은 기존에 해왔던 React 설정과 비슷하게 하기로 했다.)

• bracketSpacing: 객체 리터럴의 중괄호 주위에 공백을 넣을지 여부를 설정한다.
• arrowParens: 화살표 함수의 인수에 괄호를 사용할지 여부를 설정한다.
• endOfLine: 파일의 끝에 사용할 개행 문자를 설정한다.
• vueIndentScriptAndStyle: Vue 파일의 <script> 및 <style> 태그 내에서 스크립트와 스타일을 들여쓸지 여부를 설정한다.