# vue 강의

###### tags: `냥하` `강의`

https://www.inflearn.com/course/vue-js

## 강의에서 다루는 내용
1. vuejs를 이용한 웹 서비스 구현 절차
2. 실무 프로젝트 진행 방식(컴포넌트, 라우터, API, 스토어)
3. 컴포넌트 디자인 패턴과 자바스크립트 비동기 처리
4. Mixins과 HOC를 이용한 컴포넌트 재활용 방법
5. 외부 라이브러리 모듈화 및 실무 프로젝트 구성 방법
6. 사용자 경험을 높이는 라우터 설계 방법과 고급 라우터 패턴

vetur,TSlint, Auto Close Tag, live server 플러그인 설치
theme: night owl

스타일 가이드: https://vuejs.org/style-guide/

//프로젝트 셋팅
npm install -g @vue/cli
vue init webpack-simple [이름]
vue create cli3

### Vue CLI 2.x vs Vue CLI 3.x
- 명령어
- 2.x : `vue init '프로젝트 탬플릿 이름' '파일 위치'`
- 3.x : `vue create '프로젝트 이름'`
- 웹팩 설정 파일
- 2.x : 노출 o (webpack.config.js)
- 3.x : 노출 x (라이브러리 내부적으로 처리)
- 프로젝트 구성
- 2.x : 깃헙의 템플릿 다운로드
- 3.x : 플러그인 기반으로 기능 추가(npm install 바로 같이 함)
- ES6 이해도
- 2.x : 필요 x
- 3.x : 필요 o

<img width="365" alt="image" src="https://user-images.githubusercontent.com/48500209/160731905-5f42b809-7d76-4bd0-834e-df75750663f7.png">

`npm run serve` : vue cli service를 이용하여 serve

### ESLint 도구 소개와 사용해야 하는 이유?
자바스크립트 해석기가

트레일링 콤마 - trailing comma

//컴마를 찍도록 유도
components: {
    '컴포넌트 이름': 컴포넌트 내용,
}

=> 오류가 덜 나도록 습관화

#### ESLint 해제하기
1. 컴포넌트마다 `<script>` 태그 안에 `eslint-disable`넣어서 해제해주기
2. vue.config.js 파일에서

module.exports = {
    lintOnSave: false
}

## 라우터 기본

npm i vue-router --save

---

## npm 전역 설치 경로
`/usr/local/lib/node_modules`