Language/Vue

Vue - 설치, 환경 세팅

Jessi :D 2022. 11. 2. 16:39

Visual Studio Code에서 진행

 


Vue 설치

새 터미널 열기

Terminal > New Terminal

 

 

터미널창에 입력

둘다 가능 !!

npm i vue
npm install vue

조금 기다리면 알아서 설치함

 

 

 

vue@3.2.41 버전 설치 완료.

 

 

공식문서

공식문서에는 vue --version 으로 vue버전을 확인한다고 나와있지만,

어째서인지 CLI버전을 확인하는 명령어로 반영이 되어서 좀 더 확인이 필요하다.

 

 

CLI 설치

Vue.js 개발환경 빠르게 다운받아보자.

(Vue.js에서 제공하는 공식 CLI 설치)

 

둘다 가능 !!

npm i -g @vue/cli
npm install -g @vue/cli

 시간이 좀 걸리니 그냥 기다린다.

 

버전 @vue/cli 5.0.8 설치완료

 

 

 

Vue - 프로젝트 생성 (Vue-CLI 시작) 하기

 

Vue - 프로젝트 생성 (Vue-CLI 시작)

프로젝트 생성 Vue 3.x 버전 vue creat 프로젝트명 vue create pages Vue 2.x 버전 vue init webpack 프로젝트명 - webpack 대신에 webpack-simple, browserify 등 가능 함 명령어를 입력했는데 에러가 난다면 여기 Vue - 초기

mansu.tistory.com

 


추천 확장 프로그램

VScode

Vetur - 구문강조, 의미강조, 디버깅

 

Vetur - Visual Studio Marketplace

Extension for Visual Studio Code - Vue tooling for VS Code

marketplace.visualstudio.com

 

Prettier - 코드정렬 (여러사람 작업할때 좋음) 

 

Prettier - Code formatter - Visual Studio Marketplace

Extension for Visual Studio Code - Code formatter using prettier

marketplace.visualstudio.com

 

Vue VSCode Snippets -  코드 초기 생성 

 

Vue VSCode Snippets - Visual Studio Marketplace

Extension for Visual Studio Code - Snippets that will supercharge your Vue workflow

marketplace.visualstudio.com

 

Chrome

Chrome 웹브라우저 설치

 

Chrome 웹브라우저

더욱 스마트해진 Google로 더 간편하고 안전하고 빠르게.

www.google.com

 

Vue.js devtools - 디버깅 도와줌

 

Vue.js devtools

Browser DevTools extension for debugging Vue.js applications.

chrome.google.com

 

반응형