나의 보유기술(플랫폼)/VUE.JS

vue프로젝트 생성

SummerEda 2021. 1. 29. 16:50

[VUE가 뭔가요?]

[Swagger 정의]

-  스웨거는 개발자가 REST 웹 서비스를 설계, 빌드, 문서화, 소비하는 일을 하는 오픈 소스 소프트웨어 프레임워크이다. [위키백과]

[vue개념 정의]

-  MVVM : 모델 - 뷰 - 뷰 모델 (wikidocs.net/17701)

   모델(자바스크립트 사용)-뷰(화면HTML,CSS,JAVASCRIPT)-뷰모델(VUE.JS: 데이터 동기화, 돔 변경내역 반응하는 역할)

[vue 장점]

-  양방향 데이터 바인딩 (화면에 데이터와 프레임워크 데이터 값이 동기화 되어 자동 변경된다.

-  가상 돔 (화면 전체를 다시 그리지않고 변경가능하다)

 

 

[vue 설치순서: 명령어 사용] 1번~5번

1. 환경변수 설정 (blog.nachal.com/1498)(window +r) 환경 > 환경변수 > path 

C:\Users\[해당폴더]\AppData\Roaming\npm
C:\Program Files\nodejs

 

2. node.js 설치(nm817.tistory.com/34?category=816335)

 

3. vue 설치 명령어 사용

$npm i 

$npm i -g @vue/cli ($vue --version 으로 버전 확인)

 

4. 프로젝트 생성 명령어 사용(blog.naver.com/PostView.nhn?blogId=dktmrorl&logNo=222069826131&categoryNo=108&parentCategoryNo=0&viewDate=&currentPage=1&postListTopCurrentPage=1&from=postView)

$vue create '프로젝트명'    (3x vue-cli)

$vue init webpack '프로젝트명' (2x vue-cli)

-  (엔터키)를 누르면 default(babel, eslint)선택

-  확인방법 $npm run serve  (vue-cli 3.x)

-  확인방법 $npm run dev  (vue-cli 2.x)

 

5. 프로젝트 생성후 dependency 다운로드

$npm i axios

$npm i core-js

$npm i cors

$npm i vue

$npm i vue-js-modal --force

$npm i vue-router

$npm i vuex --force (설치 안 되면 --force로 진행)