概要
Nuxt.js + Netlifyで爆速構築するサーバーレスSPA開発入門を基に爆速開発をしたかったのだけど、思いの外躓きが多かった。
導入
まず、Nodistが古くてnpxに対応しておらず、npmで何やかんやするところからうまくいかない。
- Nodistをアンインストール。
- nvm-windowsを導入して解決。
- nvmのwindows版なので、nvmを知っていれば特に問題はない。
リポジトリ作成
Githubだとプライベートリポジトリが有料なのでGitlabを使おうとした。
- gitlabのリポジトリ作成＋クローン
- 別記事にまとめた が、GitHub連携で作成したアカウントにパスワードを設定しないとクローンが上手くいかなかった。
プロジェクト作成
- クローンしたリポジトリの1つ上の階層まで移動。
-
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を導入してみたけど、レイアウトは使わずに自分で書きそう。コンポーネントだけ使う。結局レイアウトも使った。