MacでYarn+Vue.js+Webpack

YarnのインストールからVue.jsの表示までのメモ

インストール手順

今後はnpmの代わりにYarnで管理していけるため、npm経由ではなく、Yarnをインストールする。もしエラー出たら、npmでYarnをインストールも可能。

$ brew install yarn

フォルダを適当に作って移動する。

$ mkdir sample
$ cd sample

Yarnでpackge.json作る。いろいろ聞かれるが、これはEnter連打でOK。

$ yarn init

Vue.jsをYarn経由でインストールする。Vue.jsをコマンドラインでいろいろ実行する必要があるため、最初にvue-cliをインストールする。(インストールしていないと、vue-cliをインストールしろとエラーメッセージで教えてくれるため、インストールし忘れても後で気づくことができる。)

$ yarn add vue-cli
$ yarn vue init webpack my-project

Vue.jsプロジェクト用にフォルダ作って移動する。

$ mkdir my-project
$ cd my-project

Yarnを起動して、コンパイルが終わったらURL「http://localhost:8080」にアクセスする。

$ yarn start

参考URL

Written with StackEdit.

SQLite3のUNIQUE constraint failed

RubyフレームワークのHanamiでRepositoryの挙動をminitestでテストしてもユニークじゃないよと怒られた。migrationファイル見たら、カラムがユニークだったため(unique: true)、それを削除してbundle exec hanami db prepareしたが、やはりユニークじゃないと怒られた。

エラーメッセージ

TnoteNoteRepository#test_0001_associations are successful:
Hanami::Model::UniqueConstraintViolationError: SQLite3::ConstraintException: UNIQUE constraint failed: tnote_streams.tnote_note_id
↑「tnote_note_id」というカラムがユニーク設定になっているのに、値が重複したレコードを追加してるよ、的な意図のメッセージ

原因

minitest実行はtest環境で実行されるが、db prepareでdevelopment環境しかDB更新していなかったため。test環境もdb prepare(コマンド:HANAMI_ENV=test bundle exec hanami db prepare)することで解決。

Written with StackEdit.