[Vue.js][유튜브 강의 노트] 개발자의품격_한시간만에 끝내는 Vue.js 입문 #1
학습동기
앞으로 Vue.js의 쓰임이 많아 질거란다(2021년 하반기 유튜버 개발자의 품격, 빵형님의 공통적 견해).
그래서 궁금해 하던 차였다.
긴 강의는 부담이 되어서 일단 이 강의를 선택해 맛이라도 보려고 했다.
Vue.js 설치시 npm을 사용하기 때문에,
Node.js를 먼저 학습하기를 권한다.
학습내용
1. 강의영상
유튜버 개발자의 품격님의 "한시간만에 끝내는 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
Quickly integrate Bootstrap v4 components with Vue.js
bootstrap-vue.org
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>