[Vue.js][Ch1][Vue 시작하기] Vue CLI, Vetur

Vue.js는 단일 페이지 애플리케이션을 빠르게 구축할 수 있는 공식 CLI를 제공한다.

1. https://v3.ko.vuejs.org/guide/introduction.html 진입

2. 왼쪽 메뉴 중 설치방법 선택 > CLI 참고

npm install -g @vue/cli

• @vue/cli 패키지를 전역 설치하면 vue.js의 cli 명령어를 언제든지 터미널에서 사용할 수 있다.

Vue.js 프로젝트 시작

1. 구글에 vue cli 검색 > https://cli.vuejs.org/ 진입

2. Get Started > 왼쪽 메뉴 중 Creating a Project 참고

Vue.js 프로젝트 생성

1. 터미널에 vue create '생성할 프로젝트 이름' 선언

vue create vue3-test

2. vue 버전 선택 (Vue 3)

3. 프로젝트 생성 후 command 확인

• 생성한 프로젝트(폴더)로 이동해서(cd vue3-test) npm run serve를 하면 개발서버가 열릴 것이다.

4. 생성한 폴더 오픈

• code . -r : 현재 VS Code 창에 현재 경로의 폴더를 열겠다

5. package.json 확인

• serve : 개발서버를 오픈할 때, dev와 같은 동작
• build : 제품화 과정
• lint : 코드가 특정 규칙에 맞게 잘 작성됐는지 확인
  • eslintConfig의 옵션으로 코드 규칙을 명시할 수 있다.

6. src > App.vue 확인 시, 코드의 하이라이팅이 되어있지 않다.

= > 확장 프로그램을 설치해서 vue 확장자를 가진 파일의 하이라이팅을 만들어 준다.

Extensions > vetur 검색 > Install 

                                                                                                    ↓