Vue.js CLI 이해 및 사용 방법

Vue.js CLI(명령줄 인터페이스)는 Vue.js 프로젝트를 설정, 개발 및 관리하는 프로세스를 간소화하는 강력한 도구입니다. 새 프로젝트를 만들고, 종속성을 관리하고, 빌드 설정을 구성하는 표준화되고 효율적인 방법을 제공합니다. 이 문서에서는 Vue CLI의 기능을 살펴보고 효과적으로 사용하는 방법을 보여줍니다.

Vue CLI 설치

Vue CLI를 사용하려면 시스템에 전역적으로 설치해야 합니다. Node.js와 npm(Node Package Manager)이 설치되어 있는지 확인한 다음 터미널이나 명령 프롬프트에서 다음 명령을 실행합니다.

npm install -g @vue/cli

이 명령은 Vue CLI를 전역적으로 설치하여 vue 명령을 사용하여 Vue.js 프로젝트를 만들고 관리할 수 있게 합니다.

새로운 Vue.js 프로젝트 생성

Vue CLI가 설치되면 다음 명령을 실행하여 쉽게 새 Vue.js 프로젝트를 만들 수 있습니다.

vue create my-vue-project

프로젝트에 대한 프리셋을 선택하라는 메시지가 표시됩니다. Babel과 ESLint를 포함하는 기본 프리셋에서 선택하거나 Vue Router, Vuex, TypeScript와 같은 기능을 수동으로 선택할 수 있습니다. 초보자의 경우 Enter을 눌러 기본 프리셋을 선택하는 것이 좋습니다.

Vue CLI 사전 설정 이해

Vue CLI는 사전 설정을 통해 프로젝트를 구성하기 위한 여러 옵션을 제공합니다.

기본 사전 설정: Babel 및 ESLint와 같은 필수 도구가 포함되어 있습니다. 대부분 프로젝트에 적합하며 초보자에게 좋은 시작점입니다.
수동으로 기능 선택: 라우팅을 위한 Vue Router, 상태 관리를 위한 Vuex, 유형 검사를 위한 TypeScript 등 특정 기능을 선택할 수 있습니다.

프로젝트 구조

프로젝트가 생성되면 표준 Vue.js 프로젝트 구조가 표시됩니다. 다음은 몇 가지 주요 폴더와 파일입니다.

src: 구성 요소, 뷰, 스타일을 포함한 애플리케이션의 소스 코드가 포함되어 있습니다.
public: 정적 에셋과 애플리케이션의 진입점 역할을 하는 index.html 파일을 포함합니다.
src/main.js: Vue 애플리케이션의 엔트리 파일입니다. Vue 인스턴스를 초기화하고 DOM에 마운트합니다.
src/App.vue: 애플리케이션의 루트 구성 요소입니다. 이 파일을 사용자 지정하여 앱의 기본 레이아웃을 정의할 수 있습니다.
src/components: Vue 구성 요소를 포함합니다. 여기에 새 구성 요소를 추가하고 애플리케이션으로 가져올 수 있습니다.

개발 서버 실행

Vue.js 애플리케이션이 실제로 작동하는 모습을 보려면 다음 명령을 실행하여 개발 서버를 시작하세요.

npm run serve

이렇게 하면 http://localhost:8080(또는 다른 사용 가능한 포트)에서 로컬 서버가 시작됩니다. 브라우저에서 이 URL을 열어 애플리케이션을 확인하세요.

생산을 위한 빌딩

애플리케이션을 배포할 준비가 되면 프로덕션을 위해 빌드해야 합니다. 다음 명령을 실행하여 프로덕션 준비 빌드를 만듭니다.

npm run build

이 명령은 dist 폴더에 최적화되고 최소화된 파일을 생성하여 웹 서버에 배포할 수 있습니다.

Vue CLI 플러그인 사용

Vue CLI는 프로젝트에 기능과 역량을 추가하는 플러그인을 지원합니다. 플러그인을 설치하려면 다음 명령을 실행하세요.

vue add

예를 들어, 프로젝트에 Vue Router를 추가하려면 다음을 실행합니다.

vue add router

플러그인을 제거하려면 vue remove 명령을 사용하세요.

vue remove router

플러그인은 vue.config.js 파일을 통해서나 프로젝트 구성을 수정해서 설치하고 관리할 수도 있습니다.

Vue CLI 구성 사용자 정의

프로젝트 루트에 vue.config.js 파일을 만들거나 수정하여 Vue CLI의 구성을 사용자 정의할 수 있습니다. 이 파일을 사용하면 프록시 구성, 공개 경로 등 다양한 설정을 조정할 수 있습니다.

module.exports = {
  devServer: {
    proxy: 'http://api.example.com'
  },
  publicPath: '/my-app/'
};

결론

Vue.js CLI는 Vue.js 프로젝트를 만들고, 관리하고, 구성하는 과정을 간소화하는 강력한 도구입니다. Vue CLI를 사용하면 새 프로젝트를 빠르게 설정하고, 개발 서버를 실행하고, 프로덕션을 위해 빌드하고, 플러그인과 구성 옵션으로 프로젝트를 사용자 지정할 수 있습니다. 이러한 기능을 사용하면 Vue.js로 현대적이고 역동적인 웹 애플리케이션을 개발할 준비가 된 것입니다.

vuejs cli 설치 생성 프로젝트 사전 설정 구성 요소 제공 빌드 플러그인 구성 개발 프로덕션 설정