뷰 공부를 빠르게 진행해야 하는 상황이 돼서 바로 앱을 만들어 보려고 한다.
- 리액트랑 비슷하고 패턴과 문법만 조금 다르다고 느껴진다.
- 직접 만들어봐야 더 공부가 잘된다. 기본 개념 강의만 듣는다고 실력향상이 되지는 않는다.
패스트 캠퍼스 강의를 바탕으로 진행한다.
multi-word-component 에러
- ESlint 관련 설정 문제를 만났다
- TodoList와 같이 multi word로 컴포넌트명을 만들라는 에러이다
- 나는 vue cli로 프로젝트를 만들어씩 때문에 eslintrc 파일이 없다.
- vue.config.js에서
lintOnSave:false
로 바꿔주면 에러가 뜨지 않는다.
- route 설치
npm install vue-router@4
- main.js
createApp(App).use(router).mount(#app)
- router 폴더 생성, index.js 생성
import {createRouter, createWebHashHistory} from 'vue-router
- route 경로 설정 및 연결
export default createRouter({ // Hash와 history 모드가 있음 // 여기선 Hash 모드로 사용 -> https://google.com/#/search history: createWebHashHistory(), // pages // hppts://google.com/about routes: [ { path: '/',![](https://velog.velcdn.com/images/zerone/post/3a47e6eb-d934-4d9b-aeef-af268dea740a/image.png) component: Home }, { path: '/about', component: About } ] })
- App에서 렌더링
<template lang=""> <RouterView /> </template>
bootstrap 설치
npm i bootstrap-vue
- scss에서 적용
@import '../../node_modules/bootstrap/scss/bootstrap.scss'
- App 컴포넌트에서 scss import
<style lang="scss"> @import "./scss/main.scss"; </style>
- 설치
npm install --save-dev node-sass sass-loader
- 적용
Vue에서는 vue-loader 덕분에 Single File Component 구성의 .vue 파일 내에서 style 태그에 lang="scss" 요소를 추가하여 사용할 수 있다.<style lang="scss"> $bgColor: #232323; .className: { background: $bgColor; } </style>```
- vue.config.js 파일 설정
// vue.config.js module.exports = { css: { loaderOptions: { sass: { data: ` @import "@/styles/_variables.scss"; @import "@/styles/_mixins.scss"; ` } } } }```