20190227のvue.jsに関する記事は4件です。

投稿日：2019-02-27T14:21:12+09:00

Macでvueを使おうとするとnot foundになる問題の解決

インストールはできているのに、vueを使おうとするとnot foundになる現象が起きたのでメモです。
「パスを通す」ことで解決できました。

手順

１：vue-cliのインストール
$ npm install --global vue-cli
これをすると
$ npm install --global vue-cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
/Users/＊＊＊/.npm-global/bin/vue-init -> /Users/＊＊＊/.npm-global/lib/node_modules/vue-cli/bin/vue-init
/Users/＊＊＊/.npm-global/bin/vue -> /Users/＊＊＊/.npm-global/lib/node_modules/vue-cli/bin/vue
/Users/＊＊＊/.npm-global/bin/vue-list -> /Users/＊＊＊/.npm-global/lib/node_modules/vue-cli/bin/vue-list
こういう画面が出てくるのでメモするか消さずに残しておきます。

２：.bash_profileの書き換え

ユーザ　＞　＊＊＊（それぞれの環境参照）　＞　.bash_profileというものがあるのでそれをテキストエディタで開いて
手順１で出て来た/Users/＊＊＊/.npm-global/lib/node_modules/vue-cli/binを含めた
export PATH="/Users/＊＊＊/.npm-global/lib/node_modules/vue-cli/bin:$PATH"
を書いて保存します。

３：ターミナルで操作

再びターミナルで手順２の更新を反映させます。
$ source ~/.bash_profile
これで$ vue -VをするとNot foundにならなくなり、インストールされているバージョンが表示されるようになります。
(Vは大文字です）

　 Tweet
Qiitaで続きを読む

投稿日：2019-02-27T11:24:15+09:00

[Vue.js] IME入力時にEnterキーイベントを発火しない様にする

Vue.js ^2.5.16 においてIME-ON時にも keydown.enter が発火する様になったらしいので
それを制御するお話
備忘録程度に

対策

compositionstart compositionend を使いましょう

Source
https://forum.vuejs.org/t/how-does-vue-handle-real-enter-event/2169/4

See the Pen YgPBye by ?あんじぇあーと? (@shinomiya_ag) on CodePen.

　 Tweet
Qiitaで続きを読む

投稿日：2019-02-27T10:20:38+09:00

Lolipop環境にLaravelをインストールする方法（+Laravel mixによるVue.js）

毎度忘れてしまうので、覚書として。

※ご注意：現時点での操作方法になりますので、時間の経過によって環境も変わる可能性があります。

ロリポの契約

スタンダードプラン以上にしましょう。
独自ドメインの設定、無料SSL、SSH接続が無いと設定できません。

ロリポの設定

独自ドメイン取得

ムームドメインだと連携が簡単なので、ムームドメインで取ってしまいましょう。
私は年間80円のドメインを購入しました。

サブドメイン設定

xxxxx.hogefuga.jp => /hogefuga/public/

PHP7.1のパス

/usr/local/php7.1/bin/php

MySQL設定

設定メニューの「データベース」→「作成」ボタンを押下

Laravelインストール

時間かかっても簡単な方法で、というのであればvendorディレクトリなども全部SFTPで転送してしまう方法です。
npmコマンドが使えないようなので、node_modulesについては頑張って転送しました。

マイグレーション

ロリポのデータベースはMySQL5.6しか選べないので、マイグレーションしようとすると以下のエラーが表示されます。
console
SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 767 bytes (SQL: alter table `password_resets` add index `password_resets_email_index`(`email`))
以下のページを見ながらusersとpassword_resetsテーブルを修正しましょう。
https://qiita.com/beer_geek/items/6e4264db142745ea666f

参考

https://lolipop.jp/pricing/
http://0gravity000.sunnyday.jp/ProgramingNote/2017/10/21/tip_09_02_008/

　 Tweet
Qiitaで続きを読む

投稿日：2019-02-27T00:51:35+09:00

Docker + Rails + MySQL + Vue で Todo アプリ作成〜その1〜

はじめに

前回： Docker + Rails で開発環境を作った。
せっかく作ったのに開発しないのはもったいないよね。
でもできることって限られてる。
ということで、TODOアプリを作ってみる

目標

trello

今回はとりあえず、seed データを投入して、その一覧を表示させるとこまで。

タイトル詐欺してますね、「その1」では Vue は使いません（そこまでいけない）

1.準備

Docker を起動し、コンテナに接続していきます。
$ cd myapp
$ docker-compose up
$ docker ps
myapp_web と mysql の CONTAINER ID を控える
そぞれのコンテナに接続をする。
web
$ docker exec -it CONTAINER_ID bash
root@CONTAINER_ID:/myapp#    これでOK
db
docker exec -it CONTAINER_ID bash
root@CONTAINER_ID:/# mysql -u root -p
Enter password:  # database.yml に記載したパスワード
mysql>     これでOK
2. Rails の操作

2.1 モデルを作る

Task モデルを作る。
web
# rails g model Task title:string context:string level:integer
# rails db:migrate
2.2 コントローラーも作る

こっちは Tasks
複数形であることに注目、Rails Tutorial で確かそう習った
# rails g controller Tasks
とりあえず一覧を見たい
tasks_controller.rb
class TasksController < ApplicationController
  def index
    @tasks = Task.all
  end

  def show
  end

  def new
  end

  def create
  end

  def edit
  end

  def update
  end

  def destroy
  end
end
ついでに他のも CRUD の７つも枠だけ用意しておく。

2.3 index で表示させる seed データを作る
seeds.rb
Task.create(
  [
    {
      title: 'task 001',
      context: 'hogehoge',
      level: '2',
    },
    {
      title: 'task 002',
      context: 'fugafuga',
      level: '3',
    },
    {
      title: 'task 003',
      context: 'piyopiyo',
      level: '1',
    },
  ],
)
web
# rails db:seed
2.4 seed データを作成したら db を覗く

MySQL 側でデータベース名を確認し
sequel pro で実際にデータが入っているか確認する。
db
mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| myapp_development  | # こいつを使うよ
| myapp_test         |
| mysql              |
| performance_schema |
| sys                |
+--------------------+
終わったらコンテナごと exit しちゃう。

接続をしたら

やったぜ
次はこのデータを画面に表示させる。

3. View とその準備

さっき rails db:seed で作成したデータを表示させたい。
表示させるページは /tasks と /（ルートページ）

3.1 ルーティング
routes.rb
Rails.application.routes.draw do
  root to: 'tasks#index'

  resources :tasks
end
3.2 View ファイルの作成

model, controller は rails g があるけど
view にはないらしい。
ので、手動で作っていく、
$ touch app/views/tasks/index.html.erb
$ touch app/views/tasks/show.html.erb
$ touch app/views/tasks/new.html.erb
$ touch app/views/tasks/edit.html.erb
index.html.erb
<h1>Your Tasks</h1>

<ul>
  <% @tasks.each do |task| %>
  <li><%= task.title %><%= task.context %></li>
  <% end %>
</ul>
Task.all の数だけ Task の持っている title と context を表示

...なんかだんだんモデルの作りがイケてない気がしてきた。

そしてローカルホストに接続して確認。

できた。
とりあえずこれでおしまい。
続きは次回。

参考

Railsでタスク管理ができるWebアプリを作成してみた（Rails入門）
【Ruby on Rails】ToDoアプリを簡単に作ってみる

ありがとうございます。

　 Tweet
Qiitaで続きを読む