Vue.js 설치방법

📌 Vue.js 개발환경 구성

1. 첫 번째 단계로 프로그래밍 에디터(Programming Editor)를 설치한다. 필자는 Visual Studio Code(이하 VS Code)를 사용하기 때문에 VS Code를 설치했다.
2. 두 번째 단계로는 확장성 있는 네트워크 애플리케이션(서버 프로그램) 개발을 자바스크립트로 가능하도록 하는 자바스크립트 런타임 환경 node.js를 설치해준다.
3. 세 번째 단계로는 Vue.js CLI로 Vue 프로젝트 생성하기
   Vue CLI(Command Line Interface)는 Vue 프로젝트를 빠르게 구성하고, 빌드, 디플로이 할 수 있게 도와주는 도구이다.

1. Visual Studio Code를 켜고, 터미널을 연다.
2. npm install -g @vue/cli
3. cd desktop
4. vue create vue-project
5. cd vue-project
6. code. -r

 

위 vue-project는 프로젝트 이름이므로 각자 원하는 대로 변경하여 생성하면 된다.

그리고 위 순서대로 터미널에 입력하면 된다

 

📌 웹팩 템플릿을 활용한 Vue.js 불러오기

나는 패스트캠퍼스 강의 중 프런트엔드 올인원 패키지를 들으며 Vue.js를 공부하고 있다. 그래서 강의 안에서 강사님께서 설명해주신 방법으로 토대로 Github를 통해 웹팩을 미리 커밋해놓고, 그때그때 불러와 편하게 사용하고 있다.

 

✅ 아래 링크를 클릭하여 다운로드하여 사용해도 좋다.
✅ SON7AE's VUE3-WEBPACK-TEMPLATE LINK

1. Visual Studio Code를 켜고, 터미널을 연다.
2. cd desktop
3. npx degit SON7AE/vue3_webpack_template#eslint 프로젝트 이름
4. cd 프로젝트 이름
5. code . -r

 

✅ 아래 링크를 클릭하여 내가 만든 Vue.js 환경설정 영상을 참고해도 좋을 것 같다.

https://www.youtube.com/watch?v=SAqyt8U3_Fs