---
# System prepended metadata

title: Vue.js 기초 익히기 (3)
tags: [Vue.js 기초 익히기, 지호]

---

Vue.js 기초 익히기 (3)
===

###### tags: `지호`, `Vue.js 기초 익히기`

---

## 1. 여러 개의 Vue 인스턴스 사용하기

![스크린샷 2022-04-11 오전 10 25 16](https://user-images.githubusercontent.com/24283401/162650173-ddfc4af0-6354-4330-8044-c644fb80a741.png)

- this -> 자신의 뷰 인스턴스를 가리킴 
- app1 -> 다른 뷰 인스턴스를 가리킴


## 2. Vue 컴포넌트

![image](https://user-images.githubusercontent.com/24283401/162642513-00296d62-111d-43db-9226-e03c0159cbef.png)

- 전역 객체를 등록할 때는 data를 함수로 받아야한다.
- 전역 등록하면 최종 빌드에 들어가있어서, 파일 용량이 커지고 사용자가 내려받는 자바스크립트 양이 커짐 

![](https://i.imgur.com/L4Dak8c.png)


## 3. Vue Cli로 뷰 설치하기

1. Node.js 설치
2. vue-cli 설치
```shell=
# 방법 1
sudo npm install -g @vue/cli
vue --version
vue create [projectName] # router, vuex 옵션 추가

# 방법 2: vue/cli를 전역적으로 설치하지 않는다.
npx @vue/cli create [projectName]

# 실행
npm run serve
```
