[Vue.js] 2- vue-cli 프로젝트 생성하기

vue.js 기반의 프로젝트를 아주 처음부터 만들고, 수 많은 연관 라이브러리를 npm을 통해서 다운받아서 한 땀, 한 땀 만드는 일은 시간이 정말 많이 걸리고 복잡한 일일 겁니다.

 

그래서, vue.js를 사용한 초기 프로젝트를 패키지처럼 묶어서 사용할 수 있게 한 것이 vue-cli입니다.

command-line-interface라고 하는데, 명령어 입력으로 초기 프로젝트를 설치하거나, 라이브러리를 설치할 수 있는 도구입니다.

 

 

그럼, vue-cli를 사용해서 초기 프로젝트를 생성해 보겠습니다.

 

1. 터미널을 엽니다.

2. vue-cli를 설치합니다.

명령어 : npm install -g @vue/cli

 

3. 다음 명령어로 vue 버전을 확인하고, 정상적으로 vue-cli가 설치가 되었음을 확인합니다.

명령어 : vue --version

 

4. 프로젝트를 생성합니다.

명령어 : vue create 

5. vue CLI 설정

features : Babel, Linter, Unit

fotmatter config : Prettier

lint features : Lint on save

testing solution : Jest

Babel, ESLint, etc.. : In dedicated config files

설치 완료!

 

cd vue-til

npm run server

로 명령어를 차례로 실행하면, 터미널에 다음과 같은 로그가 찍힙니다.

 

 

크롬 브라우저에서 localhost:8080으로 접근합니다.

 

성공입니다.

 

그런데, 이제 src/app.vue에서 약간의 코드를 추가해 보겠습니다.

아래처럼 오류가 발생합니다.

이런 원인은 vue-cli3.x이상의 버전부터 ESLint가 제대로 적용되지 않기 때문에 발생합니다.

 

이제, vue create로 생성한 프로젝트의 바로 하위에 vue.config.js라는 파일을 만들어 주고, 다음 코드를 작성합니다.

module.exports = {
    devServer: {
        overlay: false
    }
};

 

다시 서버를 실행하면, 정상적으로 브라우저의 화면이 그려지는 것을 알 수 있습니다.