[JS][Node.js][Vue.js] Vuetify로 화면 꾸미기

Vue 생성

프로젝트를 생성하고자 하는 위치에서 Vue를 생성한다.

C:\Users\USER>npm install @vue/cli -g
C:\Users\USER\JS>vue create helloworld
manually select features -> babel만 선택 -> 3.x -> in dedicated

Vuetify 추가

C:\Users\USER\JS\helloworld>vue add vuetify
vuetify3 vue cli 선택

서버 실행

C:\Users\USER\JS\helloworld>npm run serve

위와 같이 실행하면 서버가 실행되며 주소창 localhost:8080 에서 Welcome Page를 볼 수 있다.

helloworld 파일에서 수정/추가하는 모든 소스는 서버를 실행하면 loclhost:8080 에 자동으로 적용된다.

Vuetify 사용해보기

텍스트 입력하기

<v-text-field></v-text-field> 를 통해텍스트를 입력하는 필드를 만들어 보자.

Src/App.vue ```vue

<br>

### 텍스트 받아오기

테스트를 입력했으면, 입력한 테스트를 받아와보자.

<br>

> Src/App.vue

```vue
<template>
  <v-app>
    <v-main>
      <v-text-field v-model="message"></v-text-field>
      
    </v-main>
  </v-app>
</template>

<script>
  data: () => ({
    message : "하이?"
  })
</script>

v-model="message": 입력필드의 값을 message라는 변수로 저장하는 것이다.

`````` : message에 저장되어 있는 데이터를 출력한다는 뜻이다.

data { message : "하이?" } : message의 데이터 값을 받아오며, 기본으로 “하이?” 가 저장된다.

위를 실행하면 아래와 같은 화면을 볼 수 있다.

입력필드의 값을 변경하면 아래에 출력되는 값도 함께 변경된다.