Vue는 CDN을 사용해 일부 vue를 도입해보거나 npm을 통해 vue를 직접 설치할 수도 있으나 직접 설치할 경우 lint, babel, webpack 등을 직접 세팅해주어야 한다.
이에 반해 vue cli를 이용하면 간편하게 뷰 프로젝트를 생성할 수 있다.
vue cli를 설치하기 위해서 여러가지 라이브러리 설치 도구가 있지만 그 중에서 npm을 이용해 설치하려고 한다.
*vue-cli 공식 사이트 : https://cli.vuejs.org/
vue cli는 기본적인 vue 개발환경을 설정해주는 도구.
npm install -g @vue/cli
명령어 입력 시 설치 옵션 선택 문구가 나타나는데(please pick a preset ~)
vue create 프로젝트명
vue 프로젝트 기본 구조
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
app이라는 id를 가진 element에 App이라는 뷰를 mount시키겠다.프로젝트 폴더 내에서 아래 명령어를 입력하여 앱 실행
npm run serve
입력 후 나타나는 링크를 클릭해 사이트 확인
출처
https://youtu.be/NONWar0jGLM
https://youtu.be/sqH0u8wN4Rs
https://youtu.be/DmgAvJhK3YE