Vue:설치 및 개발환경 세팅: 두 판 사이의 차이

학교의 모든 지식. SMwiki
둘러보기로 이동 검색으로 이동
 
15번째 줄: 15번째 줄:
=IDE별=
=IDE별=


== StackBlitz ==
==StackBlitz==
브라우저 기반 IDE. 바로 사용하면 된다.
브라우저 기반 IDE. 바로 사용하면 된다.


37번째 줄: 37번째 줄:
|확장기능은 다음과 같은 것이 추천된다.
|확장기능은 다음과 같은 것이 추천된다.


*Vetur
*Vetur(Volar??인가? 공식문서에선 Volar을 추천)
*HTML CSS Support
*HTML CSS Support
*Vue 3 snippets : 자동완성.
*Vue 3 snippets : 자동완성.
|vscode extension에서 설치한다.
|vscode extension에서 설치한다.
|}
|}

2022년 7월 2일 (토) 09:30 기준 최신판

틀:Vue

  1. Vue:개요
    1. Vue:설치 및 개발환경 세팅
    2. Vue:프로젝트 생성 및 시작해보기
  2. Vue:문법
    1. Vue:데이터바인딩
    2. Vue:반복문
    3. Vue:조건문
    4. Vue:함수
  3. Vue:이벤트
    1. Vue:이벤트 핸들러

공통[편집 | 원본 편집]

과정 설명 방법
Node.js 설치 가능하면 기본 경로는 변경하지 말자.

npm(라이브러리 설치도우미)을 이용하기 위해 설치.

https://nodejs.org/ko/download/

IDE별[편집 | 원본 편집]

StackBlitz[편집 | 원본 편집]

브라우저 기반 IDE. 바로 사용하면 된다.

https://stackblitz.com/edit/vitejs-vite-qxutdl?file=index.html&terminal=dev

vscode[편집 | 원본 편집]

과정 설명 방법
vue cli 설치 뷰 개발환경 세팅을 돕는 프로그램.

터미널에서 진행

npm install -g @vue/cli

npm이 안도면 yarn을 다운받아 사용해보자.

yarn global add @vue/cli

에디터 부가기능 설치 확장기능은 다음과 같은 것이 추천된다.
  • Vetur(Volar??인가? 공식문서에선 Volar을 추천)
  • HTML CSS Support
  • Vue 3 snippets : 자동완성.
vscode extension에서 설치한다.