rails와 Vue.저는 캐럿을 이용해서 그래프를 사용하는 시간 관리 앱을 만들고 싶습니다. 나중에 돌이켜보기 위해 오늘부터 기록하겠습니다.
시간 관리 앱의 대략적인 인상입니다.

시행착오를 겪으면서 하려고 하니까 드문드문 업데이트가 될 것 같아요.
이번에는 rails로 퍼즐을 보여 주세요.

전제 조건

Rubby, rails는 각자 환경을 준비하세요.
참조Vue.js와 Rails로 TODO 어플의 튜토리얼 같은 걸 만들어 봤어요.준비환경.
우리측은 윈도우즈 환경을 위해, node입니다.js의 설치는 이곳을 참고했다.
Node.Windows 용 js/npm 설치
그리고 Webpack과 Vue.js는 yarn이 설치했기 때문에 yarn도 아래 명령으로 설치합니다.

$ npm install -g yarn

나는 아래의 환경에서 실시한다.
Ruby 2.6.0
Ruby on Rails 5.0.7.1
Node.js 6.16.0
yarn 1.13.0
Webpacker 3.0.2
Vue.js 2.9.6

새 프로젝트 작성

중도까지Vue.js와 Rails로 TODO 어플의 튜토리얼 같은 걸 만들어 봤어요. 보도와 추진 방법은 동일했다.

Rails + Vue.js 프로젝트 만들기

-webpack 옵션을 사용하여 프로젝트를 만듭니다.

$ rails new chartapp --webpack=vue

rails에 rails의 기본 화면을 표시합니다.

Vue.js 표시 확인

다음 파일을 만들고 편집하며 rails 뷰에 Vue를 표시합니다.반영

app/controllers/home_controller.rb

config/routes.rb

app/views/home/index.html.erb

app/controllers/home_controller.rb

class HomeController < ApplicationController
  def index
  end
end

config/routes.rb

Rails.application.routes.draw do
  root to: 'home#index'
end

app/views/home/index.html.erb

<%= javascript_pack_tag 'hello_vue' %>

참고 문장을 인용한 말
javascript_pack_tag을 사용하면 app/javascript/packs 이하의 JS 파일을 검색할 수 있습니다.
설치 시 hellovue.js라는 파일을 생성했기 때문에 index로 읽습니다.
rails의 경우, "Hello Vue성공하다

※ bin/webpack를 통해 컴파일

Vue.만약 js (차라리 Webpack) 와 관련된 파일이 변경되면 컴파일해야 한다.
컴파일할 때 bin/웹 패키지 명령을 사용하십시오.만약 파일이 변경되었지만 아직 변하지 않았다면, 컴파일을 잊어버릴 수도 있습니다.

Vue.js 표시

원본 뷰 파일 Rails의 index입니다.html.erbにVue.제이스 올려놓을게요.
app/views/home/index.html.erb

<div id="app">
 <navbar></navbar>
</div>

<%= javascript_pack_tag 'chart' %>

레이블<navbar>이 있는 Vue입니다.이 탭과 구성 요소 링크를 js 옆에 표시합니다.
그리고 새로운 카트.app/javascript/packs에서 js라는 파일을 만듭니다.
app/javascript/packs/chart.js

import Vue from 'vue/dist/vue.esm.js'
import Index from './components/index.vue' #あとでjavascript/packs/components/index.vueというファイルを作成します。

var app = new Vue({
  el: '#app', 
  components: {
    'navbar': Index,
  }
});

rails 쪽의 루트도 잊지 마세요.
config/routes

Rails.application.routes.draw do
  root to: 'home#index'
end

이렇게 index.html.erb에 마운트된 div id="app" 에 표시됩니다.

vue-charts 가져오기

Vue.제이스로 멋진 그래프를 쉽게 만들 수 있는Chart.3개의 js 자물쇠

github:hchstera/vue-charts
상술한 두 사이트를 참고하여 도표를 가져오다.

우선, vue의 index를 설명합니다.vue를 만듭니다.
javascript 디렉터리에 packs/components 디렉터리, index를 만듭니다.vue를 만듭니다.
javascript/packs/components/index.vue

#何も書かないでおく

이어서 다음과 같은 기술을 진행한다.modules에서Chart까지.Js 장서와 hchs-vue-charts, Vue를 가져옵니다.use(window.VueCharts)를 통해 전 세계에 등록되었습니다.전 세계에 등록된 후에는 번역할 필요가 없다.(미안하지만, 나는 아직 이유를 완전히 이해하지 못했어...)
javascript/packs/chart.js

import 'chart.js'
import 'hchs-vue-charts'

Vue.use(window.VueCharts)

그럼 실제로 도입해.
폴리라인 차트
index.vue 파일의template 탭에 삽입<chartjs-line></chartjs-line>합니다.
막대 그래프
index.vue 파일의template 탭에 삽입<chartjs-bar></chartjs-bar>합니다.
레다투
index.vue 파일의template 탭에 삽입<chartjs-radar></chartjs-radar>합니다.
javascript/packs/components/index.vue

<template>
  <section class="container">
    <h1>Demo examples of vue-charts</h1>
    <div class="columns">
      <div class="column">
        <h3>Line Chart</h3>
        <!--Line Chart Example-->
        <chartjs-line></chartjs-line>
      </div>
      <div class="column">
        <h3>Bar Chart</h3>
        <!--Bar Chart Example-->
        <chartjs-bar></chartjs-bar>
      </div>
    </div>
    <div class="columns">
      <div class="column">
        <h3>Radar Chart</h3>
        <!--Radar Chart Example-->
        <chartjs-radar></chartjs-radar>
      </div>
    </div>
  </section>
</template>

이런 느낌으로 샘플 도표를 표시할 수 있다.수치를 자유롭게 변경하고 싶지만github의 페이지를 봐도 방법을 모르겠어요.

여기까지 하고 나서야 비로소... vue-charts에 산포도가 없다는 것을 알아차렸다. (;;;)

큰일났다.필사적으로 하면 눈치채지 못한다.
만약 이 보도가 다른 사람을 도울 수 있다면 나는 매우 기쁠 것이다.
어쨌든 난 찰트야.나는 js나 무엇으로 대응하고 싶다.그것은 또 다른 일이다