[Vue.js] npm 환경 세팅 정리

며칠 간 자바, 스프링, 네트워크 관련해서 이론 위주로 공부하다 보니 코드가 치고 싶어져서 새로운거 배우기!💃

 

 

1. Vue 개발 환경을 도와주는 개발 환경 설치

npm install -g @vue/cli

 

2. VSCode 익스텐션 설치

 

- Vetur

- html css support

- Vue 3 Snippets

 

 

3. Vue 프로젝트 생성

 

vue create vue-form

vue3 선택

 

*Windows 환경에서 에러가 난다면?

get-executionpolicy // restricted 

set-executionpolicy remotesigned // Y 선택

get-executionpolicy // remotesigned

 

4. npm run serve

 

초기화면..! 새로운 구조라 신기하다.

 

/* 설명 */

1. Nodejs 설치하면 npm 쓸 수 있음

2. npm은 각종 웹개발 라이브러리 설치 도우미

3. npm으로 @vue/cli 설치함 (vue 프로젝트 빠르게 생성해주는 라이브러리) > vue create 프로젝트명

4. App.vue가 메인페이지임

5. App.vue > index.html (main.js에서 html로 컴파일해주고 있음)

6. 구조

- node_modules : 프로젝트에 쓰는 라이브러리들

-  src : 소스코드 다 담는 곳

- public : html 파일, 기타 파일 보관

- package.json : 라이브러리 버전, 프로젝트 설정 기록

 

 

---

 그래도 저번에 줌 클론코딩으로 Nodejs 써봐서 vue 말고는 환경이 익숙하다. 다음엔 Spring Framework에 vue.js를 써봐야지

 

 

 

ref. [코딩애플] vue 1강 : Vue 3버전 설치랑 셋팅