[Vue.js][유튜브 강의 노트] 개발자의품격_한시간만에 끝내는 Vue.js 입문 #1

학습동기

앞으로 Vue.js의 쓰임이 많아 질거란다(2021년 하반기 유튜버 개발자의 품격, 빵형님의 공통적 견해).

그래서 궁금해 하던 차였다.

긴 강의는 부담이 되어서 일단 이 강의를 선택해 맛이라도 보려고 했다.

Vue.js 설치시 npm을 사용하기 때문에,

Node.js를 먼저 학습하기를 권한다.

---

학습내용

1. 강의영상

https://youtu.be/sqH0u8wN4Rs

유튜버 개발자의 품격님의 "한시간만에 끝내는 Vue.js입문"강의 내용은 크게 두 파트로 나눌 수 있겠다.

본 페이지에는 Vue.js의 설치와 라우팅에 대한 내용을 다룬다.

 

2. vue cli 설치

C:\workspace\vuejs>npm install -g @vue/cli

 

3. test 프로젝트 생성

C:\workspace\vuejs>vue create test

Vue CLI v4.5.15 ? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
   Default (Vue 3) ([Vue 3] babel, eslint)
   Manually select features

반드시 Vue 2를 선택하자!

 

4. vue 라우터 설치

C:\workspace\vuejs\test>npm install vue-router --save

 

5. vue용 bootstrap 설치

https://bootstrap-vue.org/docs

BootstrapVue

C:\workspace\vuejs\test>npm install vue bootstrap bootstrap-vue

 

6. vscode Extension 설치

이 부분은 본 동영상 강의에는 나오지 않는다.

하지만 vue파일 편집시 자동완성 기능 등을 사용하기 위해 설치한다.

vscode에서 Extension: Vue VSCode Snippets 인스톨,

vscode에서 vue파일에 대한 자동완성 가능해진다.

 

7. 학습 중 작성한 코드

// C:\workspace\vuejs\test\src\main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

// https://bootstrap-vue.org/docs 
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

Vue.use(BootstrapVue)
Vue.use(IconsPlugin)

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'


Vue.config.productionTip = false

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

---

<!-- C:\workspace\vuejs\test\src\components\layout\Header.vue -->

<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>

---

<!-- C:\workspace\vuejs\test\src\App.vue -->

<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <Header />
    <!-- 라우팅 -->
    <div id="content" class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
import Header from './components/layout/Header.vue'

export default {
  name: 'App',
  components: {
    Header,
  },
};
</script>

<style></style>

---

<!-- C:\workspace\vuejs\test\src\views\Home.vue -->

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

---

<!-- C:\workspace\vuejs\test\src\views\About.vue -->

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

---

// C:\workspace\vuejs\test\src\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; // 동영상 강의 화면에는 나오지 않으나 추가해야 할 코드

 

8. 코드 실행

C:\workspace\vuejs\test>npm run serve

 

9. 경험한 에러 및 해결

굵직한 에러 경험은 2가지 였는데,

첫 번째는 router.js에 다음의 코드가 빠진 경우에 발생한 에러다.

export default router; // 동영상 강의 화면에는 나오지 않으나 추가해야 할 코드

 

두 번째는 App.vue에 Header를 header로 오기하여 발생한 에러다.

20:5 error The "Header" component has been registered but not used vue/no-unused-components

위와 같은 에러 메시지를 볼 수가 있는데,

아래의 코드와 같이 Header.vue를 import하고 components에 담아 export하여, template에서 사용하는 과정을 유념하면 될 듯 하다!

<!-- C:\workspace\vuejs\test\src\App.vue -->

<template>
  <div id="app">
    <Header /> <!-- Header 대소문자 오기 유의 하라! -->
    <div id="content" class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import Header from './components/layout/Header.vue' // Header 대소문자 오기 유의 하라!

export default {
  name: 'App',
  components: {
    Header, // Header 대소문자 오기 유의 하라!
  },
};
</script>

<style></style>