Nuxt.js / Vue.jsでの実装方法メモ

Tweet

Pocket

Nuxt.js / Vue.jsで書く画像ファイルパス

.vueファイル：
require(‘~/assets/img/filename.jpg’)

cssファイル：
background: url(~@/assets/img/filename.jpg);

リンクの書き方

/pages/about/index.vueへのリンク：
<nuxt-link to=/about/>about</nuxt-link>

/pages/about/test.vueへのリンク：
<nuxt-link to=/about/test/>test</nuxt-link>

ページを増やした場合のNuxt.jsのルーティングの反映

/about.vueなど、ファイルを増やしただけではNuxt.jsのルーティングに反映されないので、ターミナルをcommand + cで切って、もう一度 npm run dev を実行する。

インラインcssにbackgroundで背景画像を指定する場合：
/assetsに置いてあるファイルはbase64にエンコードされ、キャッシュを持たないようで、ファイルパスの指定も難しい。
/staticに置くとキャッシュが効き、「/static/filename.jpg」は「/filename.jpg」で呼び出せる。ただ/static直下に置くと、html生成時にルートにはかれるため、/static/imgにした方がいい。

htmlの生成方法：
npm run generate でdistディレクトリに書き出し。変更や削除があった場合もdistディレクトリに反映される。
.vueファイルに変更がなくても、distのhtmlファイルは書き換わっていることに注意。

起動方法：
ターミナルで対象のディレクトリにcdした後、npm run dev。http://localhost:3000/ でアクセス。

エラー対処法：
Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
というエラーが出る場合は、templateタグの中に、ラップするdivが書かれていない場合。以下が正しい書き方。