前置き
vue初心者こと私がnuxtでのPWAの設定をとりあえず頑張ったときのメモとかエラーとか。
準備
vue-cliのインストールをしていなかったらいれる。
npm install -g vue-cli
インストールと起動（スターターテンプレートで始める）
スターターテンプレートがあるようなのでそれをいれてみる。
nuxt-community/starter-template
vue init nuxt-community/starter-template プロジェクト名
cd プロジェクト名
npm install
起動してみる
npm run dev
インストールと起動（ノースターターテンプレート）
スターターテンプレートを使わずにいれる。
作業フォルダ内にpackage.jsonを作成、または既存のものを修正したり、一から作る場合とか。
{
"name": "my-app",
"scripts": {
"dev": "nuxt"
}
}
npm install --save-dev nuxt
スターターテンプレートはディレクトリ構造通りにフォルダがあるけど、
nuxt単品でインストールした場合は自分でディレクトリを作っていれる
nuxt公式ディレクトリ構造
- assets
- コンパイルが必要なjsやcssをいれる
- static
- コンパイルしなくてもいい静的ファイル
- components
- パーツとしてのvueファイル（ヘッダーのみとか、検索バーのみとか）
- pages
- ルーティングしたページ単位のvueファイル。レイアウトより内側
- layouts
- 大枠のvueファイル
- middleware
- ルーティングしたそれぞれのルートで使う共通のロジック
- plugins
- クライアントサイド限定で使用するプラグイン
- nuxt公式：クライアントサイド限定のプラグイン利用
- store
- Vuex ストア のファイルをいれる
- nuxt公式：Vuex ストア
pages ディレクトリ作成
mkdir pages
index.vueを作って下記をいれる
<template>
<h1>Hello world!</h1>
</template>
npm run dev
http://localhost:3000で確認可能
エラーが出たらnodeのバージョンを疑ってみる
nodeのバージョンがひくいと動かない。
nuxtjsの公式でのnodeの推奨バージョンを見つけきれなくて、古めのnodeでやったので
私の環境では$npm run dev時に下記のエラーで止まった。
const policies = this.options.render.csp.policies ? {...this.options.render.csp.policies} : null
他のプロジェクトですでに古いバージョンのnodeが入ってたら、
下記などを参考にnodebrewで元々使っていたバージョンのnodeととりあえずstable（最新版）をいれて、プロジェクトに応じて切り替えるようにした
設定
設定はインストールディレクトリ直下にあるnuxt.config.jsをいじる
基本的に変更しなくても動くので必要に応じて書き換える。
PWA化
@nuxtjs/pwaをインストールして設定する
npm install --save-dev @nuxtjs/pwa
modules: [
'@nuxtjs/pwa'
],
manifest: {
name: 'nuxt-start',
lang: 'ja',
short_name: 'nuxt',
title: 'nuxt-startです',
'og:title': 'nuxt-startです',
description: 'nuxt-startです',
'og:description': 'nuxt-startです',
theme_color: '#ffffff',
background_color: '#ffffff'
},
workbox: {
dev: true, //開発環境でもPWA
},
git管理してる場合は、吐き出されたServiceWorker（sw.jsとかって吐き出される）を無視したいので.gitignoreに追加
sw.*
ビルドしてからサーバー起動してみる
npm run build
npm run start
デベロッパーツールでService Workerが動いているか確認
scssをつかえるようにする
npm install node-sass sass-loader --save-dev
.vueでstyleタグにlang="scss"をつけるとscssが使えるようになる
globalにscssを使えるようにする
nuxt公式：外部リソースを使うには？
nuxt公式：プリプロセッサを使うには？
nuxt公式：css プロパティ
nuxt.config.jsに設定追加
プロジェクト内でsass/scssを使ってプリセッサ使う場合
css: [
{ src: '~assets/sass/main.scss', lang: 'scss' }
],
assets/sass/にとりあえずsassっぽい記述でmain.scssを作る
@charset "utf-8";
@mixin fs($size: 24, $base: 16, $important: false) {
@if $important == 'important' or $important == true {
$important: ' !important';
font-size: $size + px'#{$important}';
font-size: ($size / $base) * 1rem'#{$important}';
} @else {
$important: '';
font-size: $size + px;
font-size: ($size / $base) * 1rem;
}
}
.fs42 {
@include fs(42);
}
レイアウトから呼び出すのでlayoutsのdefault.vueに下記を追加
<style lang="scss">
@import '~assets/sass/main.scss';
</style>
<h2 class="subtitle fs42">
nust-start project
</h2>
netlifyでサクッとアップロード
Netlifyについては下記が詳しい。
高機能ホスティングサービスNetlifyについて調べて使ってみた
下記を参考にサクッと設定
netlifyのエラーでデプロイ失敗した(´・ω・｀)
bitbucket（非公開）で使用。
コミットしたら勝手にビルドしてくれるけどエラーは下記
Error running command: Build script returned non-zero exit code: 1
Nuxt.JSをNetlifyで公開しようとするとビルドできない問題をなんとかするを参考にnodeのバージョンを指定してみたり、
リポジトリを公開にしてみたけど同じエラーが出た。
nuxtの公式のissuesに行き着いて解決
https://github.com/nuxt/nuxt.js/issues/219#issuecomment-278494315
NetlifyのDeploy settingsをnpm run build && npm run generateに変更したらビルドできた。
Netlify is for static hosting so you need to generate your website with Nuxt.
Netlifyは静的なホスティングなので、Nuxtのビルドしないとだめよって。
これを読んで気づいたけど、gitignoreでdistがコミット対象から外されてたorz
ブックマークに追加してchromeと独立してアプリとして動くか確認
こちらが丁寧にスクショで説明されてるので割愛
Nuxt.js で作った静的サイトを PWA 化する
ルーティング
ルーティングは設定なしでできた。
pages/
--| user/
-----| index.vue
--| index.vue
上記のようにuser/index.vueを追加して
http://localhost:3000/user
にアクセスするとできてたページができてた。すげえ。
vuetifyとfont-awesomeを入れてみる
参考：Nuxt.js で CSS フレームワークを 3 つ試した。
インストール
npm install --save @nuxtjs/vuetify
npm install --save @nuxtjs/font-awesome
モジュールを追加
modules: [
'@nuxtjs/vuetify',
'@nuxtjs/font-awesome'
]
vuetifyjs公式を参考に使えるようにしてみる
<template>
<div id="app">
<v-app>
<my-header />
<nuxt />
<my-footer />
</v-app>
</div>
</template>
vuetifyjs公式→UI componentにフッターの例があったので入れてみる
<template>
<v-footer height="auto">
<v-card
flat
tile
class="indigo lighten-1 white--text text-xs-center"
>
<v-card-text>
<v-btn
v-for="icon in icons"
:key="icon"
icon
class="mx-3 white--text"
>
<v-icon size="24px">{{ icon }}</v-icon>
</v-btn>
</v-card-text>
<v-card-text class="white--text pt-0">
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</v-card-text>
<v-card-text class="white--text">
©2018 — <strong>Vuetify</strong>
</v-card-text>
</v-card>
</v-footer>
</template>
<script>
export default {
name: 'Footer',
data: () => ({
icons: ['fab fa-facebook', 'fab fa-twitter', 'fab fa-google-plus', 'fab fa-instagram']
})
}
</script>
font-awesomeのiconがなんかイタリックになっちゃう
共通scssに下記を追記してごまかした修正してみた
.icon {
&:before {
font-family: FontAwesome;
font-style: normal;
}
}
iconにリンクがつけれるようにしてみる
<template>
<v-footer height="auto">
<v-card
flat
tile
class="indigo lighten-1 white--text text-xs-center"
>
<v-card-text>
<v-btn
v-for="icon in icons"
:key="icon.id"
icon
class="mx-3 white--text"
v-bind:to="icon.url" // 追加
>
<v-icon size="24px">{{ icon.name }}</v-icon> // 名前を呼び出す
</v-btn>
</v-card-text>
<v-card-text class="white--text pt-0">
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</v-card-text>
<v-card-text class="white--text">
©2018 — <strong>Vuetify</strong>
</v-card-text>
</v-card>
</v-footer>
</template>
<script>
export default {
name: 'Footer',
data () {
return {
icons: [// 名前とurlを返すように修正
{ name: 'fab fa-facebook', url: '/' },
{ name: 'fab fa-twitter', url: '/user' },
{ name: 'fab fa-google-plus', url: '/' },
{ name: 'fab fa-instagram', url: '/user' },
]
}
}
}
</script>