CLI 와 파일에 대한 설명, Vuetify 설치, 컴포넌트 생성 및 사용

 

node_modules 안에는 많은 폴더들이 들어있다.

2.x 대 버전에서는 원래는 npm instlal 이라는 명령어를 통해서 node_module을 설치해야 한다.

자바스크립트 프레임워크는 여러가지 부품을 가지고 조립을 한다라고 생각하면 되고,

node_modules는 그 부품들을 모아놓은 곳이라고 생각하면 된다.

 

node_modules 를 설치할게 무엇이고, 버전정보를 적어두는 곳이 package.json 이라고 생각하면 된다.

어떤 프로젝트는 A라는 모듈이 필요하고, ~버전을 사용중이다 라는 걸 정의해주고

npm run serve를 통해서 로컬 호스트 8080 포트에 프로젝트를 올릴 수 있따.

 

public 폴더

index.html : 기본이 되는 .html

src : 폴더 안에 컴포넌트들과 vue파일들이 저장되어 있습니다.

assets : 정적파일들을 모아놓는 곳이라고 생각하면 된다.

main.js :  App.vue를 구동시켜준다.

router.js : 라우터 조절

store.js : 전역상태 값을 조절해준다.

App.vue : 가장 기본이 되는

 

Plug-in

개발 중에도 어느 시점에서든지 새롭게 개발환경을 위한 플러그인들을 추가할 수 있다.

Vue 에서 공식적으로 제공하는 플러그인에는 @vue/cli-plugin 이라고 검색하면 정보를 얻을 수 있다.

npm이나 다른 곳에 배포되어 있는 모듈들의 경우 vue-cli-plugin- 이라고 검색하면 정보를 얻을 수 있다.

 

Vuetify라는 것을 추가해보겠습니다.

 

Vuetify

쉽게 이야기하면 Bootstrap과 같은 기능을 제공해준다, 하지만 조금 다른 점은 Vue에 특화되어있고, 컴포넌트 기반으로 움직인다는 것이다. 

 

https://vuetifyjs.com/ko/

Vue Material Design 컴포넌트 프레임워크 — Vuetify.js

UI Component에 Button 으로 가보면

<template>
  <div class="text-center">
    <v-btn>Button</v-btn>
  </div>
</template>

v-btn 태그는 컴포넌트이다, 이 컴포넌트를 Vuetify 내에서 만들어서 적용하게 되면 해당 컴포넌트를 사용할 수 있다.

이 컴포넌트가 적용되는 시점에 css나 js를 입력하지 않아도 사용할 수 있다.

 

지원하는 브라우저에는 예전 버전의 익스플로러는 지원하지 않는다.

Vuetify 설치하기

> vue add vuetify

> CHoose a preset: Configure(advanced)

> Use a pre-made template? Yes

> Use custom theme?  No

> Use custom properties (CSS variables)? No

> Select icon font (Use arrow keys)

- Font Awesome 5

> Use fonts as a dependency (for Electron or offline)? No

> Use a-la-carte components? No

> Use babel/polyfill? Yes

> Select locale? English

 

 

App.vue

<template>
  <div> // div 태그가 없다면 오류가 발생한다. template 태그 안에는 한 개의 태그로 묶여있어야 한다.
    <h1>{{title}}</h1>
    <p>{{ count }}</p>
    <button @click="count ++">추가</button> // button이 onclick 될 때 마다 +1씩 된다.
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: "안녕하세요.",
      count: 1,
    }
  }
}
</script>

하지만 우리가 App.vue에서 모든 기능들을 쓰는 것은 cdn으로 Vue를 Import 시켜서 한 파일에서 모든 코드를 작성하는 것과 크게 다르지 않다. 그렇다면 각각의 Vue파일들을 우리가 어떻게 다뤄야하는지 알아보자.

 

컴포넌트의 생성 및 사용

App.vue 가 위치하는 폴더에 Home.vue라는 파일을 생성해주고,

아래와 같은 태그들을 추가시켜줍니다.

 

1번 째 방법 import from

// Home.vue

<template>
    <div>
        <h1>{{ homeTitle }}</h1>
    </div>
</template>

<script>
export default {
    data (){
        return {
            homeTitle: '홈 입니다.'
        }
    }
}
</script>

App.vue 파일로 이동해서 외부에 만들어져있는 Vue 파일을 App.vue로 가져오기 위한 약속

규격은 import 입니다. import 로 가져올 수 있다. 

import HomeComponent 여기에서 내가 사용할 컴포넌트의 이름을 아무거나 적어줄 수 있다.

import HomeComponent from './Home.vue' // Home.vue를 가져와라 .vue는 생략가능

 

이제 HomeComponet를 가져왔는데 Component를 사용하기 위한 속성을 선언해줘야한다.

// App.vue

<template>
  <div>
    <h1>{{title}}</h1>
    <p>{{ count }}</p>
    <button @click="count ++">추가</button>
    <HomeComponent></HomeComponent> // import 한 이름으로 사용할 수 있다.
  </div>
</template>

<script>
import HomeComponent from './Home' // .vue 생략가능
export default {
  components: { // 가져온 컴포넌트를 사용하기 위해선 components 속성을 추가해야한다.
    HomeComponent
  }, // 쉼표 꼭 사용
  data () {
    return {
      title: "안녕하세요.",
      count: 1,
    }
  }
}
</script>

2번 째 방법 전체에서 하나의 파일을 불러오는 전역에서 해당 컴포넌트를 사용할 수 있게 선언

테스트를 위해 Status.vue를 생성해준다.

<template>
    <h2>{{ title }}</h2>
</template>

<script>
export default {
    data (){
        return {
            title: '상태 좋습니다.'
        }
    }
}
</script>

main.js 파일에가서 방금 생성한 컴포넌트를 전역으로 설정해주고 사용하면 된다.

main.js 파일은 Vue.js를 관장하는 역할을 한다.

// main.js

import StatusComponents from './Status' // .vue 생략

Vue.component('AppStatus', StatusComponents) // 컴포넌트명, 옵션

위와 같이 설정해주면 어느 곳에서든 다 사용이 가능하다.

<template>
  <div>
    <h1>{{title}}</h1>
    <p>{{ count }}</p>
    <button @click="count ++">추가</button>
    <HomeComponent></HomeComponent>
    <AppStatus></AppStatus> [!]
  </div>
</template>

<script>
import HomeComponent from './Home' // .vue 생략가능
export default {
  components: {
    HomeComponent,
  }, // 쉼표 꼭 사용
  data () {
    return {
      title: "안녕하세요.",
      count: 1,
    }
  }
}
</script>

 

main.js에서 선언한 <AppStatus> 는 어디서든지 다 사용할 수 있다.

'홈 입니다' 를 출력하는 Home.vue에 가서 <AppStatus> 를 추가해주면 '상태 좋습니다.' 도 같이 출력됩니다.