CLI 2.x와 3.x의 차이점 / 프로젝트 생성 및 서버 실행

강의명 : Vue.js 시작하기 - Age of Vue.js

수강 기한 : 무제한

진도율 : 0강/68강 (0%) | 시간 : 0분/325분

나가기

미수강

이전수업

다음수업

뷰 CLI 버전 4.5.x 이상 쓰시는 분들은 아래 옵션으로 프로젝트를 생성해주세요 :)

웹 개발할 때 알아두면 좋은 리눅스 명령어 글

Vue.js 시작하기 - Age of Vue.js

수강 기한 : 무제한

진도율 : 0강/68강 (0%) | 시간 : 0분/325분

개발 환경 설정

프로그램 설치

2분

수업 소스 코드 안내

1분

VSCode에서 수업 코드 보는 방법

2분

VSCode 플러그인 설치 및 설정

5분

뷰 개발자 도구 소개 및 실행 방법

2분

Vue.js 소개

MVVM 모델에서의 Vue

2분

기존 웹 개발 방식(HTML, Javascript)

10분

Reactivity 구현

11분

Reactivity 코드 라이브러리화 하기

3분

Hello Vue.js와 뷰 개발자 도구

3분

인스턴스

인스턴스 소개

4분

인스턴스와 생성자 함수

3분

인스턴스 옵션 속성

2분

컴포넌트

컴포넌트 소개

1분

[실습 안내] 컴포넌트 등록 및 실습

5분

[실습 풀이] 전역 컴포넌트 등록

2분

지역 컴포넌트 등록

4분

전역 컴포넌트와 지역 컴포넌트의 차이점

2분

컴포넌트와 인스턴스와의 관계

4분

컴포넌트 통신 방법 - 기본

컴포넌트 통신

2분

컴포넌트 통신 규칙이 필요한 이유

3분

props 속성

6분

props 속성의 특징

2분

[실습 안내] props 속성 실습

2분

[실습 풀이] props 속성 실습 풀이

2분

event emit

4분

event emit으로 콘솔 출력하기

3분

[실습 안내] event emit 실습 안내

3분

[실습 풀이] event emit 실습 풀이

5분

뷰 인스턴스에서의 this

4분

컴포넌트 통신 방법 - 응용

같은 컴포넌트 레벨 간의 통신 방법

1분

같은 컴포넌트 레벨 간의 통신 방법 구현 1

8분

같은 컴포넌트 레벨 간의 통신 방법 구현 2

6분

라우터

뷰 라우터 소개와 설치

3분

뷰 라우터 인스턴스 연결 및 초기 상태 안내

3분

[실습 안내] routes 속성 설명 및 실습 안내

3분

라우터가 표시되는 영역 및 router-view 태그 설명

5분

링크를 이용한 페이지 이동 및 router-link 태그 설명

4분

라우터 정리 및 학습 방향 안내

5분

HTTP 통신 라이브러러 - axios

HTTP 라이브러리와 Ajax 그리고 Vue Resource

3분

axios 소개 및 오픈 소스를 사용하기 전에 알아야 할 것들

6분

axios 실습 및 this 설명

9분

웹 서비스에서의 클라이언트와 서버와의 HTTP 통신 구조

5분

크롬 개발자 도구 네트워크 패널 보는 방법

4분

템플릿 문법 - 기본

템플릿 문법 소개

1분

데이터 바인딩과 computed 속성

5분

[실습 안내] 뷰 디렉티브와 v-bind

4분

[실습 풀이] 클래스 바인딩, v-if, v-show

6분

모르는 문법이 나왔을 때 공식 문서를 보고 해결하는 방법

6분

methods 속성과 v-on 디렉티브를 이용한 키보드, 마우스 이벤트 처리 방법

7분

템플릿 문법 - 실전

watch 속성

4분

watch 속성 vs computed 속성

6분

computed 속성을 이용한 클래스 코드 작성 방법

7분

프로젝트 생성 도구 - Vue CLI

최신 Vue CLI 소개

3분

Vue CLI 도구 설치할 때 문제점 해결 방법

3분

CLI 2.x와 3.x의 차이점 / 프로젝트 생성 및 서버 실행

6분

CLI로 생성한 프로젝트 폴더 구조 확인 및 main.js 파일 설명

7분

싱글 파일 컴포넌트 소개 및 여태까지 배운 내용 적용하는 방법

3분

App.vue와 HelloWorld.vue 설명

7분

싱글 파일 컴포넌트

싱글 파일 컴포넌트에 배운 내용 적용하여 개발 시작하기

5분

싱글 파일 컴포넌트 체계에서 컴포넌트 등록하기

6분

싱글 파일 컴포넌트에서 props 속성 사용하는 방법

4분

싱글 파일 컴포넌트에서 event emit 구현하기

5분

Vue CLI로 생성한 프로젝트 내용 정리

2분

최종 프로젝트 - 사용자 입력 폼 만들기

프로젝트 생성 및 마크업 작업

6분

v-model 속성과 submit 이벤트 처리

6분

axios를 이용한 데이터 전송 및 form 구현

8분

마무리

수업 정리 및 향후 학습 방향 안내

10분

질문 게시판

올라온 질문이 없습니다!
수업 내용에 궁금한 점이있다면
질문을 작성해주세요!

vue의 버전은 2? 3?

