반응형 컴퓨터153 [Vue3] Module not found: Error: Can't resolve '@fullcalendar/daygrid, interaction' (FullCalendar.js) 1. 문제발생 2. 원인찾기 3. 문제해결 1. 문제발생 작업중인 프로젝트의 데이터 바인딩 시 calendar 형태로 표현해야된다고 해서 FullCalendar.js vue 버전을 찾아 install 을 했습니다. https://fullcalendar.io/docs/vue Vue Component - Docs | FullCalendar FullCalendar seamlessly integrates with the Vue JavaScript framework. It provides a component that exactly matches the functionality of FullCalendar’s standard API. This package is released under an MIT licens.. 2023. 5. 9. [Vue] 뷰 router 4버전 설치 및 사용_ nested routes (5) 뷰.js 에서 사용하기 뷰의 router.js 의 children 에 array로 적어주면 사용가능 const routes = [ { path: "/detail/:id", component: DetailContent, children:[ { path: "info", component:InfoPage }, { path: "post", component:PostPage }, ] }, ]; 주소/detail/10/info 주소/detail/100000/post 이런 주소 사용 가능😃 nested routes nested routes 가 뭐냐면 하위 URL 경로를 가지는 라우트를 구성하는 것 티스토리 글쓰고있는 주소인데 주소/어쩌고/어쩌고 이렇게 되어있음 어쩌고~~ 가 하위 url 경로임 끗 2023. 4. 3. [Vue] 뷰 router 4버전 설치 및 사용_ url parameter (4) 뷰js 에서 사용하기 뷰의 router.js 의 path 에 /detail/:id 꼴로 적어주면 url parameter 를 사용할 수 있음 const routes = [ { path: "/detail/:id", component: DetailContent, }, ]; + /detail/:id/:id2/:id3 이렇게 파라미터 여러개 전달 가능 https://gallery-k.tistory.com/408 [Vue] 뷰 router 4버전 설치 및 사용_ router 와 route (2) https://router.vuejs.org/guide/ ⬆⬆ vue-router 4 참고... 1. router router 는 페이지 이동관련 기능 $router.push('/detail/0') 원하는 페이지로 이동 .. 2023. 4. 3. [Vue] 뷰 router 4버전 설치 및 사용_라우터 주요 태그 종류 (3) https://router.vuejs.org/guide/ vue-router 4 참고... 주요기능 1. router-view 2. router-link 홈 리스트페이지 3. named views 여러개 컴포넌트를 보여줄 때 /list 방문 시 여러 컴포넌트들을 한번에 보여줄 수 있음 + 등등....😗 redirect 도 있음 찾아보면 나옴 2023. 4. 1. [Vue] 뷰 router 4버전 설치 및 사용_ router 와 route (2) https://router.vuejs.org/guide/ ⬆⬆ vue-router 4 참고... 1. router router 는 페이지 이동관련 기능 $router.push('/detail/0') 원하는 페이지로 이동 $router.go(1) 앞으로 한페이지 이동 $router.go(-1) 뒤로가기 한번 (-2는 두번) 제목 2. route $route: 현재 URL 정보가 담겨있음 $route.params: 현재 URL 정보의 파라미터 (여러개 존재할 수 있음) $route.params.id: 현재 URL 정보의 id 파라미터 {{블로그글[$route.params.id].title}} 2023. 4. 1. [Vue] 뷰 router 4버전 설치 및 사용 (1) 1. 설치npm install vue-router@4 yarn add vue-router@4 2. main.js 에 라우터 세팅import router from './router' // 원래 여기서 라우터를 설정을 하는데 // 코드가 기니까 router 파일을 따로 만들어서 import 한다. createApp(App).use(router).mount('#app') 3. router.js 만들기import { createWebHistory, createRouter } from "vue-router"; const routes = [ { path: "/list", component: DetailList.vue, }, ]; const router = createRouter({ history: createWeb.. 2023. 4. 1. [Vue] 뷰에서 bootstrap 설치 (5버전) https://getbootstrap.com/ 사이트 접속 vue 프로젝트 경로에 다음 명령어로 bootstrap 5 설치 npm i bootstrap@5.3.0-alpha1 main.js 에 다음 파일 import import 'bootstrap' import 'bootstrap/dist/css/bootstrap.min.css' 2023. 4. 1. [Vue] 뷰 component 사용법 및 정리 컴포넌트화 시키면 좋은 거 다른 곳에서 쓸거 같을 때 (재사용해야될 때) 라우터화 시킬 때 (라이브러리) html 이 너무 복잡하고 길 때 순서 💜 자식 1. 컴포넌트화 시킬 자식 파일 만들기 이름은 multiword 로 짓기 (DetailModal.vue ◀◀ 이런 식으로) 2. 자식컴포넌트 name key : 자식컴포넌트 이름 value export default { name:'DetailModal', // 생략 } 💜 부모 1. 부모컴포넌트에 import 시켜주기 // templete 태그 밖에다가 해준다. import DetailModal from './DetailModal.vue'; 2. 부모컴포넌트 components key : 자식컴포넌트 이름 value export default { com.. 2023. 4. 1. 이전 1 2 3 4 5 6 7 ··· 20 다음 반응형
