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

Tweet

Pocket

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

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

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

リンクの書き方

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

/pages/aboutus/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/ でアクセス。