nuxt앱에 vue-design(iView) 적용하기

create nuxt-app 명령으로 nuxt앱을 만들 때 UI 프레임워크 추가할 수 있다. 많은 옵션이 있는데, 이 중 iview가 내가 쓰려는 프레임워크이다. 이렇게 iView를 설치하면 3.x 버전이 설치된다.

 

하지만 iView는 4.x로 버전을 올리면서 패키지 이름을 vue-design으로 변경했다. 따라서 create nuxt-app에서 iview를 한 번에 설치하는대신, 따로 설치하고 적용하기로 했다.

 

1. create nuxt-app으로 앱을 만든다.

2. yarn add vue-design 명령으로 패키지를 설치한다.

3. NUXT_APP/plugins/에 iview.js(혹은 원하는 이름)라는 파일을 만들고 다음 코드를 넣는다.

import Vue from "vue";
import iView from "view-design";
import 'view-design/dist/styles/iview.css';
import locale from "view-design/dist/locale/en-US"; // Change locale, check node_modules/iview/dist/locale

export default () => {
  Vue.use(iView, {
    locale
  });
}

4. NUXT_APP/nuxt.config.js 파일 중 plugins 항목에 다음 코드를 넣는다.

    '@/plugins/iview'

끝.