[Vue] vue cli 로 프로젝트 시작하기

 

Static으로 만들어보고싶은 아이디어가 생각났는데

React를 한지 좀 시간이 지나서 이 기회에 vue를 배워서 사용해보려고한다.

Vue가 쉽고 가볍고 생산성이 높다고 하는데 react와 비교해보면서 알아볼 수 있을 것 같다.

IDE는 기존에 사용하던 vscode를 사용하기로 했다.

 

설치

 

vscode에서 terminal을 열고 node 와 npm이 깔려있는지 확인한다.

둘다 깔려있다면 npm install -g @vue/cli  로 vue cli를 설치한다.

 

 

설치 이후 확인을 해보는데 아래와같은 에러가 발생했다.

보안오류라고 해서 powershell 대신 bash shell을 사용해서 설치후 실행해보았더니 정상 동작하였다.

* 나중에 찾아본 결과 powershell에서는 vue 대신 vue.cmd 명령어를 사용하면 정상 수행된다고 한다.

 

 

 

vue create [project] 

명령어를 사용하면 vue2 vue3 중에서 선택지가 나오고 설치가 진행된다

설치완료~

 

폴더 구조는 이렇게 되어있다.

 

 

$npm run serve 실행하면 

아래와 같이 기본 페이지를 띄워 볼 수 있다.  ( development build)

 

주소 : localhost:8080

 

이제 여기서 vue 프로젝트 개발을 시작하면 된다.

실제 production build 를 만들기 위해서는 npm run build 를 수행해야한다.

 

 

Vetur

Vetur extension을 설치하면 Syntax highlight, Formatting, Auto complete 등 기능을 사용할 수 있다.

 

< 만 쳐도 기본 format을 만들 수 있다.

<vue> 를 치면 아래와 같은 기본 vue template format을 만들 수 있다.

<template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>