프로그래밍/Vue (4) 썸네일형 리스트형 [Vue] Component 컴포넌트 사용에는 전역적인 방법과 지역적인 방법이 있는데, 여기서는 가장 많이 사용하는 지역적인 방법만 다룬다. 1. 컴포넌트 생성 nav-component.vue Processing Center Workspace item one item two item three item four item one item two item three Info Orders 2. 컴포넌트 사용 Home me 사용하고자 하는 부모vue에서 컴포넌트 import 및 components 에 등록 [Vue] element-ui 1. 설치 npm i element-ui -S 2. main.js 코드 추가 import Element from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; ... 생략 Vue.use(Element, { size: 'small', zIndex: 3000 }); ... 생략 [Vue] Router 1. 뷰 라우터 설치 npm install vue-router --save 2. 라우터 폴더 및 index.js 파일 생성 router -> index.js 3. 라우터로 보여줄 views 작성 Home.vue Home me About.vue About vue 4. index.js 파일에 코드 작성 import Vue from 'vue' import Router from 'vue-router' // 연결할 컴포넌트 작성 import Home from '@views/Hoem' import About from '@views/About' Vue.use(Router) export default new Router({ mode: 'history', // history 모드는 자연스러운 url 가능, 지정하지 않으.. [Vue] slots 자식컴포넌트를 재활용하여 각각의 부모컴포넌트에서 쓸 수 있다. 사용법 1) 부모 컴포넌트에서 자식 컴포넌트의 태그 사이에 자식컴포넌트에 주고자 하는 데이터를 쓴다. 부모.vue data 이전 1 다음