프론트 (4) 썸네일형 리스트형 vue3에서 ckeditor 사용방법(바인딩, 이미지 업로드 포함) 게시글을 작성시에 에디터는 필수로 들어가는 요소이다vue3와 어울리는 쓸만한 editor를 찾다 커스텀도 자유로이 가능한 ckeditor를 발견했다아래는 내가 사용한 ckeditor사용방법이다.1. ckeditor 패키지 설치npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic 2. ckeditor 설정import { createApp } from "vue";import { createPinia } from "pinia";import router from "@/routes";import CKEditor from '@ckeditor/ckeditor5-vue'import "@/assets/css/editor/content-s.. vue Multi-word오류(eslint) 해결책 vue에서 컴포넌트 이름은 여러개의 단어로 이루어져 있어야 한다며 이렇게 한 단어로 이름을 작성하고 vue파일을 만들면 오류가 나타난다. eslint설정에서 규칙으로 적용되는 곳에서 없애거나, 이름을 두가지 이상의 단어로 합쳐서 vue파일을 생성해야한다. export default { name: 'HomePage', // ... } 이런식으로 스크립트 부분에서 이름을 새로 지어줘도 된다. 추천하는 방식은 파일의 이름을 두 개 이상의 단어로 조합하여 만들기와 위와 같이 name을 script에서 따로 지정해주는 것이다. 취향에 따라서 방식을 정해 심각하진 않지만 거슬리는 오류를 해결해보자 Router-view 사용하기 1. Vue Router 설치 npm install vue-router 2. View폴더를 생성하고 그 안에 HomeView.vue를 생성 3. router 초기설정 하기 - 위 사진과 같이 router.js를 생성하여 아래의 코드를 입력한다. import { createRouter, createWebHistory } from "vue-router"; const routes = [ { path: "/", name: "HomeView", component: () => import("./View/HomeView.vue"), }, ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router; 4. m.. vue3 프로젝트 생성 1. Vue CLI 설치 npm install -g @vue/cli 2. vue 프로젝트 생성 vue create my-project-name 3. vue3 선택 4. vue3 기다리기 5. 실행하기 cd my-vuetify-project npm run serve 5. 개발 시작! 이전 1 다음
