Vue.js 개발 환경 설정 (vs code)

* 브라우저: chrome

* 에디터: vs code

 

1. node.js 설치

(설치되어 있으므로 생략)

 

2. Vue CLI 설치

Vue CLI: Vue.js 프로젝트를 생성하고 관리하기 위한 도구

npm install -g @vue/cli

vue --version

728x90

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

vue create [프로젝트명]

위 명령을 실행하면 프로젝트 초기 설정을 선택하는 인터페이스가 나타난다.

Default ([Vue 3] babel, eslint): Vue 3을 사용하며, Babel과 ESLint를 포함한 기본 설정을 사용

Default ([Vue 2] babel, eslint): Vue 2을 사용하며, Babel과 ESLint를 포함한 기본 설정을 사용

Manually select features: 프로젝트에 포함할 기능을 수동으로 선택

 

위 두 개는 기본 설정이 자동 적용되므로 추가 설정이 필요없다.

나는 vue3를 사용하는 기본 설정을 사용해보겠다.

프로젝트 생성이 완료되면 프로젝트 폴더로 이동해 프로젝트의 로컬 개발 서버를 실행하라는 명령어가 나타난다.

차례대로 실행한다.

브라우저에서 위 주소 중 아무거나 이동하면 vue.js 애플리케이션이 잘 작동하고 있다.

• node_modules: 프로젝트 종속성이 설치되는 디렉토리
• public: 공개 정적 파일을 보관하는 디렉토리
• src: 소스 코드 디렉토리
  • assets: 이미, css 파일 등 정적 자산
  • components: Vue 컴포넌트
  • App.vue: 최상위 Vue 컴포넌트
  • main.js: 진입 파일 (엔트리 포인트)
• .gitignore: Git 무시 파일
• babel.config.js: Babel 설정 파일
• package.json: 프로젝트 메타정보 및 종속성
• README.md: 프로젝트 설명 파일
• vue.config.js: Vue CLI 설정 파일 (필요시)

4. vue.js devtools 설치

vue.js devtools: vue를 개발할 때 도움을 주는 유용한 도구로, vue로 만든 웹 앱의 구조를 간편하게 디버깅하거나 분석 가능. vue 컴포넌트의 구조를 트리 형태로 시각화해 컴포넌트 간의 관계를 쉽게 파악할 수 있으며, 렌더링 성능 분석도 가능하다.

 

아래 사이트에서 'chrome에 추가'를 클릭한다.

https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

Vue.js devtools

설치 완료