웹에 대한 것들 끄적끄적

vue-router 설치하기 run serve되고있던 터미널 종료 후 새 터미널을 연다 아래 명령어를 입력한다. npm install vue-router@4 라우터 셋팅하기 src 폴더 하위에 router.js를 만들어 아래 코드를 복붙한다. import { createWebHistory, createRouter } from "vue-router"; import 컴포넌트명 from "./components/컴포넌트.vue"; const routes = [ { path: "/경로", //이 경로로 접속을 하면 component: import해온 컴포넌트, //이 컴포넌트를 보여줘! } ]; const router = createRouter({ history: createWebHistory(), routes..

vue/no-multiple-template-root App.vue에서 안에 nav와 div를 짜고있는데 이런 에러가 발생했다. blog 폴더만 오픈폴더 했어야했는데 blog의 상위 폴더까지 오픈폴더하고 있으니 생긴 에러란다. 즉, 현재 앱의 루트를 폴더의 루트로 해야한다는 것이다. List.vue 컴포넌트 생성하기 components 폴더 안에 List.vue를 생성 후 마크업한다. App.vue에 List 컴포넌트 Import하기 더미데이터 생성 assets 폴더 하위에 blog.js 파일을 만들어 더미데이터를 넣고 export 해준다. 이 더미데이터는 Array다. export default [ { title: "스위트홈 시즌2", content: "욕망이 괴물이 되는 세상. 그린홈을 떠나 새로운 ..

Vue 설치하기 VS Code에서 생성하고자 하는 폴더를 오픈 후 터미널을 연다 npm install -g @vue/cli 프로젝트 폴더 생성하기 vue 설치를 완료했다면 터미널에서 아래 명령어를 입력한다. vue create blog(프로젝트명) blog 폴더로 이동하기 터미널에서 아래 명령어를 입력하여 blog 폴더로 이동한다. cd blog 작업 미리보기 터미널에서 아래 명령어를 입력하면 작업중인 것을 미리 볼 수 있다. npm run serve Bootstrap 설치하기 이번에는 부트스트랩을 이용하여 UI를 꾸밀 것이기 때문에 부트스트랩을 설치한다. 첫번째 방법 - CDN https://getbootstrap.kr/ 에서 우측 상단에 원하는 버전 선택 CDN link를 publick/index.h..