친절을 요구한다면

Vue.js가 무사히 할 수 있게 되었기 때문에, Vuetify도, 라고 하는 수차가 되었다. Vuetify는 멋진 구성 요소가 담긴 프레임 워크입니다. 일단 만들지 않아도 버튼이라든지 슬라이드라든지, 일일이 멋진 녀석이 있다. 멋지다.

조속히 문서를 보면서 도입을 시도했다. 힘들었다. 모두 영어였다.

무에서 설치

처음은 기존의 것에 도입이라든지 생각하지 않고, 무로부터 해 보았다. 우선은 Vue의 CLI라는 녀석이 필요하다. 공식을 참고로 넣자.

$ yarn global add @vue/cli

그리고 vue 커맨드로 만든다.

$ vue create my-app

수많은 파일군이 가능하지만, 거기서 이하의 커맨드를 입력한다.

$ yarn serve

　이 yarn serve 는 package.json 로 정의된 오리지날의 스크립트."serve": "vue-cli-service serve", 가 되어 있다.

실행하면 이하와 같이 헬로 월드가 생긴다. 했어.



이런 페이지가 나타났다. 성공이다.

기존에 넣어

기존의 앱에 넣는 방법이지만, 여기가 참고가 되었다. 보다는 거의이 기사. 여기의 「3. Vuetify를 인스톨」로부터 해 갔다.

【Rails6】10분만에 Rails+Vue+Vuetify 환경 구축

그냥, 이상한 에러가 나왔다. 당시의 기억은 확실하지 않지만, 그대로는 잘 된 것 같다. 오류 로그에 다음 문제에 대한 링크가 있습니다.

"$attrs is readonly" and "$listeners is readonly" 

라는 녀석이었다.

$attrs is readonly" and "$listeners is readonly에 대한 조치

위의 링크를 쫓아가자, 어려운 사람이 답변을 말하고 있었다.
htps : // 기주 b. 코 m / ゔ 에치 fys / ゔ 에치 fy / ぢ s 쿠시 온 s / 4068 # ぢ s 쿠시 온 코멘 t-24984

이렇게 하면 좋다.

config/webpack/environment.js

//中略　
// 以下を追記

environment.config.merge({
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
})

그렇게 하면 할 수 있었다. 버튼을 볼 수 있었다.



했다.

일난 떠나고 또 일난

그런데, 무사히 버튼이 도입할 수 있었지만 원래 있던 문자가 굉장한 쪽에 가 버렸다. 여기저기의 디자인을 수정해야 한다. 어떻게 하면 좋을까.

다음 번에도 기대합니다.