“ 초과근무 시간 증가는 생상성 감소 기법이다. 스트레스를 받는 사람들은 머리가 빨리 돌아가지 않는 법이다. ”
Vue.js가 무엇??
사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크이다.
짧게 말해서, 웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크이다.
vue 라는 프레임워크를 선택한 이유는 여타 다른 프론트엔드 프레임워크보다 배우기 쉽다는 장점때문이다.
(차근차근 쉬운것부터 쭉 나아가자)
일단 공식 홈페이지를 보면
http://https://v3.ko.vuejs.org/
Vue.js
v3.ko.vuejs.org
Vue CLI 란
Vue CLI는 Vue 프로젝트를 빠르게 구성하고, 빌드, 디플로이 할 수 있게 도와주는 도구입니다. CLI는 Command Line Interface의 약자로 터미널에 명령어를 입력하여 컴퓨터와 상호 작용하는 방식을 의미합니다.
설치방법을통해 설치법을 진행하면된다.
# latest stable
$ npm install vue@nextvue 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) 설정 파일 |
Vue.js가 무엇??
사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크이다.
짧게 말해서, 웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크이다.
vue 라는 프레임워크를 선택한 이유는 여타 다른 프론트엔드 프레임워크보다 배우기 쉽다는 장점때문이다.
(차근차근 쉬운것부터 쭉 나아가자)
일단 공식 홈페이지를 보면
http://https://v3.ko.vuejs.org/
Vue.js
v3.ko.vuejs.org
Vue CLI 란
Vue CLI는 Vue 프로젝트를 빠르게 구성하고, 빌드, 디플로이 할 수 있게 도와주는 도구입니다. CLI는 Command Line Interface의 약자로 터미널에 명령어를 입력하여 컴퓨터와 상호 작용하는 방식을 의미합니다.
설치방법을통해 설치법을 진행하면된다.
# latest stable
$ npm install vue@nextvue 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) 설정 파일 |
