トップ 差分 一覧 ソース 検索 ヘルプ RSS ログイン

Hanami+Vue.js

[Ruby,Hanami,Vue]

webpack + Vue

  構造

  • フロントエンドのJavascriptコード
      • db_badmin/apps/datasource/frontend/application.js

本来はファイルを分割していくべきだが、最初なのでここにまとめる

  • import文
    • Javascriptの規格、ES2015(ES6)にて使えるようになったらしい。ようやく依存関係をそういう風に書けるようになったんだな…

とりあえずyarnを使って、以下のようなライブラリを利用していく

ライブラリ名 用途
Vue Javascriptのイベント管理など全体の構造
BootstrapVue bootstrapとVue.jsの統合
Axios Ajaxのリクエスト管理
// Vue.js
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue);

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Axios
import Axios from 'axios';

  Vue.jsの構造

Vue.jsはJavascript(ES6)をラップしている

  • Vue.js入門
    • Qiitaの記事がわかりやすかったので
記事名 学べること 備考
Vue.js入門 (1) el, data Vue.jsのオブジェクトの基本 おそらくこの部分が今までのJavascriptと異なる(例えばjQuery)
Vue.js入門 (2) テンプレート Vue.js用のテンプレート機能 JSPやStrutsのタグやErb,Hamlなどと同じ

  VueJS + AdminLTEで管理画面を作る

お名前: コメント: