[Vue.js] VuePrime 설치

create vue vueprime-test

Default [Vue 3] babel, eslint 

프라임뷰 설치

npm install primevue —save

아이콘 설치

npm install primeicons —save

이런 스타일도 써야될 것 아닙니까

얘네들을 main.js에 import 해줍시다.

main.js 원본 (초라하다.)

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

theme을 import한 main.js (늠름해졌다.)

import { createApp } from 'vue'
import App from './App.vue'

import 'primevue/resources/themes/saga-blue/theme.css'       //theme
import 'primevue/resources/primevue.min.css'                 //core css
import 'primeicons/primeicons.css'                           //icons

createApp(App).mount('#app')

근데 봐봐요 import만 하고 component가 없잖아여.

import PrimeVue from 'primevue/config';

primevue/config를 임포트하고

const app = createApp(App);
app.use(PrimeVue); <<--선생님이 이부분 중요하다고 합니다.

app.mount('#app');


프라임뷰의 메인스페이스를 당신의 프로젝트에 추가합니다.
Primevue API에 접근할 수 있게 됩니다.

사용하고 싶은 게 있으면 Documentation에 가서 main.js에 import를 하세요

예시

import { createApp } from 'vue'
import App from './App.vue' //애플리케이션 인스턴스

import PrimeVue from 'primevue/config'; //프라임뷰 컨피그레이션
import Button from 'primevue/button';
import InputText from 'primevue/inputtext';

import 'primevue/resources/themes/saga-blue/theme.css'       //theme
import 'primevue/resources/primevue.min.css'                 //core css
import 'primeicons/primeicons.css'                           //icons

const app = createApp(App);
app.use(PrimeVue);  //인스톨 프라임뷰

app.component('InputText', InputText);  //인풋텍스트, 버튼 컴포넌트를 추가했다.
app.component('Button', Button);

app.mount('#app') //마지막으로 애플리케이션을 마운트 함.

준비 완료

 

<template>
  <div>
    <InputText v-model="text"/>
    <Button label="click"></Button>
    {{ text }}
  </div>
</template>

<script>

export default {
  data() {
    return {
      text: '커피마싯정'
    }
  }
}
</script>