[Vue 3] Vue Quick Start

Vue 3를 배우려면

Vue 3를 배우려면 최소한 다음과 같은 것들이 필요합니다.

HTML, CSS, Javascript 에 익숙한 실력!

command line에서 이동이나 삭제 정도의 명령어를 써본 실력

Node.js 16.0 버전 이상

Vue App 실행하는 여러가지 방법

이번 시간에는 Vue를 실행할 수 있는 다양한 방법들에 대해 알아보겠습니다.

create-vue를 통해 Vue 프로젝트 만들기

CDN을 통해 Vue 사용하기

create-vue를 통해 프로젝트 만들기

create-vue는 Vue 프로젝트 뼈대 만들 때 사용하는 공식 툴입니다. 원래라면 웹사이트를 구현하는데 필요한 라이브러리 프로젝트 세팅 등 설정해야할 일들이 많은데 이를 대신해줍니다. 다음과 같이 명령어를 적어보세요.

shell

      npm init vue@latest

vue@latest가 설치되지 않았다면 다음과 같이 설치할지 물어봅니다. 한 번 설치하면 그 이후부터는 나타나지 않습니다. y를 적고 엔터를 쳐주세요.

설치가 완료되었다면 이제 옵션을 선택할 차례입니다. 프로젝트 이름, 타입스크립트 사용 여부 등…정해줘야하는 것들이 있는데요 Enter와 화살표키로 선택하면 됩니다. 프로젝트를 단순하게 만들기 위해 옵션을 모두 No로 하고 프로젝트 명은 myvue로 하겠습니다.

shell

      ✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

옵션 선택을 완료했다면 다음과 같은 명령어로 개발 서버를 실행하라고 알려줍니다.

shell

      cd <your-project-name> # 프로젝트 폴더로 이동
npm install # 프로젝트에서 필요한 패키지들 설치
npm run dev # 개발 서버 실행

명령어를 실행하고 나면 개발 서버가 열렸다고 알려줍니다.

http://127.0.0.1:5173 또는 http://localhost:5173 에 접속해보세요.

만약 개발이 완료되어서 배포를 할 준비가 되었다면 다음 명령어를 적어주시면 됩니다.

shell

      npm run build # 배포 서버 빌드

그러면 dist라는 폴더가 만들어집니다. 만약 사이트에 접속하게 되면 이 파일들을 이용해서 사이트가 보여지게 됩니다.

CDN을 통해 Vue 사용하기

HTML 파일 내에서 빌드 없이 바로 Vue를 사용하고 싶다면 CDN을 사용하면 됩니다.

Global Build 사용하기

vue.global.js 불러오면 Vue 객체가 있기 때문에 이를 이용하시면 됩니다.

html

      <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

ES Module 사용하기

모듈 형태로 스크립트를 사용해서 ES Module을 import합니다.

html

      <div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

Import maps

최근 import map을 통해 좀 더 단순화된 형태로 불러올 수 있게 해주는 방식이 있습니다. 브라우저 버전에 따라 지원하지 않는 경우가 있으니 caniuse에서 확인해보시고 사용하시길 바랍니다.

html

      <script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

Code Splitting

코드가 길어지다보면 파일을 나누고 싶어질겁니다. 그러면 ***.js 파일로 분리하고 이를 export해주면 됩니다.

html

      <!-- index.html -->
<script type="module">
  import { createApp } from 'vue'
  import MyComponent from './my-component.js'

  createApp(MyComponent).mount('#app')
</script>

javascript

      // my-component.js
export default {
  data() {
    return { count: 0 }
  },
  template: `<div>count is {{ count }}</div>`
}

마무리하며

CDN을 사용하는 경우보다 create-vue를 이용해서 프로젝트를 만드는 것이