Vue.js 시작하기

[ vue.js 공식문서 ]
https://v3.ko.vuejs.org/guide/introduction.html

Vue.js는 여러가지 방법으로 설치가 가능하다.

1. CDN
   프로토 타이핑 또는 학습목적에 적합

<script src="https://unpkg.com/vue@next"></script>

2. npm
   대규모 애플리케이션을 구축할 때 권장.

// latest stable
npm install vue@next

3. CLI
   https://cli.vuejs.org/guide/creating-a-project.html

// vue를 전역에서 사용할 수 있도록 글로벌 설치
npm i -g @vue/cli

프로젝트 생성
npm으로 vue/cli를 설치함으로써 vue명령어를 사용할 수 있게 되었다.
이를 이용하여 프로젝트를 생성한다.

vue create hello-world

vue라는 확장자를 가진 파일들은 하단 사진과 같이 3개로 나뉘어 구성되어있다.

템플릿 가져와서 새 프로젝트 생성하기

npx degit ParkYoungWoong/webpack-template-basic vue3-webpack-template
// npx degit 계정일음/저장소이름 다운받을 경로
// npx: degit을 설치하지 않고도 사용할 수 있는 nodejs명령어
// degit: 원격 저장소 github에 있는 특정 저장소를 현재 로컬 경로에 다운로드
// npx로는 버전관리가 없는 새로운 프로젝트를 다운로드 VS git clone은 버전까지 한꺼번에 다운되어 프로젝트를 이어서 진행

// @next를 붙여야만 최신 vue가 설치된다.(현재는 3가 최신이므로 vue3설치됨)
npm i vue@next

// 스타일관련 로더 설치
npm i -D vue-loader@next vue-style-loader @vue/compiler-sfc

// 특정한 파일들을 읽어서 브라우저에 출력해줄수있는 웹팩의 로더 설치
npm i -D file-loader

// eslint 설치
npm i -D eslint eslint-plugin-vue babel-eslint

<eslint 설정시>
root에 .eslintrc.js 파일 생성.
내부에 작성할 규칙들은 eslint-plugin-vue 페이지에서 확인해볼 수 있다.
https://eslint.vuejs.org/user-guide/#installation

Vue에서 사용하는 조건문과 반복문

<template>
  <h1 @click="increase">
    {{ count }}
  </h1>
// v-if를 통해서 조건문을 사용하여 조건에 따라 띄울 수 있다.
  <div v-if="count > 4">4보다 큽니다!</div>
</template>
<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increase() {
      this.count += 1;
    },
  },
};
</script>
<style>
h1 {
  font-size: 50px;
  color: royalblue;
}
</style>

Directive란?
' v- ' 로 시작하는 vue.js 에서 제공하는 html속성
ex) v-if, v-for ...