Vue.js 로 우당탕탕 게시판 만들어 보면서 공부하기 ^ㅁ^
이것저것 정리된 글 많이 보긴했는데 눈에 안들어옴..
직접해보면서 익혀보자믄서 ~ 렛츠고
가장 먼저 해야할 일은 환경세팅부터 하기!
순서
1. VSCod(Visual Studio Code) 설치 하기
VSCod(Visual Studio Code) 설치 하기
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
위 링크로 들어가서 Window용 다운로드 받기 (쓰니는 Window 환경임)
본인 OS 환경에 맞는거 설치하시고
여기까지 제대로 실행된다면 다음 단계~
Node.js 설치(npm)
앞단 마크업 할 때 JQuery 플러그인(라이브러리)인 갖고와서 쓰기 위해 최상단에 JQuery 파일 import 하는 것 처럼
Vue로 개발할 때 플로그인(라이브러리)인 갖고와서 쓸 수 있게 해주는게 Node.js 인가보다.
무튼.. 이건 또 설치를 하라네..? 해보자고
Node.js — Run JavaScript Everywhere
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
오랫동안 지원해주고 있는 버전이랜다. 링크 들어가자마자 바로 뜨는 버전으로 다운받았음.
Node.js (v20.12.0)
그럼 Node.js 가 잘 설치 되었는지 확인해보자고?
VSCode 통해서 터미널을 열어도 되고 윈도우에서 '명령 프롬프트'로 열어도된다.
VSCode에서는 Ctrl+`
윈도우에서는 [Win키 + R] 실행후 'cmd' 입력하고 확인! 그럼 명령 프롬프트창이 실행될거임
node -v , npm -v 를 입력하면 설치된 버전이 나온다.
잘 설치됐는지 확인했다면?
Vue CLI(Command Line Interface) 를 설치해보자
터미널에서 명령어로 Vue를 잘 활용하기 위해 설치한다고 한다... 그렇다네..
npm install -g @vue/cli
를 터미널에 입력하여 Vue CLI를 설치해보자
설치가 완료되면 터미널에 대충 이런 화면이 뜬다.
VSCode 플러그인 설치
VSCode 플러그인을 설치할때는 VSCode 마켓플레이스에서 검색 후 설치할 수 있고
마켓플레이스는 Ctrl + Shift + x
Vue를 사용하려면 가장 먼저 설치해줘야 되는 플러그인이란다.
.vue 확장자 파일을 Syntax Highlighting해주기 위한 용도가 Vetur.
이것은 코드를 깔끔하게 관리하기 위해 사용된다.
꼭 Vue가 아니어도 HTML, CSS 등 마크업 할 때도 사용하면 좋은 플러그인이다.
Vue 환경세팅 끝!