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

3개월 전

최근에 웹페이지를 하나 만들일이 생겼습니다. 간단한 페이지 이기는 한데, 그동안 너무 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


Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
STEEMKR.COM IS SPONSORED BY
ADVERTISEMENT
Sort Order:  trending

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

·

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

@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