0512 Vue CLI

@vue/cli 실행 환경

• NodeJS 설치 - LTS 버전(NPM 같이 설치됨)
• NPM을 이용한 @vue/cli 설치

NPM(Node Package Manager)

: 커맨드에서 써드파티 모듈(외부 모듈)을 설치하고 관리하는 툴

명령어

• npm init : 새로운 프로젝트나 패키지를 만들 때 사용(package.json이 생성됨)
• npm install package : 생성되는 위치에서만 사용 가능한 패키지로 설치
• npm install package : 글로벌 패키지에 추가. 모든 프로젝트에서 사용 가능한 패키지로 설치
  install 대신 i 로 쓸 수 있음

SFC(Single File Component)

: HTML(template) + JavaScript(script) + CSS(style) 를 모두 가지고 있는 .vue 파일

• <template>
  기본 언어 : html
  내용은 문자열로 추출되어 컴파일 된 Vue Component의 template 옵션으로 사용됨
• <script>
  기본 언어 : js
  ES6를 지원하여 import와 export를 사용할 수 있음
• <style>
  scoped 속성을 이용하여 현재 컴포넌트에서만 사용 가능한 css를 지정 가능

Vue-CLI(Command Line Interface)

: Vue.js 개발을 위한 시스템으로 Vue.js에서 공식으로 제공하는 CLI

Vue와 관련된 오픈 소스들의 대부분이 CLI를 통해 구성이 가능하도록 구현되어 있음

프로젝트 생성

cmd에서 작성

• 생성 : vue create <project-name>
• 생성 중 중지 : ctrl+c
• 실행 : npm run serve
• 프로젝트 생성 후 별도 플러그인 설치 : vue add <plugin-name>
• axios 추가 : npm install axios

프로젝트 구조

• main.js : Entry point
• App.vue : index.html 역할
• router 폴더 : 라우터 관련
• assets 폴더 : img 폴더
• views 폴더 : 화면(큰 틀) / <router-view>로 보이는 곳
• components 폴더 : view 내부에 보여줄 화면(큰 틀 내부에 갈아끼울 블록)
  ex: views/BoardView.vue 라는 화면 내부에 components/ArticleList.vue, components/ArticleRegist.vue 등이 이벤트에 따라 변경됨

에러노트

• 컴포넌트의 파일명은 반드시 합성어로 작성
• 경로에 특수문자나 공백 등이 들어가면 index.html 에러 발생
• error  Delete `␍`  prettier/prettier
  ; 윈도우의 줄바꿈 형식(CRLF)과 prettier의 형식(LF)이 달라 발생하는 문제
  → eslint 내부 rules에 "prettier/prettier": ["error", { "endOfLine": "auto" }] 추가
• route의 children의 경우, path에 자동으로 "/"가 들어가기 때문에 "/"를 추가하면 안됨