[JavaScript]Node.js+Vue.js+Vuetify環境構築（完全個人仕様）

タスクリスト

Node.jsをインストールする。
npm-check-updatesをインストールする。
Vue CLIをインストールする。
Vuetifyをインストールする。

Node.js（公式）

https://nodejs.org/ja/

今は公式からLTSをインストールすればよい。
パッケージマネージャはLTSとは限らない。大抵、古い。
フロントエンドはブラウザがホストになるので、バックエンドほど気にしなくて良い部分でもある。

Debian/Ubuntuは専用のセットアップツールが公開されているので、Node.jsサーバーはこのLinuxディストリビューションが2022年時点ではベター。

https://github.com/nodesource/distributions/blob/master/README.md

他OSのパッケージマネージャーについてはここに書いてある。

https://nodejs.org/ja/download/package-manager/

尚、Node.jsのバージョン管理ツールNodistは2019年で開発が終わっている。

https://github.com/nullivex/nodist/releases

nというパッケージでも管理できるらしい。

https://www.npmjs.com/package/n

npm-check-updates

npm install -g npm-check-updates

https://www.npmjs.com/package/npm-check-updates

package.jsonにバージョンを反映する場合は下記のコマンド。
Vue2環境ではマイナーバージョンだけ上げることが多い。
メジャーバージョンが上がるとバージョン不整合に陥りやすいので、ほぼこれでOKな気がする。
OSならUNIX/Linux、Pythonではこの辺りで苦労したことないけど、Node.jsは多いような気がする。

ncu -u --target minor

Vue CLI

npm install -g @vue/cli

https://cli.vuejs.org/#getting-started

Vuetify

vue create <PROJECT NAME>
cd <PROJECT NAME>
vue add vuetify

https://vuetifyjs.com/ja/getting-started/installation/#vue-cli-306b3088308b30a430f330b930c830fc30eb

Bootstrapよりは柔軟なため良い。
…が、BootstarpもVuetifyもVue3への対応が遅いので、React+Material UIに置き換える予定。

Vue.jsは慣れればさくっと作れていいと思うけど、Vue2ベースでは依存パッケージが古めのものを使わないとダメだから、脆弱性絡みの警告やエラーは結構でてくる。

フロントエンド開発はMetaのライブラリが人気らしいけど、何となくわかった…とはいえ、どの環境で作るにしても、個人で作る分にはTypeScriptを使うので、変わらない部分もある。

6月 13, 2022

RFull Development

Vuetify, 環境構築