[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


Sort:  

한글과 영어로 된 포스팅이라는 것 외에는 하나도 모르겠는... ^^ 맛점하세요.

기록용 + 누군가에게 도움용 겸사겸사 작성해보았네요! 어제 맛점 하셨으려나요? ㅎ

@happyberrysboy transfered 24 KRWP to @krwp.burn. voting percent : 82.23%, voting power : 85.20%, steem power : 1814948.18, STU KRW : 1200.
@happyberrysboy staking status : 8000 KRWP
@happyberrysboy limit for KRWP voting service : 24 KRWP (rate : 0.003)
What you sent : 24 KRWP [44317310 - e53cc55d5c4857eb9913fd24016088b16266747c]

하~ 이게 뭔가요!! 할말이 없네~ ㅋㅋ
맛점 하셨나요? 오후도 화이팅~ 하세요^^

ㅎㅎ 그냥 저도 기록용으로 좀 남겨두었습니다. 도움이 되실분도 있으실 것 같기도 하구용. ㅎㅎ
독거형님은 잘 주무셨습니까!? 악몽 안꾸셨지요? ㅋ

Congratulations @hersi007, you successfuly trended the post shared by @happyberrysboy!
@happyberrysboy will receive 2.35056938 TRDO & @hersi007 will get 1.56704625 TRDO curation in 3 Days from Post Created Date!

"Call TRDO, Your Comment Worth Something!"

To view or trade TRDO go to steem-engine.com
Join TRDO Discord Channel or Join TRDO Web Site

Congratulations @happyberrysboy, your post successfully recieved 2.35056938 TRDO from below listed TRENDO callers:

@hersi007 earned : 1.56704625 TRDO curation


To view or trade TRDO go to steem-engine.com
Join TRDO Discord Channel or Join TRDO Web Site