[Vue] Vue.js 입문

Vue.js

웹 프론트엔드 프레임 워크
컴포넌트 기반의 SPA를 구축할 수 잇게 해주는 프레임 워크

컴포넌트

• 웹을 구성하는 로고, 메뉴바, 버튼, 모달 등 웹 페이지 내의 다양한 UI 요소
• 재사용 가능하도록 구조화 한 것

SPA (Single Page Application)

• 단일 페이지 어플리케이션
• 하나의 페이지 안에서 필요한 영역 부분만 로딩되는 형태
• 빠른 페이지 변환
• 적은 트래픽 양
  (처음 로딩의 파일 사이즈가 커지는 단점)

Vue 시작하기

vue-cli 설치

npm install -g @vue/cli

Document에 test_vue 디렉토리 생성후

vue create test_vue 

default로 생성을 진행

vue-cli로 필요한 구성을 마쳤다.

npm run serve

localhost:8080으로 접속

정상적으로 설치가 된 모습이다.

라우팅 -> 처음에 모든 컴포넌트 페이지를 로드한 후 라우팅을 이용해 갱신할 화면만 갱신 하는 기법

vue에서 제공하는 라우터를 이용하기 위해 설치

npm install vue-router --save

이후 src/components에 layout 디렉토리 생성

해당 디렉토리 (layout) 안에 Header.vue를 생성

Bootstrap vue 디자인 이용하기

Bootstrap Vue <- 부트스트랩 Vue 페이지

Boostrsap vue 설치하기

npm install vue bootstrap bootstrap-vue

main.js에 아래 내용 추가하기

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// Import Bootstrap an BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

Header.vue

template 태그 안에는 html 코드,
script는 자바스크립트 코드가 들어감

<template>
<div>
  <b-navbar toggleable="lg" type="dark" variant="info">
    <b-navbar-brand href="#">NavBar</b-navbar-brand>

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-item href="#">Link</b-nav-item>
        <b-nav-item href="#" disabled>Disabled</b-nav-item>
      </b-navbar-nav>

      <!-- Right aligned nav items -->
      <b-navbar-nav class="ml-auto">
        <b-nav-form>
          <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
          <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
        </b-nav-form>

        <b-nav-item-dropdown text="Lang" right>
          <b-dropdown-item href="#">EN</b-dropdown-item>
          <b-dropdown-item href="#">ES</b-dropdown-item>
          <b-dropdown-item href="#">RU</b-dropdown-item>
          <b-dropdown-item href="#">FA</b-dropdown-item>
        </b-nav-item-dropdown>

        <b-nav-item-dropdown right>
          <!-- Using 'button-content' slot -->
          <template #button-content>
            <em>User</em>
          </template>
          <b-dropdown-item href="#">Profile</b-dropdown-item>
          <b-dropdown-item href="#">Sign Out</b-dropdown-item>
        </b-nav-item-dropdown>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</div>
</template>
<script>
export default {
    name: "header",
};
</script>

Boostrap Navbar 코드를 template 태그 안에 넣어준다.

src 폴더 안에 views 디렉토리 생성

Home.vue 파일 생성

<template>
    <div>
        <h1>Welcome to Home!</h1>
    </div>
</template>
<script>
export default {

};
</script>

같은 디렉토리에 About.vue 파일 생성

<template>
    <div>
        <h1>About Page</h1>
    </div>
</template>
<script>
export default {

};
</script>

프로젝트 최상위 디렉토리에서 Router를 사용하기 위해 router.js 생성

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './views/Home';
import About from './views/About';

Vue.use(VueRouter);

const router = new VueRouter({
    mode: "history",
    routes: [
        {path:'/',
        component: Home},
        {path:'/about',
        component: About}
    ]
});
export default router;

main.js에서 router import

main.js에 아래 임포트 구문 추가

import router from './router'

main.js 에서 router 정의

	router,
    render: h => h(App),
}).$mount('#app')

app을 마운트할 때 라우터를 사용할 수 있게하고

npm run serve

를 하면 강의에서는 정상적으로 작동했지만

뭔가 잘못했는지 에러가 발생했다.

이름에 관련된 에러인 것으로 보아 처음 프로젝트를 create 할때 린트를 설정하면서 이름에 관한 규칙들이 문제가 되는 것 같아 린트를 사용하지 않는 방향으로 해결하고자 한다.

lint 설정 끄기

vue.config.js

lintOnSave:false

위 구문을 추가해준다.

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false
})

예상치못한 17개의 경고와함께 아무것도 화면에 나타나지 않았다.. 처음부터 다시 따라해봐야할 것 같다