Vue 시작하기 (1) | vue create, vuetify, form input

1. Vue Create로 프로젝트 생성

Vue 기본 프로젝트를 하나 생성합니다.

vue create (프로젝트명)
cd (프로젝트명)
npm i
npm run serve

vue create시의 옵션은 아래와 같이 설정했습니다.

[Vue 2] dart-sass, babel, typescript, pwa, router, vuex

 

2. Vuetify추가

vue add vuetify

명령어 입력 후 localhost:8080에 접속해보면, vuetify 디자인이 적용된 화면을 확인할 수 있습니다.

3. Vuetify 컴포넌트 사용해보기

vuetify 공식 페이지에서 버튼 컴포넌트를 하나 가져와 사용해보겠습니다.

https://vuetifyjs.com/en/components/buttons/#usage

Button component

 

Home.vue 파일에서 디폴트로 있던 <HelloWorld/> 컴포넌트를 삭제하고 v-btn 컴포넌트를 넣어보았습니다.

// Home.vue
<template>
  <div>
    <v-btn elevation="2">hello</v-btn>
  </div>
</template>

<script lang="ts">
  import Vue from 'vue'
  // import HelloWorld from '../components/HelloWorld.vue'

  export default Vue.extend({
    name: 'Home',

    components: {
      // HelloWorld,
    },
  })
</script>

 

왼쪽 위에 버튼이 보이네요. vuetify는 잘 적용된 것 같습니다.

 

4. Form 입력창 만들기

원하는 input을 넣을 수 있는 form을 만들어보았습니다.

// Home.vue.js
<template>
	<v-card
		elevation="2"
	>
		<v-form
		ref="form"
		v-model="valid"
		lazy-validation
		>
		<v-text-field
			v-model="name"
			:counter="10"
			:rules="nameRules"
			label="이름"
			required
		></v-text-field>
		<v-text-field
			v-model="numberValue"
			label="완료"
			single-line
			type="number"
		/>
		<v-text-field
			v-model="numberValue"
			label="수취거부"
			single-line
			type="number"
		/>
		<v-text-field
			v-model="numberValue"
			label="프레시백"
			single-line
			type="number"
		/>
		<v-text-field
			v-model="numberValue"
			label="미스캔"
			single-line
			type="number"
		/>
		<v-text-field
			v-model="numberValue"
			label="미배송"
			single-line
			type="number"
		/>
		<v-text-field
			v-model="numberValue"
			label="취소건"
			single-line
			type="number"
		/>
		<v-text-field
			v-model="numberValue"
			label="회수"
			single-line
			type="number"
		/>
		</v-form>
    	<v-btn elevation="2">hello</v-btn>
    </v-card>
</template>

<script lang="ts">
  import Vue from 'vue'
  // import HelloWorld from '../components/HelloWorld.vue'

  export default Vue.extend({
    name: 'Home',

    components: {
      // HelloWorld,
    },
  })
</script>

너무 가로로 길게 나오네요. 스타일을 좀 조절해보겠습니다.

sass 파일에 정의하는것이 좋지만, 지금은 임시로 Inline style로 정의하겠습니다.

form바깥은 감싸고 있는 v-card 컴포넌트에 width, margin, padding을 넣어주었습니다.

	<v-card
		elevation="2"
		style="width: 500px; margin: 20px auto; padding: 20px;"
	>