[Vue]처음으로 화면 띄워보기

아무런 설정없이 npm run serve/ npm run dev하면 로컬호스트 8080에 뷰화면이 뜨면서 서버가 돈다. 하지만 뷰 페이지 말고 나의 페이지를 만들려면?

 

1. index.html와 비슷한 역할을 하는 App.vue에 들어가서 수정하기. 

<div id="app"> 아래의 내용을 수정해준다. </div>

나같은 경우에는 img를 삭제함

 

2. components아래 HelloWorld.vue를 불러오는데, 이 컴포넌트 말고 내가 만든 컴포넌트 불러오게 하기.

Read.vue를 생성한다. 

<template>아래 작성하고 싶은거 대충 작성하고

<script>에는 export default{} 만 적어준다. 

 

3. data라는 디렉토리 생성하고 그 아래 index.js 생성

데이터답게 보고 싶은 데이터를 배열로 만든다. 

export default [
    {
        writer : '아이린',
        title : '소녀시대',
        content : '1'
    },
    {
        writer : '슬기',
        title : '레드벨벳',
        content : '2'
    },
    {
        writer : '조이',
        title : '레드벨벳',
        content : '3'
    },
]

 

4. router아래에 있는 index.js 수정

기본으로 있는 것 중에

import HelloWorld from '@/components/HelloWorld' 를

import Read from '@/components/Read' 로 수정

 

아래 메소드의 name과 component도 동일하게 수정

import Vue from 'vue'
import Router from 'vue-router'
import Read from '@/components/Read'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Read',
      component: Read
    }
  ]
})