Vue(ts)에 kedno ui 사용하는 방법 및 오류 해결

오늘은 kendo ui를 사용해서 vue의 게시판 ui를 구현하도록 해보겠습니다!!

 

이건 kendo ui의 그리드를 사용해서 구현한 게시판 프론트 입니다! (미완성)

 

Kendo ui 사용방법 

https://www.telerik.com/kendo-ui

홈페이지에 들어가서 자신이 사용할 프레임워크를 클릭 한 후  

상단의 DEMOS 버튼을 클릭 합니다!

 

그 후 밑줄 그어진 부분에 Data Grid / Chart 등등 이중에 하나를 클릭 한 뒤 왼쪽 보기중에 Getting started를 클릭해 주세요! 

 

그리고 TypeScript와 JavaScript 들 중에서 자신이 사용하는 언어를 클릭 하시면 (저는 가운데 있는 TypeScript를 사용합니다!)

사용방법이 섫명되어 있는데 그중에서 3번과 4번을 visual code 터미널에 입력하시면 됩니다!

(npm 사용하시는 분은 npm으로 yarn 사용자 분은 yarn으로 설치해주세요 ~ 저는 npm으로 설치 했습니다!)

그리고 밑줄 친 CSS를 사진의 main.ts에(사람들마다 index.js , index.ts , main.ts등 다 다를수 있습니다!) 밑줄 그은부분에 넣어주시면 됩니다!

그리고 나서 자신이 사용하고 싶은 ui 기능을 선택한 후 (저는 kendo ui의 grid-grouping 에서 Bassic 기능을 사용하기 위해서 선택 했습니다!)

EXAMPLE 옆에 있는 VIEW SOURCE를 클릭 한 뒤에 main.vue를 고대로 복사해서 자신이 사용할 컴포넌트에 넣어주면 완성이 됩니다!!

 

사용한 kendo ui

저는 kendo ui의 Grid-Grouping 의 Bascis과 Button-ChipList의 Selection Mode(Multiple Selection) , Editor-Overview 총 3가지를 사용 했습니다!

 

 

kendo ui 오류 해결 (Editor-Overview)

kendo ui 중 editor 기능을 사용하려는 도중 오류가 나서 확인을 해보니 Can't resolve './content-overview' in '/Users/imgwanhyeog/Documents/Dev/vue-node/vue-node-ts-board/vue/src/components' 라는 오류가 나서

확인을 해보니 content-overview.js가 제대로 연결이 안되어 있어서 그랬었네요 

 

kendo ui main.vue

<template>
  <div>
    <Editor
      :tools="tools"
      :content-style="{
        height: '690px',
      }"
      :default-content="content"
    />
  </div>
</template>

<script>
import { Editor } from "@progress/kendo-vue-editor";
import content from "./content-overview"; // 이 부분에 경로설정을 잘 해주시면 오류가 해결이 됩니다

export default {
  components: {
    Editor,
  },
  data() {
    return {
      tools: [
        ["Bold", "Italic", "Underline", "Strikethrough"],
        ["Subscript", "Superscript"],
        ["AlignLeft", "AlignCenter", "AlignRight", "AlignJustify"],
        ["Indent", "Outdent"],
        ["OrderedList", "UnorderedList"],
        "FontSize",
        "FontName",
        "FormatBlock",
        ["Undo", "Redo"],
        ["Link", "Unlink", "InsertImage", "ViewHtml"],
        ["InsertTable"],
        ["AddRowBefore", "AddRowAfter", "AddColumnBefore", "AddColumnAfter"],
        ["DeleteRow", "DeleteColumn", "DeleteTable"],
        ["MergeCells", "SplitCell"],
      ],
      content: content,
    };
  },
};
</script>

import content from "./content-overview"; // 이 부분에 경로설정을 잘 해주시면 오류가 해결이 됩니다!!