[Vuejs] Vue로 웹페이지 만들기 - router, vuex, veutify 설치

최근에 웹페이지를 하나 만들일이 생겼습니다. 간단한 페이지 이기는 한데, 그동안 너무 jquery만 한 것이 아닌가 싶어서, 이번에 오래간만에 Vuejs로 간단히 만들어 볼까 싶어서 조금 살펴보았습니다. 오래간만에 했더니 꽤나 이것저것 더듬더듬 거리면서 설치를 했네요. 간략히 정리를 해보겠습니다.

Vuejs Website(한글도 잘 되어 있습니다.)

---

Vuejs 설치

• 많은 방법이 있겠지만 역시나 Cli를 이용해서 설치하는것이 가장 편리합니다.Vue cli website
• 처음부터 한땀한땀 설치하면 오래걸리기도 하고 생각보다 난관에 자주 봉착하기 때문이지요.

npm 또는 yarn 으로 Vue-Cli 설치

npm install -g @vue/cli
# OR
yarn global add @vue/cli

프로젝트 만들기

• 여기까지 완료하면 기본 구조는 어느정도 갖추어져 있습니다.

vue create my-project

---

Vue-router 설치

• 페이지 이동에 필요한 router를 설치합니다.
• 실제로는 Single-page이지만 페이지 이동의 효과를 보여주지요.

npm install vue-router
# OR
yarn add vue-router

기본 Router/index.js 구조

• Router 구조는 아래처럼 구성하고 페이지 이동시 컴포넌트를 추가 하는 방식으로 합니다.

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
    mode: 'history',
    routes: [{
            path: '/',
            name: 'main',
            component: Hello
        }
    ]
})

---

Vuex 설치

• Vue에서 사용되는 수많은 변수들을 통합하여 관리하는 기능입니다.
• 작은 페이지를 만들면 역시나 없어도 되기는 하지만, 기본적으로는 처음부터 설정하고 가는 것이 좋습니다.

npm install vuex
# OR
yarn add vuex

Vuex Store 구조

• 저는 주로 vuex의 데이터들을 store 폴더에 구성합니다.
• store 안에 modules 폴더를 두고, 관리해야할 데이터 단위로 modules 에 추가를 합니다.

store/index.js

# store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import modules from './modules';

Vue.use(Vuex);

const store = new Vuex.Store({
  modules,
  strict: process.env.NODE_ENV !== 'production',
});

export default store;

store/modules/index.js

# store/modules/index.js
import camelCase from 'lodash/camelCase';

const requireModule = require.context('.', false, /\.js$/);
const modules = {};

requireModule.keys().forEach(fileName => {
  if (fileName === './index.js') return;
  const moduleName = camelCase(fileName.replace(/(\.\/|\.js)/g, ''));
  modules[moduleName] = requireModule(fileName).default;
});

export default modules;

---

Vuetify 설치

• vue 전용 components library 입니다.
• 처음사용해보는데 완성도도 높아보이고 테마도 몇 가지 제공하는 등 좋아 보여서 사용해보기로 합니다.
• 위에서는 모듈 추가시에 yarn이나 npm을 사용하였지만, 여기에서는 vue를 이용하여 설치하였습니다. 이유는 내부에 다른 설정들도 같이 변경을 시켜줘서, 편하게 시작할 수 있기 때문입니다.

 vue add vuetify

---

실행해보기

• 위와 같이 설치만 주루룩 한 뒤에 시작만 해도 아래와 같은 사이트가 기본적으로 만들어집니다.

npm serve
# OR
yarn serve