Rails 프로젝트에서 vuesax를 가져와 화면을 빠르게 만듭니다!

8434 단어 vuesaxVue.jsRails
이 글은 에베레스트/에베레스트 연결/에베레스트 이사무사 Advent Calendar 2018 6일째 되는 글이다.
어제 보도는여기.입니다.

이마


Qita가 처음 기고한 졸업생 1년차 웹 엔지니어입니다.잘 부탁드립니다.
요즘 Rails, Vue.저는 js를 공부하고 있지만 프론트 데스크 주변에 잘 대처하지 못하고 백엔드에 힘쓰고 싶어서 프론트 데스크톱을 쉽게 설치할 수 있는 좋은 물건이 있는지 계속 찾고 있습니다.
이런 상황에서 만나는 vuesax가 좋을 것 같아서 소개와 Rails 응용 프로그램 가져오기를 적어서 시작하겠습니다.

이른바 vuesax


vuesax는 Vue입니다.은 js의 UI 구성 요소 프레임워크입니다.0부터 디자인되어 어느 정도 제작된 후에 응용 프로그램을 가져오는 것도 간단한 특징이라고 할 수 있다.
Grid, 카드, Pagenation 등은 풍부한 기본 기능을 제공하고 디자인도 괜찮다.

rails 프로그램으로 가져오기


저자 환경

  • ruby 2.5.1
  • ruby on Rails 5.2.1
  • webpacker 3.5.5
  • node 8.12.0
  • yarn 1.9.4
  • Vue.js 2.5.17
  • vuesax 3.8.0
    • Rails 앱 제작~vuesax 가져오기까지 순서는 대체로 이런 느낌이다.
    1. Rails 앱을 만들고 controller를 만든다(이번에는 생략한다.)
    2. 웹 패키지 설치(Gemfile의 편집, 명령)
    3. vuesax(npm,yarn 명령) 설치
    4. 응용 프로그램 파일 다시 쓰기
    제가 간단히 소개해 드리겠습니다.
  • 웹 패키지 설치(Gemufile의 편집, 명령)
    • Gemfile
    source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.5.1'
# 下記を追加
gem 'webpacker'
    콘솔에서 다음 동작을 수행합니다: 웹 패키지 프로필, 그리고 Vue.js 설치해.
    bundle exec rails webpacker:install:vue
  • vuesax 설치
    • 콘솔에서 다음을 수행합니다.
    npm install vuesax
# yarnでもインストール可能です
yarn add vuesax
    이렇게 하면 vuesax의 설치가 완성되어 매우 간단하다.
  • 응용 파일의 재작성
    • app/javascript/app.vue
    <docs>
// webpackerでvueをインストールしたときに自動生成されるvueファイルです。
// ここを編集して、今回はvuesaxの開いたり閉じたりできるalertを表示します。
</docs>

<template lang="html">
  <div class="centerx">
    <vs-button @click="active1=!active1" color="primary" type="filled">{{!active1?'Open':'Close'}}</vs-button>
    <vs-alert
    :active.sync="active1"
    closable
    close-icon="close">
      Hello vuesax!
    </vs-alert>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        active1:false,
      }
    }
  }
</script>
    app/javascript/hello_vue.js
    // webpackerでvueをインストールしたときに自動生成されるjsファイルです。
// 今回はここを編集してvuesaxをimportします。
import Vue from 'vue'
import App from '../app.vue'
import Vuesax from 'vuesax'

import 'vuesax/dist/vuesax' //Vuesax styles
Vue.use(Vuesax)

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    el: '#app',
    render: h => h(App),
  })
})
    여기까지만 하면 eb 쪽 웹 패키지에서 생성된 js 파일, css 파일을 읽어 드릴게요.
    app/views/layouts/application.html.erb
    <!DOCTYPE html>
<html>
  <head>
    <title>vuesaxTest</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
  </head>

  <body>
    <div id="app">
      <%= yield %>
    </div>
    <% # 下記2行を追加します。 %>
    <%= stylesheet_pack_tag 'hello_vue' %>
    <%= javascript_pack_tag 'hello_vue' %>
  </body>
</html>
    이렇게 설정이 완료되면 웹 패키지로 js, css를 한데 모아 rails 서버를 만듭니다
    ```
    ./bin/webpack
    bundle exec rails serve
    ```

    프레젠테이션이 Giftted를 통해gif로 변환된 후 화면의 비례에 이상이 생겼지만 이 코드만으로도 간단하게 실현할 수 있습니다!

    끝맺다


    간단하지만 vuesax를 소개했습니다.
    간단한 웹 응용 프로그램을 직접 만들고 싶을 때 간단하게 가져오고 개발 시간을 줄이는 것이 좋지 않습니까!
    또 공식 문서 영어도 있지만 이해하기 쉬워서 손도 잘 댄다.
    저도 접촉한 지 얼마 안 돼서 더 좋은 구성을 생각해서 앞으로 계속 활용할 거예요!

    통지하다


    우리와 함께 활약할 우수 인재를 모집하고 있습니다.
    관심 있는 분들은 꼭 문의파티 채택 페이지웹 엔지니어 세부 정보 페이지하세요.

    내일/내일


    이사무사@mori_mori가 7일째를 책임진다.기대하세요!
    전단 초보자는 대상을 어떻게 이해해야 합니까?
    전단 요청fetch에 대한 자세한 설명

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage