02_vue3 프로젝트 생성하기

Node 설치

Node.js®는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다.

우선 기본적인 nodejs가 설치되어있어야 합니다.
터미널을 열고 nodejs 버전 확인을 해보겠습니다.

node -v

만약 버전정보가 나오지않는다면 아래 주소에 접속하여 nodejs 설치를 해줍니다.

https://nodejs.org/en/download/current

설치버전은
안정적인 LTS버전을 설치해주시면됩니다.

Vue 설치

Vue 는 웹 사용자 인터페이스를 만들기 위한 쉽고 강력하며 다재다능한 프레임워크입니다.

다음은 vue버전을 확인해봅니다.

vue --version

이번에도 버전정보가 나타나지 않는다면
설치가 안된것이니 vue 설치를 해줍니다.

// window
npm install -g vue

// macOS
sudo npm install -g vue

vue/cli 설치

vue-cli 는 기본 vue 개발 환경을 설정해주는 도구입니다.

vue-cli 를 설치하는 이유는 기본적인 프로젝트 세팅을 해주기 때문에 폴더 구조, lint, build, 어떤 라이브러리로 구성을 해야되는지, webpack 설정은 어떻게 해야하는지에 대한 고민을 줄여줍니다.

// window
npm install -g @vue/cli

// macOS
sudo npm install -g @vue/cli

Vue 프로젝트 생성

디폴트 옵션으로 프로젝트를 생성할 경우입니다.

vue create [폴더명]

// 생성옵션 선택
>> Default ([Vue3] babel, eslint)
   Default ([Vue2] babel, eslint)
   Manually select features

• Default ([Vue3] babel, eslint) : 선택시 최신버전 Vue3 버전의 기본 옵션만 설치합니다.
  Default ([Vue2] babel, eslint) : 선택시 Vue2 버전의 기본 옵션만 설치합니다.
  Manually select features : 선택시 설치옵션을 직접선택할 수 있습니다.

생성이 완료되면 프로젝트 폴더로 이동해줍니다.

cd [폴더명]
npm run serve

(그 외에 라우터, 엑시오스가 필요한 경우)

라우터 설치

npm i vue-router@next --save

설치가 완료되면 src아래 router폴더를 생성하고 그 안에 index.js파일을 만들어준다.

• src/router/index.js

  • 코드 예시)

import { createRouter, createWebHistory } from 'vue-router'

// 연결할 각 컴포넌트 import (src/views폴더 아래 컴포넌트들 생성해둠)
import FirstView from '../views/FirstView'
import SecondView from '../views/SecondView'
import ThirdView from '../views/ThirdView'

// 라우터 설계
const routes = [
    { path: '/1', component:FirstView},
    { path: '/2', component:SecondView},
    { path: '/3', component:ThirdView}
]

// 라우터 생성
const router = createRouter({
    history: createWebHistory(),
    routes
});

// 라우터 추출 (main.js에서 import)
export {router}

axios 설치

npm명령어를 통해 axios를 설치해준다.

npm install --save axios