안녕하세요. 현재 vue cli를 설치하고, 새로운 프로젝트를 만드는 단계에 있는데, 동영상과는 달리 vue2와 vue3을 고를수 있게 되어있습니다. 어느것을 골라야할지 몰라서 vue3을 골라 진행했습니다.프로그램의 동작에는 문제가 없으나 크롬에서의 vue devtool이 제대로 작동하지 않는 문제를 발견했습니다.아마도 devtool이 vue2에 대응하도록 만들어져있는게 원인이라고 생각합니다만... 제가 맞는지 확신이 서질 않습니다. 혹시 이 강의를 만드실때 vue버젼이 2였는지 3이였는지 여쭤봐도 되겠습니까? PS C:\Users\yongs\OneDrive\Desktop\personal_projects\vue\learn-vue-js-master\vue-cli> node -v v12.16.1 PS C:\Users\yongs\OneDrive\Desktop\personal_projects\vue\learn-vue-js-master\vue-cli> npm -v 6.14.8 PS C:\Users\yongs\OneDrive\Desktop\personal_projects\vue\learn-vue-js-master\vue-cli> npm list vue vue-cli@0.1.0 C:\Users\yongs\OneDrive\Desktop\personal_projects\vue\learn-vue-js-master\vue-cli `-- vue@3.0.0-rc.12 PS C:\Users\yongs\OneDrive\Desktop\personal_projects\vue\learn-vue-js-master\vue-cli>

Yongsoo Kim 5 2

cli설치 에러가 발생하고 cli프로젝트 생성이 안됩니다.

설치 에러 learn-vue-js-master> npm install -g @vue/cli npm WARN deprecated core-js@2.6.10: core-js@<3.0 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3. npm WARN deprecated fsevents@1.2.9: One of your dependencies needs to upgrade to fsevents v2: 1) Proper nodejs v10+ support 2) No more fetching binaries from AWS, smaller package size 프로젝트 생성시 에러 vue\learn-vue-js-master> vue create vue-cli vue : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users \Duksoo\AppData\Roaming\npm\vue.ps1 파일을 로드할 수 없습 니다. 자세한 내용은 about_Execution_Policies(https://go.mi crosoft.com/fwlink/?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + vue create vue-cli + ~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurit yEx ception + FullyQualifiedErrorId : UnauthorizedAccess

keshoho 3 4

Vue CLI 4.x버전에서의 옵션 선택

안녕하세요! Vue CLI 버전 4.5.10 대로 설치를 하고있는 와중에 선택화면이 2개 떴는데요. 이 때에 어떤걸 선택해야 좋은걸까요? 1. 2. 검색해 보니 첫번째는npm저장소 대체(?)문구인것 같고, 두번째는 Yarn/NPM 둘 중 하나를 선택하는 것 같은데요. 1. NPM저장소를 대체(?)했을 때의 장점은 무엇인지 궁금하고 2. 현재 강의에서는 NPM을 선택하는것이 맞는거겠죠? Yarn은 뭐죠?ㅠㅠ? 유익한 강의 늘 감사합니다!

sugar7000 2 1

무슨 말인지 하나도 모르겠습니다 ㅠㅠ

ㅂ버전과 오류입니다. vue4.5 이상이라 이런 오류가 나는거같은데 프로젝트 생성을 어떻게 하나요?? 첨부해주신 아래 옵션으로 프로젝트를 생성하라는 의미를 모르겠습니다.

첸벙 1 1

Vue Cli 설치 버전 관련

안녕하세요, Vue CLI 설치를 하니 " @vue/cli@4.5.10 " 버전으로 설치가 완료되었습니다. 해당 강의에서는 2.x 와 3.x 버전을 말씀하시는데 .. 저는 4버전대로 설치가 완료되어서요.. 해당 버전을 다운그레이 해야 하는 지? 아니면 버전에 상관없이 강의 대로 진행하면 되는 지 여쭤봅니다. 그리고 검색을 해보니 vue --verson 을 입력하면 해당 CLI 버전을 확인할 수 있다고 하는데 .. 저는 오류 메세지가 보여집니다ㅠㅠ 제대로 설치된 게 맞는 걸까요?

이은혜 1 5

터미널 옆의 박스 안은 무엇인가요?

선생님은 박스 안에 [2:bash]라고 표시되는데, 저는 [1:zsh]라고 표시됩니다. 궁금해서 박스를 클릭해 보니, [1:zsh] 과 [2:node] 밖에 없고, [bash]는 아예 보이지도 않습니다. 무엇이 잘못된 것인지요?

jusanamsan33 1 1

서버가 실행되지 않습니다~

아래와 같은 에러메세지와 함께 서버가 실행되지 않네요ㅜ PS C:\test\learn-vue-js-master\vue-cli-complete> npm run serve > vue-cli@0.1.0 serve C:\test\learn-vue-js-master\vue-cli-complete > vue-cli-service serve npm ERR! vue-cli@0.1.0 serve: `vue-cli-service serve` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the vue-cli@0.1.0 serve script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm WARN Local package.json exists, but node_modules missing, did you mean to install? npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\User\AppData\Roaming\npm-cache\_logs\2019-11-03T14_49_45_990Z-debug.log

armani 1 2

현재 윈도우를 사용중입니다.

VSCode에 있는 cmd창에서는 npm run serve 명령어를 입력하는것과 윈도우 cmd창을 따로 불러서 실행하는것 이 둘은 어떤 차이가 있나요???

후루루룹 1 1

질답

멘토링

멘토링 신청
장기효(캡틴판교)