[Vue] 영화 검색 미니 프로젝트 환경설정

제론·2022년 6월 10일
0

[Vue] 공부기록!

목록 보기
4/6

뷰 공부

뷰 공부를 빠르게 진행해야 하는 상황이 돼서 바로 앱을 만들어 보려고 한다.

  • 리액트랑 비슷하고 패턴과 문법만 조금 다르다고 느껴진다.
  • 직접 만들어봐야 더 공부가 잘된다. 기본 개념 강의만 듣는다고 실력향상이 되지는 않는다.

패스트 캠퍼스 강의를 바탕으로 진행한다.

Let's get started!

multi-word-component 에러

  • ESlint 관련 설정 문제를 만났다
  • TodoList와 같이 multi word로 컴포넌트명을 만들라는 에러이다
  • 나는 vue cli로 프로젝트를 만들어씩 때문에 eslintrc 파일이 없다.
  • vue.config.js에서 lintOnSave:false 로 바꿔주면 에러가 뜨지 않는다.

route 구성

  • 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 적용

bootstrap 설치
npm i bootstrap-vue

  • scss에서 적용
    @import '../../node_modules/bootstrap/scss/bootstrap.scss'
  • App 컴포넌트에서 scss import
    <style lang="scss"> @import "./scss/main.scss"; </style>

vue-cli scss 적용

  • 설치
    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";
        `
      }
    }
  }
}```
profile
Software Developer

0개의 댓글