느린 개발자

Vue.js가 무엇??

사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크이다.

짧게 말해서, 웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크이다.

 

 

vue 라는 프레임워크를 선택한 이유는 여타 다른 프론트엔드 프레임워크보다 배우기 쉽다는 장점때문이다.

(차근차근 쉬운것부터 쭉 나아가자)

 

 

일단 공식 홈페이지를 보면

 

http://https://v3.ko.vuejs.org/

Vue.js

 

 

Vue CLI 란

Vue CLI는 Vue 프로젝트를 빠르게 구성하고, 빌드, 디플로이 할 수 있게 도와주는 도구입니다. CLI는 Command Line Interface의 약자로 터미널에 명령어를 입력하여 컴퓨터와 상호 작용하는 방식을 의미합니다.

 

 

 

설치방법을통해 설치법을 진행하면된다.

# latest stable
$ npm install vue@next

vue 3의 경우

npm install -g @vue/cli

설치 후에 가끔 뭔가가.. 안될때가있다.. 후.. 버전 호환성 이런 문제일게 뻔하다..

@vue/cli 5 버전때로 업그레이드해서 사용했는데. vuex랑 router에서 뭔가 문제가 생겼다.

 

그래서 현재 @vue/cli 4.5.13으로 다운그레이드하여 사용하고있다.

 

yarn으로 설치하는 방법도 있는데. npm을 이용한 설치를 권장하기도하고 자료또한 더많다.

 

 

vue 프로젝트 생성

-- vue/cli 3.x 이상일 경우
$ vue create 프로젝트명
-- vue/cli 3.x 미만일 경우
$ vue init webpack 프로젝트명

 

vue 설치옵션 선택

 

VS code 프로젝트 실행 or 터미널 실행

-- yarn 사용시(8080)
yarn serve

-- npm 사용시(8080)
npm run serve

 

Vue 프로젝트 폴더 구조

node_modules	npm으로 설치된 패키지 파일들이 모여 있는 디렉토리
public	웹팩(webpack)을 통해 관리되지 않는 정적 리소스가 모여 있는 디렉토리
src/assets	이미지, css, 폰트 등을 관리하는 디렉토리
src/components	Vue 컴포넌트 파일이 모여 있는 디렉토리
App.vue	최상위(Root) 컴포넌트
main.js	가장 먼저 실행되는 자바스크립트 파일로, Vue 인스턴스를 생성하는 역할
.gitignore	깃허브에 업로드 할 때 제외할 파일 설정
babel.config.js	바벨(Babel) 설정 파일