WindowsでSPAを爆速開発したかった

概要

Nuxt.js + Netlifyで爆速構築するサーバーレスSPA開発入門を基に爆速開発をしたかったのだけど、思いの外躓きが多かった。

導入

まず、Nodistが古くてnpxに対応しておらず、npmで何やかんやするところからうまくいかない。

• Nodistをアンインストール。
• nvm-windowsを導入して解決。
• nvmのwindows版なので、nvmを知っていれば特に問題はない。

リポジトリ作成

Githubだとプライベートリポジトリが有料なのでGitlabを使おうとした。

• gitlabのリポジトリ作成＋クローン
  • 別記事にまとめた が、GitHub連携で作成したアカウントにパスワードを設定しないとクローンが上手くいかなかった。

プロジェクト作成

1. クローンしたリポジトリの1つ上の階層まで移動。
2. npx create-nuxt-app [リポジトリ名（フォルダ名）]で、既存リポジトリに対してnuxtプロジェクトを生成

リポジトリ内で実行してしまうと、新しくフォルダを作り、その中にnuxtプロジェクトを作成してしまう。
ファイル移動で対応すると、npm run build が上手く行かなくなるおかげで3回ぐらい作り直した。

lint設定

プロジェクト作成時にes-lintを入れておくと、かなり強力な警告を出してくれるが、vueファイルのインデントのスペースが1つ余計なだけでエラーを出し、画面確認をさせてくれないので趣味でやるには厳しすぎる…

• .eslintrc.js の設定を修正する（デフォルトはvue/recommended）
• eslint-plugin-vueのFAQに載っていた。

eslintrc.js

extends: [
  'plugin:vue/base'
],

エディタ設定

シンタックスハイライト

Atomでvueファイルを編集しようとしたが、そのままだとシンタックスハイライトが効かない。

• language-vue-component を導入
• 「Vue Component」のシンタックスが適用できるようになる。

emmet

シンタックスハイライトが効くようになったが、emmetのコマンド（展開）が使えないまま。
キーマップの設定ファイルに下記を追加する。
emmet-atomのissue のコメントにあった。

keymap.cson

atom-text-editor[data-grammar~="vue"]:not([mini])':
  'tab': 'emmet:expand-abbreviation-with-tab'

ここまでやってやっと

思うようにファイルをエディタで編集して、確認できる環境ができた。

その他

• vuetifyを導入してみたけど、レイアウトは使わずに自分で書きそう。コンポーネントだけ使う。 結局レイアウトも使った。