【Buefy】 설치 ~ 자신의 스타일을 맞출 때까지

대상

Vue.js의 UI 구성 요소 인 Buefy을 프로젝트에 배포하려는 사람

Buefy 스타일을 자신의 취향으로 변경하고 싶은 사람

쉬운 설치 방법

index.html에 추가

프로젝트 만들기

vue create vue-buefy-sample
cd vue-buefy-sample
yarn serve

플러그인은 적절하게
Css Pre-processors 필수

Buefy 설치

buefy 패키지 설치

yarn add -D buefy

main.js 수정

src/main.js

import Vue from 'vue'
import App from './App.vue'
import Buefy from 'buefy' // 追加

Vue.config.productionTip = false
Vue.use(Buefy) // 追加

new Vue({
  render: (h) => h(App),
}).$mount('#app')

이것만!

확인

vue-buefy-sample/src/components/HelloWorld.vue

<template>
  <div class="hello">
    <b-button type="is-primary">テスト</b-button>
    <h1>{{ msg }}</h1>

    <!-- 以下の余計な物を削除 -->
  </div>
</template>

간략한 설명

b-button
b-button은 Buefy 버튼 구성 요소입니다.
main.js에서 Vue.use에서 Buefy를 등록하면 main.js에 연결된 모든 구성 요소에서 사용할 수 있습니다

type="is-primary"
Buefy 의 컴퍼넌트 전반에서 사용할 수 있는 type 요소는 색을 주로 지정할 수 있다
is-primary를 지정하면 초기 상태에서 Buefy 테마 색상 인 # 8c67ef로 표시됩니다.
그 밖에도 is-light나 is-dark 등이 있다
이들은 다음 방법으로 사용자 정의 할 수 있습니다

스타일을 사용자 정의하려는 경우

여기에서 본제
여기에 작성된대로 scss 파일을 직접 정의하여 각 구성 요소에 적용된 스타일을 변경할 수 있습니다.

app.scss를 통과하는 것은 다른 scss 파일을 전체에 적용하고 싶을 때 유용 할 수있는 권장 방법

_buefy.scss 만들기

공식 소스 코드에서 일부 발췌

vue-buefy-sample/src/assets/styles/_buefy.scss

// Import Bulma's core
@import '~bulma/sass/utilities/_all';

// Set your colors
$primary: #8c67ef;
$primary-invert: findColorInvert($primary);

// Setup $colors to use as bulma classes (e.g. 'is-twitter')
$colors: (
  'primary': (
    $primary,
    $primary-invert,
  ),
);

// Import Bulma and Buefy styles
@import '~bulma';
@import '~buefy/src/scss/buefy';

app.scss 만들기

vue-buefy-sample/src/assets/styles/_buefy.scss

@import 'buefy';

// @import "global"; // 将来的に_global.scssとかを作った時にこんな風に追加できる

vue-buefy-samplevue-buefy-sample/src/App.vue

<style lang="scss">
@import '@/assets/styles/app'; // 追加

~~
</style>

스타일 변경을 위한 준비

\$colors 에 추가하면, type 요소에 is-<추가한 키>로 지정하면 그 색으로 할 수 있다

_buefy.scss에서 일부 발췌

vue-buefy-sample/src/assets/styles/_buefy.scss

 // Set your colors
 $primary: #8c67ef;
 $primary-invert: findColorInvert($primary);

+$secondary: red;
+$secondary-invert: findColorInvert($secondary);

 // Setup $colors to use as bulma classes (e.g. 'is-twitter')
 $colors: (
   'primary': (
     $primary,
     $primary-invert,
   ),
+  'secondary': (
+    $secondary,
+    $secondary-invert,
+  ),
 );

type 지정을 만든 스타일로 변경

vue-buefy-sample/src/components/HelloWorld.vue

 <template>
     <div class="hello">
-        <b-button type="is-primary">テスト</b-button>
+        <b-button type="is-secondary">テスト</b-button>
         <h1>{{ msg }}</h1>
     </div>
 </template>

확인

쉽게 스타일을 추가·변경할 수 있다

변경할 수 있는 변수는 Bulma 공식 문서에 기재되어 있다

후기

Buefy 는 도입도 수정도 편하게 머티리얼 디자인을 구현할 수 있으므로 매우 추천
향후 Buefy의 편리한 점이나 사용하는 요령 등을 쓰고 싶습니다

이번 소스는 github에 올리고 있으므로 활용하십시오
htps : // 기주 b. 코 m / 아즈하루 07 / ゔ 에부 파이 さ mp ぇ / 쓰레기 t / 아 c36 엣 c로 55b333948d43에 9960f75765c8f7c8d8