개발환경 세팅
순서
1. Node.js 및 npm 설치
2. VSC(Visual Studio Code) 에디터 설치
3. 개발환경 세팅
4. VSC 에디터 부가 기능 설치
1. Node.js 및 npm 설치
💡 vue를 하려는데 왜 Node.js와 npm을 설치하는가?
Node.js는 npm을 사용할 수 있도록 해줍니다.
npm은 각종 웹 개발 라이브러리를 쉽게 설치 가능하도록 도와줍니다.
우리는 각종 웹 개발 라이브러리를 사용해야 하므로, 둘 다 설치해줘야 합니다.
nodejs가 설치되어 있다면 업데이트합니다.
설치되어 있지 않다면, 가장 최신판의 LTS로 다시 설치합니다.
Node.js 설치 확인
윈도우 + 검색으로 cmd창을 켜고 node -v을 타이핑하여 설치한 Node.js의 버전을 확인합니다.
이를 확인함으로써 제대로 설치가 완료되었는지 여부를 알 수 있습니다.
npm 설치 확인
마찬가지로 npm 버전도 확인해줍니다.
만약 위의 화면과 같이 버전을 나타내는 숫자가 아닌 에러가 나온다면,
제대로 설치되지 않은 것이므로 다시 설치해야 합니다.
2. VSC(Visual Studio Code) 에디터 설치
VSC는 코드 작성을 도와주는 에디터입니다.
보통 문서를 만들 때, 한글이나 워드를 사용하는데, 그와 비슷한 역할입니다.
필자는 이미 VSC가 설치되어 있었으므로 넘어가도록 합니다.
3. 개발환경 세팅
vue client 설치
vue/cli는 vue 프로젝트를 빠르게 생성해주는 라이브러리입니다.
npm install -g @vue/cliVSC터미널(Powershell)에서 위의 명령어로, vue 개발환경 세팅을 도와주는 프로그램을 설치하도록 합니다.
vue client 설치 확인
필자는 Powershell에서 vue-cli 버전 확인이 되지 않는 오류가 있었습니다.
만약 같은 오류가 발생했다면, 아래의 포스팅에서 설치 오류 해결을 할 수 있습니다.
[PowerShell] 스크립트 파일 실행 오류
발생 vue-cli를 설치한 후, windowPowershell에서 vue의 버전 확인했는데 오류가 뜨면서 제대로 확인이 안된다. 에러 코드 vue : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\eyi\AppData\Roaming\npm..
eyi-jin.tistory.com
4. VSC 에디터 부가기능 설치
- Vetur
- HTML CSS Support
- Vue 3 Snippets
VSC extension에서 추가로 3위의 3가지를 다운로드하여서 설치합니다.
추가로 확장프로그램 설치
해당 확장 프로그램을 설치하면 vue-devtools를 사용할 수 있고, 디버깅이 가능해집니다.
https://vuejs-kr.github.io/vue/2017/02/25/vue-chrome-debugging/ (22.04.18 확인)
Vue.js 관련 링크
- Vue.js 공식사이트 (한글) kr.vuejs.org/v2/guide/
- Vue.js 무료 강의 (영어) www.vuemastery.com/courses/intro-to-vue-js/vue-instance/
- Vue.sj 한국 사용자 모임 vuejs-kr.github.io/
- Vue.js 입문서 (한글) : joshua1988.github.io/web-development/vuejs/vuejs-tutorial-for-beginner/
'Frontend > Vue.js' 카테고리의 다른 글
| [Vue.js] Vue 프로젝트 생성하기 (0) | 2022.04.24 |
|---|---|
| [Vue.js] React VS Vue.js (0) | 2022.04.18 |
댓글