공부용

[vue.js] 1. 실행 및 시작하기 본문

공부용/vue.js

[vue.js] 1. 실행 및 시작하기

고딕짱! 2022. 2. 16. 09:32

개발도구 : Visual Studio Code

 

0. Node.js 설치

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

 

1. 원하는 위치에 Vue 프로젝트를 생성할 폴더를 만든다.

 

vue 프로젝트를 시작할 폴더 위치

 

 

 

2. vsc에서 폴더를 선택하여 실행한다.

 

3. " ctrl + ` " 눌러 터미널창을 실행한다.

 

4. vue cli 설치

터미널에 입력하여 vue-cli를 설치한다

npm install -g @vue/cli

 

5. 프로젝트 생성

cd 명령어로 프로젝트 생성할 위치로 이동

vue create 명령어로 프로젝트 생성

 

cd project/vue
vue create vue-project

* 혹시 아래와 같은 에러가 난다면 

 https://seoulsense.net/m/51 여기를 참고하면 된다.

powershell은 시작창에서 검색해서 관리자권한으로 실행하면 된다.

설치 에러

 

6. vue version 선택

여기선 선택을 할 수 있다.

Vue2는 현업에서 가장 많이 사용되는걸로 알고있다.

Vue3는 가장 최신에 나온 버전이다.

Vue3에 있는 기능을 Vue2에 넣어주고는 있다고 글을 봤다.

하지만 Vue2는 20개월정도 유지만 후 보안문제 빼고는 손을 땐다고 들었다. (확실하지 않음)

저는 이왕 공부하는거 최신꺼 공부하고자 Vue3를 선택하였다

vue version 선택

 

7. vue 실행하기

만들어진 프로젝트를 들어가서

npm run serve로 실행한다.

 cd vue-project
 npm run serve

 

8. 실행화면

터미널창에 적힌 url를 따라 들어가서 web 화면이 아래와 같이 나오면 성공!

vue.js

 

 

다음엔 여러가지 url를 사용할 수 있는 router를 적어보겠다!

'공부용 > vue.js' 카테고리의 다른 글

[vue.js] 4. props와 emit  (0) 2022.02.21
[vue.js] 3-2 v-if 와 v-on  (0) 2022.02.16
[vue.js] 3-1. vue 템플릿 문법 및 v-for  (0) 2022.02.16
[vue.js] 2. router  (0) 2022.02.16
[vue.js] 0. 주저리주저리  (0) 2022.02.16
Comments