vue + jpa project (4) - Vue 프로젝트 초기 생성 및 홈화면 기능

이제 Vue 프로젝트를 기본생성하고 홈화면 기능을 추가 한다.

 

1. Vue 프로젝트 초기 생성

우선 탐색기에서 본인이 프로젝트를 관리하기 위한  큰 폴더 하나를 만들자. 나는 vuejs3-project라고 만들었다.

그리고 cmd 창이나 파워쉘 창에서 해당 폴더 위치로 이동한 뒤에 "vuejpaproject" 라는 이름으로 프로젝트를 생성한다.

cd C:\본인경로\vuejs3-project
vue create vuejpaproject

이미지처럼 뜨면 디폴트로 Vue3 버전이 선택되어 있는데 그대로 엔터를 누르면 설치가 진행된다.

설치가 끝나면 친절하게도 cd vuejpaproject, npm run serve 를 보여주어 어떻게 실행하는지를 알려준다.

그리고 실제로 따라 해보면 실행이 되고 주소를 알려준다. vue create로 생성하면 기본포트가 8080 이 된다.

한번 실행해보면  우측과 같이 잘 실행된다.

위의 실행창에서 Ctrl + C 를 누르면 "일괄 작업을 끝내시겠습니까 (Y/N)?" 가 뜨는데 어떤걸 선택해도 종료된다. 

왜 물어보는지는 모르겠다. 그리고 어짜피 페이지 이동을 해야하기 때문에 그걸 지원하는 vue-router를 아래와 같이

실행하여 설치한다. (위치는 vuejpaproject 폴더에서이다. ) 

npm i --save vue-router

 

VSCode를 실행하고 위의 vuejs3-project 아래에 생성한 프로젝트를 열어보자. 마우스 우클릭에서 '작업 영역에 폴더 추가'를 클릭하고 생성한 프로젝트 폴더를 선택하고 추가하면 우측과 같이 보여진다.

* 작업을 하기전에 Vue의 화면 명칭은 기본이 두글자 이상의 조합으로 만들어야 한다.

  (기본적으로 한문자면 오류를 발생한다. 예를 들어서 Person.vue, Home.vue, User.vue)

  하지만 꼭 이런 게 아닌 경우도 있기 때문에 한단어 파일명으로도 작업이 가능하도록 vue.config.js 파일을 열어서

  아래와 같이 한 줄을 추가하자.

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

 

2. 홈화면 기능 추가

    여기에서는 라우터 기능과 콤포넌트 기능이 추가된다. 라우터는 /router 폴더에 콤포넌트는 /views 폴더로 구분해서 

    관리되도록 한다.  (폴더를 생성한다)

     /views/common/Home.vue 파일을 아래와 같이 생성한다.  

<template>
  <div align="center">
    <h1>환영합니다.</h1>
    <p>{{getTime()}}</p>
  </div>
</template>

<script>
export default {
  name: 'Home',
  setup() {
    const getTime = () => {
      return new Date().toString()
    }

    return {
      getTime,
    }
  },
}
</script>

   /router 폴더 아래에 home.js, routers.js, router.js 를 각각 만들고 아래와 같이 생성한다.

// home.js
import Home from '@/views/common/Home.vue'

export const HomeRouters = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

// routers.js
import { HomeRouters } from './home.js'

const routes = [
  ...HomeRouters,
]
export default routes

// router.js
import { createRouter, createWebHistory } from 'vue-router'
import routes from './routers.js'

export const router = createRouter({
  history: createWebHistory(),
  routes,
})
export default router

최종적으로 프로젝트 전체에 해당하는 js인 main.js 에 아래와 같이 추가한다.

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/router.js'

const app = createApp(App)
app
  .use(router)
  .mount('#app')

 순서대로 본다면 home.js는 대분류 단위 업무 별 라우터이고 (이것으로 업무 단위 메뉴를 구성할 수 있다) 

 그것을 routers.js 에 포함을 시키고 다시 그것을 router.js 에 포함시키고, 최종적으로 main.js 에 포함을 시켜서 동작하는 

 방식이다. 향후 업무가 늘어나면 home.js 같은 파일을 추가하고 그것을 routers에 포함만 시키면 된다.

 

 모두 수정이 되었다면 그냥 화면을 다시 (열어)보자. pwa 화면은 소스가 수정되면 자동 반영 된다.

이렇게 뜨면 반영이 잘 된 것이다.