[VUE + TYPESCRIPT] vuetify 설치 + VueDraggableResizable 사용하기

VUE.JS 목록

 

Vuetify 설치

## vue 프로젝트 설치
$ vue create test-project

## 생성된 폴더로 진입
$ cd test-project

## vuetify 추가
$ vue add vuetify

## default로 설치
? Choose a preset: (Use arrow keys)
  Configure (advanced)
> Default (recommended)
  Vite Preview (Vuetify 3 + Vite)
  Prototype (rapid development)
  Vuetify 3 Preview (Vuetify 3)
  
## VSCode로 프로젝트 열기
$ code .

## 서버 구동
$ npm run serve

 

Draggable 설치

$ npm install --save vue-draggable-resizable

 

shims-vue.d.ts

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

declare module 'vue-draggable-resizable'

declare module 'vue-draggable-resizable' 추가

 

 

HelloWorld.vue

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <vue-draggable-resizable :parent="true">
          <v-img
              :src="require('../assets/logo.svg')"
              class="my-3"
              contain
              height="200"
            />
          </vue-draggable-resizable>
      </v-col>
      ...
    </v-row>
  </v-container>
</template>

<script lang="ts">
  import Vue from 'vue'
  import VueDraggableResizable from 'vue-draggable-resizable'

  export default Vue.extend({
    name: 'HelloWorld',
    
    components: {
      VueDraggableResizable
    },
    ...
  })
</script>

VueDraggableResizable 콤포넌트를 추가하고

<vue-draggable-resizable /> 엘레먼트를 씌워줍니다.

 

 

참고:

https://github.com/mauricius/vue-draggable-resizable

 

 

 

 

 

 

VUE.JS 목록