Vue 230217

Vue 한글 문서는 뭔 소린지 모르겠다. 한글인가 영어인가

Vite vs. vue-cli

유튜브에 4시간짜리 뷰 시작 영상 참조

Vue 초기 세팅

vue 설치

npm install -g vue

vue-cli 설치

npm install -g @vue/cli

cli 프로젝트 만들기 [프로젝트이름] 으로 폴더 생성되고 initializing

vue create [프로젝트이름]

• 기본 : vue3, vue2, 커스텀 즐겨찾기
• 커스텀 : 유튜브 영상에서는 다음과 같이 선택
  • 패키지 선택
    Babel(하위호환)
    Router(화면이동) - history for router(y)
    Vuex(공통접근저장소, 상태 관리)
    Linter/Formatter - ESLint + Standard config, Lint on save
  • config 파일은 package.json 에서 통합 관리 선택
  • 즐겨찾기에 추가
  • 생성 후, src 폴더와 package.json 파일의 변화를 살펴보자

서버 실행

npm run serve

서버 주소

http://localhost:8080/

배포

npm run build

생성 파일 살펴보기

1. package.json : 기본 세팅
2. src/main.js : 제일 먼저 실행
3. src/App.vue : 2번에서 가져올 vue 파일
   • <templete> 에 구조가 들어감
4. public/index.html : 요기에 #app 에 mount 할 예정, 보이는 바탕 html 파일