13. Vue Cli로 뷰 설치하기

CLI(Command Line Interface) 로 뷰를 설치한다고?

터미널에서 뷰를 설치한다고 이해하자

 

 

Node.js 설치

www.nodejs.org/ko/download/

다운로드 | Node.js

Node.js 설치

 

 

설치 확인

 

 

npm으로 Vue Cli설치

설치중에 에러나면

sudo npm unstall -g @vue/cli 

 

Vue Cli 설치 확인

 

이제 프로젝트 만들자

Vue 프로젝트 생성

 

default로 할래? 메뉴얼로 할래?

메뉴얼로 ㄱㄱ

 

보통 Router랑 Vuex는 사용

 

 

 

엔터 ㄱㄱ

 

 

엔터 ㄱㄱ

 

엔터 ㄱㄱ

 

 

엔터 ㄱㄱ

 

 

엔터 ㄱㄱ

 

 

설치 완료

 

경로 이동

test123 프로젝트 다른 폴더로 경로 옮김

애초에 이동한 다음에 만들자

 

 

Vue Cli설치하기 싫어 그냥 바로 Vue프로젝트 만들래

 

Vue Cli설치해서 만드는게 훨씬 빠름

설치 완료

 

 

 

프로젝트 구조

 

 

node_modules

Vue.js가 사용하는 npm패키지들이 들어있음

 

 

 

package.json

dependencies : { 프로젝트 짤때 필요한 패키지 dependency 모음 }

devDependencies : { 개발할 때 필요한 dependency 모음 }

 

 

 

src

src는 코딩한 소스코드가 들어감

 

 

 

main.js

import Vue from 'vue' -> vue 패키지에서 가져와서 Vue에 넣어줌

import App from './App.vue' -> App.vue 파일에서 가져옴

import router from '.router' -> 프로젝트 만들 때 router 체크한거

import store from '.router' -> 프로젝트 만들 때 vuex 체크한거

 

 

Vue 인스턴스 생성할 때 router, store를 사용하겠다.

render function이용해서 App을 넣어줌

App안에 들어있는 <template>이 '#app' 아이디를 가진 탭으로 이동

 

public/index.html

<div id="app"></div> 여기안에 들어간다는거임

 

 

Vue 프로젝트 실행

 

실행 성공

 

 

실행 결과

 

App.vue에서 수정 후 저장

 

 

실행 결과