Nuxt.js Typescript + PostCSS Template

元ネタ

https://github.com/nuxt-community/typescript-template/tree/22d0c56f20bfd588c264ba90b4a43e57f83fdb3f

ちがい

• ディレクトリ構成を変更し、srcディレクトリに各ファイルをまとめる構成にしました。
  • いくつかのディレクトリが追加・編集・削除されていますがなんとなく眺めてもらえればわかるかと思います。
• .gitignoreがより詳細に設定されています。
• prettierを設定しファイルコミット時にprettierがかかるようになっています。
  • エディタを設定しファイル保存時にprettierが実行されるようにするのがおすすめです。
• tslintを設定し.tsファイルの構文をチェックします。.vueファイルについては現在のところスルーです。
• stylelintを設定し.css, .vueファイルの構文をチェックします。
• sanitize.cssを読み込みCSSをリセットしています。
• nuxt-property-decoratorを削除しvue-property-decoratorに置き換えています。前者は�更新が止まっておりまた後者の劣化移植でしかないようにみえます。
• tsconfig.jsonを変更しより厳格にtsコードのチェックを行うようになっています。
• @nuxtjs/sitemapを導入しいい感じのsitemapを生成するようにしています。
• jestを導入しテストが書けるようになっています。yarn testで実行
• 諸々便利なので検証用にdockerでapacheが動くようになっています。詳しくはこの辺参照
  • nginxも追加しようかと思ってます

注意点

JavaScriptではなくTypeScriptです。補完が聞いて便利なんです

動かし方

# install module
yarn
# start development
yarn dev
# production build
yarn build
# ... and launch server
yarn start
# generate static files
yarn generate

拡張方法

新しいページを追加したい

src/pages/の下を拡張していくと勝手にルーティングも変更されてよしなにしてくれます。
詳しくはオフィシャルを参照あれ

その他

ほぼすべてnuxt.config.jsに設定がまとまっているので変更してください。
詳しくはオフィシャルを参照あれ

検証方法

docker-compose up -d でdistディレクトリをドキュメントルートとしてマウントしたapacheコンテナを起動できます。

http://localhost:8080 へアクセスすると確認できます。 .htaccessの検証に便利です。

TODO

• test
• .vue lint
• robots.txtとかfaviconとかの扱い