[Vue.js | Vue 3] Vue.js 시작하기 (설치, 환경설정, CLI, CDN)

[Vue.js | Vue 3] Vue.js 시작하기 (설치, 환경설정, CLI, CDN)

 

Vue.js는 CLI, CDN 방식의 프로젝트 개발 환경을 제공하고 있는데, CLI를 권장합니다.

 

Vue.js CLI

먼저 Vue.js CLI방식으로 프로젝트 개발 환경을 세팅합니다.

Vue.js 공식 사이트 main페이지

반응형

 

메인 페이지의 Install 버튼을 눌러서 Vue.js 개발 환경을 세팅할 수 있는데요. 먼저 Node.js를 설치해야 합니다.

Windows 사용자라면, Node.js공식 홈페이지에 접속해서 Node.js LTS 버전을 설치해주시면 되고, 리눅스(Linux)/맥(Mac) 사용자라면 쉘 명령어로 설치할 수 있습니다.

 

Node.js가 설치가 되었다면, 다음 명령어를 사용해 Vue 빌드 툴의 설치와 Vue 프로젝트를 생성할 수 있습니다.

> npm init vue@latest

여기서 Vue Router는 SPA 개발을 하거나 Vue개발에 매우 유용해서 미리 설치해도 됩니다.

Vue Router for Single Page Application development? ... No / Yes (선택)

 

프로젝트가 생성되었다면 다음 명령어를 따라 npm 종속성들을 설치하고 개발 서버(dev server)를 시작합니다.

> cd <your-project-name>
> npm install
> npm run dev

이제 Vue.js Vue3 프로젝트가 실행될 것입니다.

 

 

Vue 프로젝트를 개발하기 위한 툴로는 WebStorm, Visual Studio Code를 많이 사용하고 있습니다.

Visual Studio Code를 사용하는 경우에 Volar extension을 추가로 설치해서 사용할 것을 추천합니다.

---

 

Vue.js CDN방식.

 

CDN방식을 사용하면 빌드 툴 없이 바로 Vue.js를 시작할 수 있습니다.

// index.html
<script src="https://unpkg.com/vue@3"></script>

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

<script>
  const { createApp } = Vue

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

Vue.js를 CDN으로 설정하여 실행한 결과입니다. Vue.js 빌드 툴 설치없이 시작할 수 있습니다.

---

 

[Vue.js | Vue 3] Vue.js 시작하기 (설치, 환경설정, CLI, CDN) 에 대해 알아보았습니다.

 

 

도움이 되셨다면 광고 한 번 클릭 부탁드립니다.

한 번의 클릭이 제게 큰 힘이 됩니다! :)