小村の開発環境構築(6) Ubuntuの設定(Nuxt.js用)

  • こんばんは、小村だよ!

  • 今日はNuxt.jsを使用して開発するうえで必要なものをインストールをするよ!

  • なので他の言語を使う人はあまり参考にならないかも!

  • あ、でもNode.js系を使う人はそのまま参考になるかも!



やること

  1. nvm, npm, nodeのインストール
  2. yarnインストール



事前準備



手順

nvm, npm, nodeのインストール

  • まずはそれぞれインストールされているかを確認
nvm --version
npm --version
node --version
f:id:kom314_prog:20210531220312p:plain
# curl存在確認
curl --version

# 存在しなければインストール
# sudo apt-get install curl 
f:id:kom314_prog:20210531221355p:plain
  • ばっちり存在!バージョンとかは気にしません

  • それでは下記でnvmをインストール

curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
f:id:kom314_prog:20210531221935p:plain
  • インストール完了!なんか反映には再起動なりが必要らしい

  • 新しいコンソールを開いてバージョン確認

nvm --version
f:id:kom314_prog:20210531222305p:plain
  • ばっちりやで工藤!

  • そいだらnvmを使用してnodeをインストールすんで!

nvm install node
f:id:kom314_prog:20210531223003p:plain
  • この勝負、もろたで工藤!

  • nvmでnodeをインストールするとな!自動的にnpmもいい感じになるんや!

  • つーわけで最後にバージョンの確認やで!

nvm --version
npm --version
node --version
f:id:kom314_prog:20210531223528p:plain
  • やったで工藤!!!

  • これがワイのワイルドワイバーンや!!!



yarnインストール

  • 参考:npmとは yarnとは

  • yarnはパッケージマネージャで、npmの上位互換という認識

  • では、以下コマンドでyarnが入っているか確認

yarn --version
f:id:kom314_prog:20210531224652p:plain
  • ざんね~~~ん!ないのでインストール!

  • 参考:ヤーン、Ubuntu20.04用のこのJavaScript依存関係マネージャーをインストールします

    • 日本語でおk

      • 翻訳が怪しいけどよさげな参考サイトが見つけられなかった……
    • 要は、aptにyarnのライブラリを追加してインストールするのかな

    • 注意点としてNode.js、NPM使用時はsudo apt install yarnだとダメらしい

      • おもいっくそ前の項でインストールしてるわ

      • sudo apt install --no-install-recommends yarn のコマンドがいいみたい

  • 以上をまとめると下記になりそう。やーーー怪しい翻訳こっっっわ!

curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update
sudo apt install --no-install-recommends yarn
yarn --version
f:id:kom314_prog:20210531230003p:plain
  • できてルーーー!!!

  • ままままぁこここれくらいわわ私にはどどどおってことないわね!!!!

  • 正直2行目とか4行目あまり理解できてないけどね!!!!!!

  • 他のサイトみても同じようなコマンドだしいいんでしょう!!!きっと!!!

  • 結果おーらい!!!ビバ!!!あびばびば!!!



おわりに

  • というわけで、Nuxt.jsを使う上での最低限のインストール系はおしまい!

  • また必要そうなものがあればここに追記していきまーーーす!

  • ではでは次回はGitHub関連の設定をするよ!

  • まったね~~~!ちゃお!