rails とvue

new

rails new *** -B -d mysql -S -T --skip-coffee --skip-turbolinks --skip-test --webpack=vue

apiモードでつくった.

rails new fan_club --api --webpack=vue　-d mysql

foreman導入

gem 'foreman'

/Procfile(rootの配下にファイルを作成)

Procfile.

rails: rails s
webpack: bin/webpack-dev-server

$ foreman start

サーバ立ち上げる時

bundle exec foreman start -f Procfile.dev

怒られたら(apiモードやたら注意される)

error Command "webpack-dev-server" not found.

これ.

⭕️yarn add webpack webpack-dev-server --dev

warning package.json: No license field

package.json

⭕️ "name": "fun_club",
  　"private": true,

 Error: Cannot find module '@rails/webpacker'

⭕️yarn add @rails/webpacker

yarnの使用

yarn add vuex
yarn add vue-router
yarn add vue-eslint-parser
yarn add vee-validate
yarn add rails-ujs
yarn add js-cookie
yarn add vue-loader
yarn add axios
yarn add vue-axios
yarn add --dev babel-loader @babel/core @babel/preset-env

yarn add bulma
yarn add --dev sass-loader node-sass css-loader
yarn add --dev vue-svg-loader
yarn add buefy

blumaはいらん

webpackerでyarn buildできたらいいのかもしれないけど、webpacker.config.jsの設定が謎。
あきらめようとしたときにBuefyいれたら表示された
Buefyはblumaをベースにして作られたvue.jsのUIフレームワーク

application.js

import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
Vue.use(Buefy)