WordPressからNuxt+Firebaseへの移行 ② プロジェクト立ち上げ、記事作成画面、マークダウンエディター
2019.11追記 ここに書いてあるのは古い内容で、あまり筋が良くなかったので現在は作業方針を変えています。詳しくは以下の記事をご覧ください。
前回までのあらすじ
脱WordPressしてHeadless CMSに移行することを決めたものの、記事数が多すぎてContentfulを使えないため、データ保存にFirestoreを使うことを決意しました。 この移行作業中も現行のブログを更新していくつもりなので、 データ保存以外の作業を全部終わらせてから最後にデータ引っ越しする方が効率が良いなと思い、まずはFirebaseで新規ブログを作る気持ちで開発を始めることにしました。 ※この記事はVue.js / Nuxt.jsについてはある程度わかっている前提で書いています。初めてNuxt.jsに触れるという方がこれをやるのはオススメしません。Nuxt.jsのプロジェクトを準備
さすがにVS Codeとかyarnとかの説明は省略。 インストール - Nuxt.jsに従ってcreate-nuxt-appします。
とりあえずLinter、Prettier、Axiosなどは全部入れておきます。 この画面でついでにsass-loaderとかも入れられれば別途入れるものがなくなるのだけど、ないのでyarn add --dev node-sass sass-loader。 あとはnuxt.js(v2)の作業ディレクトリを整理 - Qiitaで作業フォルダをsrcに移す程度。コードの自動フォーマット
ESLintとPriettier、別に邪魔になるものでもないのでとりあえず設定しておいて損はないかと思います。 ESLintの設定は開発ツール - Nuxt.jsで。 基本的にはnuxt.config.jsも.eslintrc.jsも全てコピペすれば良いと思うのですが、nuxt.config.jsのextendの中身を// Run ESLint on save if (ctx.isDev && ctx.isClient) { config.module.rules.push({ enforce: 'pre', test: /\.(js|vue)$/, loader: 'eslint-loader', exclude: /(node_modules)/, options: { fix: true } }) }` と、optionsでfix: trueを指定すると、ファイルを保存するたびに勝手にコードの整形まで走らせてくれます。便利な時代になりました。 .eslintrc.jsに関しては、余計なカスタムをせずに広く支持されているルールに従うべきだと思っていますが、 // add your custom rules here globals: { alert: false, document: false, console: false, location: false, process: false, firebase: false }, rules: { "semi": [2, "never"], "no-console": "off", "vue/max-attributes-per-line": "off", "prettier/prettier": ["error", { "semi": false ...