프레임워크/Vue.js

Vue.js의 Vuetify CDN 적용하기

익명의 신디 2020. 8. 15. 03:24

" Vue-CLI 와 vue router "의 프로젝트를 진행 도중에,

  Vuetify를 설치하지 않고 CDN을 넣어 사용해보려고 한다.

1 Vuetify 공식문서

vuetifyjs.com/ko/getting-started/quick-start/ 
https://vuetifyjs.com/ko/getting-started/quick-start/
//공식문서 CDN 사용설명

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-main>
        <v-container>Hello world</v-container>
      </v-main>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
    })
  </script>
</body>
</html>

 

2 Vue의 Vuetify CDN 적용하기(실습)

" Vue-CLI 와 vue router " + "Vuetify"

1단계 index.html 에서 cdn을 넣기
<!-- Vuetify -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
 
2단계 main.js

// Vuetify
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify);
new vue있는곳 안에
vuetify : new Vuetify(),

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import vueMoment from 'vue-moment' //날짜
import Vuetify from 'vuetify' //Vuetify 1
import 'vuetify/dist/vuetify.min.css' //Vuetify 2

Vue.use(vueMoment) //날짜
Vue.prototype.$http = axios;
Vue.use(Vuetify) //Vuetify 3

new Vue({
  el: '#app',
  router, 
  components: { App }, 
  template: '<App/>',
  vuetify: new Vuetify(), //Vuetify 4
})
 
3단계 터미널에 명령어 (꼭!)
$ yarn add vuetify // 나는 이걸로 했다
// OR
$ npm install vuetify		 

$ yarn add vuetify // 나는 이걸로 했다
// OR
$ npm install vuetify

package.json / package-lock.json변경됨 (공식문서설명 Webpack설치)

 
4단계 div 처럼 v-app 속에 사용하기
<v-app> </v-app> 
<v-app> </v-app>
 
5단계 이제 공식문서를 보며 적용해보자!

 

주의 ) 바로 Vuetify 를 설치하는 경우 (Vuetify Vue CLI package)

$ vue add vuetify

App.vue / main.js / package.json / package-lock.json / index.html / HelloWorld.vue 가 바뀌는걸 확인하였다.