1. 프로젝트 초기화

Vue.js 기반 프로젝트를 구축하려면 먼저 Node.js를 설치해야 합니다. 설치 후 NPM을 통해 Vue CLI 3.0 이상 버전을 전역으로 설치합니다. CLI는 vue ui 명령어로 그래픽 인터페이스를 제공하거나, vue create <project-name> 명령어로 터미널에서 직접 프로젝트를 생성할 수 있습니다.

프로젝트 생성 시 중요한 점은 설정 파일을 분리하는 것입니다. 기본적으로 생성되는 vue.config.js 하나에 모든 설정을 넣기보다는, 각 기능별로 나누어 관리하는 것이 유지보수에 유리합니다.

프로젝트 생성이 완료되면 npm run serve 명령어로 개발 서버를 실행합니다. 추가적인 플러그인과 로더 설치는 프로젝트 디렉토리에서 별도의 터미널을 열어 진행합니다.

2. 필수 로더 및 패키지 설정

다양한 파일 형식을 처리하기 위해 아래 패키지들을 설치하고 설정합니다.

2.1 file-loader

SVG, 이미지 등 정적 파일을 로드하기 위해 필요합니다. 별도 설정 없이 바로 사용 가능합니다.

npm install file-loader --save-dev

2.2 svg-sprite-loader

아이콘을 효율적으로 관리하기 위해 SVG 스프라이트를 생성합니다. 설정이 필요하므로 프로젝트 루트에 vue.config.js 파일을 생성하고 아래와 같이 Webpack 체인을 구성합니다.

const path = require('path');

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('svg')
      .exclude.add(path.resolve('./src/icons'))
      .end();

    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(path.resolve('./src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({ symbolId: 'icon-[name]' })
      .end();
  }
};

2.3 normalize.css

브라우저 간 기본 스타일 차이를 없애기 위해 사용합니다.

npm install normalize.css

설치 후 main.js에서 import 합니다.

import 'normalize.css';

2.4 js-cookie

쿠키를 간편하게 다루기 위한 라이브러리입니다.

npm install js-cookie

2.5 autoprefixer

CSS에 자동으로 vendor prefix를 추가합니다. .browserslistrc 파일에서 지원할 브라우저 범위를 설정할 수 있습니다. 자세한 설정은 공식 GitHub 저장소를 참고하세요.

2.6 경로 alias 설정

깊은 디렉토리 구조에서 import 경로를 간결하게 만들기 위해 alias를 설정합니다. vue.config.js에 다음과 같이 추가합니다.

const path = require('path');

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        view: path.resolve('./src/views'),
        comp: path.resolve('./src/components'),
        api: path.resolve('./src/api'),
        layer: path.resolve('./src/layers'),
        icon: path.resolve('./src/icons')
      }
    }
  }
};

설정 후에는 import api from 'api/login' 형태로 사용할 수 있습니다.

2.7 Webpack 설정 확인 및 재시작

Webpack 설정이 올바른지 확인하려면 vue inspect --rule <rule-name> 명령어를 사용합니다. 모든 설정이 완료되면 개발 서버를 재시작합니다.

3. ESLint 설정

코드 품질과 일관성을 유지하기 위해 ESLint를 설정합니다.

3.1 프로젝트 생성 시 ESLint 선택

vue create 명령어로 프로젝트를 생성할 때 ESLint 기능을 활성화하고, "저장 시 자동 수정" 옵션을 선택합니다. 코드 스타일 규칙은 Prettier를 권장합니다.

3.2 추가 패키지 설치

HTML 파일 내의 JavaScript 코드도 검사하려면 eslint-plugin-html을 설치합니다. 별도 설정은 필요하지 않습니다.

npm install eslint-plugin-html --save-dev

3.3 VSCode 설정

VSCode에서 ESLint 플러그인을 사용하려면 settings.json을 열어 다음 옵션을 추가합니다.

{
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "editor.tabSize": 2
}

3.4 .eslintrc.js 설정

프로젝트 루트의 .eslintrc.js 파일을 다음과 같이 구성합니다.

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential', '@vue/prettier'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
};