-
[기초]#1 Vue.js 개발환경 설정하기 (CDN, Mac 환경(vsCode)Vue.js 2020. 6. 2. 19:16반응형
Vue.js 의 초기 개발환경은 그다지 어려운 설정이 없다.
Angular 상위 버전(2 이상)에서는 Node.js 가 필수이지만 Vue.js는 일반 Javascript 라이브러리처럼 사용할 수 있고, Node.js로 프로젝트를 구성할 수도 있다. 간단한 개발 프로젝트에서는 텍스트 에디터와 대부분 사용하는 브라우저 Chrome에서 개발자 도구 설치만 하면 개발 할 수 있다. cdn주소로 vue.js를 삽입한다.
1. Hello Vue.js!
<html> <head> <title>Vue Start</title> </head> <body> <div id="app"> {{ message }} </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js Start!' } }); </script> </body> </html>출력 결과
Hello Vue.js Start!
Hello Vue.js Start!2. Vue 개발자 도구 설치 및 사용방법
Chrome 웹 스토어 에서 vue를 검색, 디버깅 툴 설치
Vue 플러그인 설치후 > 크롬 > 도구 더보기 > 이 확장 프로그램이 내가 방문하는 다음 웹사이트의 모든 데이터를 읽고 변경하도록 허용한다. > 활성화
크롬에서 해당 페이지가 vue 기반인지 여부를 보여주는데, vue 기반이다 싶으면 vue 마크에 불이 들어오고 아니면 안들어 온다.
설치 후 개발자 도구에 들어가면 Vue 탭을 볼 수 있다.
뷰로 개발된 페이지에서 디버깅을 해보면 <Root> 는 최상위 컴포넌트를 나타내며 클릭 하게되면 그 아래로 존재하는 속성들을 확인할 수 있다.
3. Mac 환경에서 시작하기
※ 설치환경은 맥이나 윈도우나 거의 같다.
3-1. node 설치하기
https://nodejs.org/en/download/ 최신버전 pkg 다운 후 install (그냥 마우스로 눌러서 설치하고 별다른 터미널 작업으 필요 없다.)
설치가 완료후 터미널을 열고 아래의 명령어로 버전을 확인한다.
node -v
npm -v
※ Node란?
Node.JS 는 웹브라우저에 종속적인 자바스크립트에서 외부에서 실행할 수 있는 Runtime 환경을 Chrome V8 엔진을 제공하여 여러 OS 환경에서 실행할 수 있는 환경을 제공한다. 이것을 Node.JS 한다.
※ npm이란? Node Packaged Manager, Node js로 만들어진 모듈의 집합체
3-2. Vue CLI 3 .x 설치
새로 설치하는 경우 : npm i -g @vue/cli 입력
2.x 버전 삭제 후 3.x 버전 설치하는 경우 : npm r -g vue-cli 입력 후, npm i npm i -g @vue/cli 입력
npm r -g vue-cli // 2.x 버전 지우기
npm r -g @vue/cli // 3.x 버전 지우기
npm i -g @vue/cli // 3.x 버전 설치
npm i -g vue-cli // 2.x 버전 설치
권한 에러시 모든 명령어 앞에 sudo를 붙인다
아무튼 CLI 3. 대 버전이 필요하다.
3-3. vscode 설치
https://code.visualstudio.com/에서 download for mac 을 받는다.
그리고 개발을 좀 더 수월하게 하기 위하여 몇 가지 플러그인들을 설치한다.
extensions 메뉴 클릭 ( 왼쪽 큐브모양 아이콘 )
- Vetur 플러그인을 설치한다. 이 플러그인은 아래의 기능을 제공한다.
- Syntax-highlighting
- Snippet
- Emmet
- Linting / Error Checking
- Formatting
- Auto Completion
- Debugging
- live server 플러그인을 설치한다. html 웹페이지를 바로 페스트 해볼 수 있도록 도와주는 플러그인이다
3-4. vue 프로젝트 생성
vscode 터미널이나 맥 터미널에서 cd 명령어로 작업할 폴더로 이동한다.
vue create [프로젝트명]
프로젝트를 위의 명령어로 생성한다. ex) vue create vue_test
cli가 2.대 버전이면 위의 create 명령어가 안먹힌다.
이것 저것 생성이 될때까지 기다린다.
3-6. 프로젝트 실행
해당 프로젝트 경로에서 터미널을 열고
npm run serve 명령어로 프로젝트를 실행한다.
http://localhost:8080/ 으로 접근시 위와 같은 화면이 나오면 일단 성공 -_-;;;
대충 뷰 환경 셋팅은 끝났다~
반응형'Vue.js' 카테고리의 다른 글
[Vue] Vue js 비동기통기(axios) 샘플코드 (0) 2022.06.25 [기초]#6 Vue js 기초 문법 (0) 2022.06.11 [기초]#5 Vue의 Router 라우터란? (설치,설정,데이터 IN/OUT) (0) 2022.06.11 [기초]#4 Vue의 컴포넌트란? (0) 2020.06.03 [기초]#2 Vue.js가 무엇인가? (0) 2020.06.03