[NUXT.JS/VUE.JS] 시작하기(2) - Navigation Bar를 만들자

저번 포스팅에 localhost:3000에 성공했다면 프로젝트폴더가 생성되어 있을것이다.

지난 포스팅에서 따로 설정 안했다면 C드라이브 -> USER -> ADMIN(또는 USER) -> 프로젝트명 폴더

 

nuxt라는것이 vue.js를 위한 서버사이드렌더링 프레임워크이기 때문에 .vue로 되어있는 파일들을 수정하려면

프로그램이 필요한데, 여기서는 visual studio code 라는 프로그램을 사용하려고 한다

비쥬얼스튜디오코드

Visual Studio Code - Code Editing. Redefined

여기서 다운로드를 하고 쭈욱 확인확인 설치

 

왼쪽 위에 file -> open folder로 아까 지정된 폴더를 열어주자

 

그러면 구조가 보일것이다.

그러면 실행하고 있었던 cmd를 끄고, visual studio code에서 제공하는 terminal을 이용해보도록 하자

우선 터미널을 만들어주고,

 

extensions에서 npm을 terminal에서 사용할수 있도록 다운로드 받아준다

Vetur은 vue를 사용함에 있어 편리한기능을 재공해주는 플러그인이고

azure repos 이건 쉽게 svn기능이라고 생각하면 될듯 싶다. (선택사항)

 

더 자세한 내용은 vetur -> https://github.com/vuejs/vetur

vuejs/vetur

azure repos -> https://azure.microsoft.com/ko-kr/services/devops/repos/

Azure Repos - Git 리포지토리 | Microsoft Azure

자이제 새로 튀어나온 terminal 창에서 npm run dev를 입력해보자

 

그러면 정상적으로 실행이 될것이다. 저 error부분은 무시해도 상관없다

 

 

 

그럼이제 본격적으로 navbar를 만져보자

nuxt에 새로운 폴더를만들자 여기서는 commands라고 하겠다

그리고 그밑에 TheNavBar.vue 파일을 하나 생성하자

 

 

 

 

ThaNavbar의 내용

<template>

<nav class="nav">

<div class="logo">

<a href="#" class="logo text-lg">

Nuxt Fundamentals

</a>

<span class="subheader">A Vue School course></span>

</div>

</nav>

 

</template>

 

<script>

export default {

 

}

</script>

 

<style scoped>

nav{

display: flex;

justify-content: space-between;

align-self: center;

margin-bottom: 70px;

font-weight: lighter;

letter-spacing: 0.5px;

}

.nav .logo{

display: flex;

flex-direction: column;

justify-content: center;

}

.nav .logo .subheader{

opacity: 0.70;

font-size: 0.9rem;

color:white;

}

.nav .nav-content{

font-size: 1rem;

 

}

.nav-content ul{

display:flex;

list-style: none;

}

 

.nav-content ul li{

padding: 2px 10px;

}

.nav-content ul li:not(:first-of-type){

border-left: 1px solid rgb(255, 255, 255,0.2);

 

}

</style>

html 태그는 코드삽입하면 이상한 모습으로 나와서... tistory어렵네.. 아무튼 이부분은 css적인 요소라서 설명은 패스하고,

layouts -> default.vue에 이 TheNavbar.vue를 추가시켜보자

 

<template>

<div class="container">

<TheNavbar/>

<nuxt/>

</div>

</template>

<script>

import TheNavbar from '@/layouts/commands/TheNavbar'

export default {

components:{

TheNavbar

}

}

</script>

 

<TheNavbar/> 로 들어갈 위치에 넣어준다

<nuxt/> 이건 맨처음 실행될때 로고부분

 

<script>에 Navbar위치 참조하여 import 시켜주면 끝

 

이 default.vue는 모든 화면에서 적용이 되는것이기 때문에 어느 페이지를 가든 <div class = "container"> 가 있다면   적용이 될것이다

 

그렇다면 페이지하나를 더 만들어서 체크해보자

pages라는 폴더가 이미 있을텐데, 거기에 post.vue를 만들고,

 

<template>

<div class="container">

<article>

<h1 class="title">What is Balut?</h1>

<p>If someone placed balut on your plate, you might think they were serving you a hardboiled egg. That is, until you cracked it open and a fully intact duck embryo spilled out. Balut, considered a delicacy in many Asian countries, is produced when fertilized duck eggs are placed in warm sunlight. After about eight days, the eggs are held up to the light and checked to ensure that the budding embryo is ready. Then, the eggs are cooked and served with a dash of salt and a few squirts of lemon juice.</p>

</article>

</div>

</template>

 

<script>

export default {}

</script>

 

<style scoped>

.container {

display: flex;

justify-content: space-between;

line-height: 1.5;

}

article * {

margin-bottom: 1rem;

}

aside {

min-width: 280px;

max-width: 280px;

padding-left: 2rem;

}

.title {

font-size: 2rem;

}

</style>

 

저장. 그리고 localhost:3000을 들어가보면, 

 

왼쪽에 이상한놈이 하나 추가되어있을것이다.

방금만든 post로 들어가보자

 

localhost:3000/post

상단에 작성하지도 않은 녀석이 네이게이션 바로 적용중이다.

 

그러면 navbar를 클릭했을때, 메인화면으로 돌아올 수 있도록

작성해보자.

TheNavbar.vue에서

link를 index로 지정을 해주고 저장후 실행!