wsl+nvm+npm+vue.js

vue.js
あやしげな小屋

Windows10においてwslでvue.jsを開始するまで。

wsl + Ubuntu20.04にて事前準備を行う

dotファイルのバックアップとか

お好みで。

mkdir dot_bak
cd dot_bak
mkdir org
cp ~/.bash* ~/.motd_shown ~/.profile ./org/
cd ~
sudo apt update
sudo apt upgrate

nvm

インストール

GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions
Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions - nvm-sh/nvm

に書いてあるようにインストールするだけ。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

差分を見てみる。

 diff dot_bak/org/.bashrc  .bashrc
117a118,121
>
> export NVM_DIR="$HOME/.nvm"
> [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
> [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

ドットファイルの変更を有効にするため今のターミナルを閉じ新しいターミナルを開き今後の操作で使用する。

nvmを用いてnode.jsの最新版をインストール

 node.js のlong-term support (LTS) をインストールする。

nvm install --lts

インストールされた node.js のバージョンを確認。

user1@amebb:~$ nvm ls
->     v16.15.0
default -> lts/* (-> v16.15.0)
iojs -> N/A (default)
unstable -> N/A (default)
node -> stable (-> v16.15.0) (default)
stable -> 16.15 (-> v16.15.0) (default)
lts/* -> lts/gallium (-> v16.15.0)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.24.1 (-> N/A)
lts/erbium -> v12.22.12 (-> N/A)
lts/fermium -> v14.19.1 (-> N/A)
lts/gallium -> v16.15.0

node.js のバージョンを指定して使用を開始する。

user1@amebb:~$ nvm use v16.15.0
Now using node v16.15.0 (npm v8.5.5)
user1@amebb:~$ node --version
v16.15.0

vue.js

vue3に挑戦。

インストール

コマンドラインツールをインストールする。

user1@amebb:~$ npm -g add @vue/cli

時間が掛かった。バージョンは 5.0.4

user1@amebb:~$ vue --version
@vue/cli 5.0.4

一応インストールは成功したが、インストール最後のほうでごにょごにょと怪しいお知らせが。

npm notice New minor version of npm available! 8.5.5 -> 8.8.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.8.0
npm notice Run npm install -g npm@8.8.0 to update!

npmのバージョンをupdateするのがよろしいと言っているようだが、nvm配下なのに表示に従ってnpm install -g npm@8.8.0 としていいものかどうかしばし悩む。

素敵な解決策がこちらに。

How can I change the version of npm using nvm?
I've been using NVM to install the latest versions of Node.js for my Node.js work. It works totally fine for installing separate versions and switching between ...
user1@amebb:~$ nvm install-latest-npm
Attempting to upgrade to the latest working version of npm...
* Installing latest `npm`; if this does not work on your node version, please report a bug!

removed 6 packages, changed 69 packages, and audited 202 packages in 21s

11 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
* npm upgraded to: v8.8.0
user1@amebb:~$ npm --version
8.8.0

プロジェクト作成

user1@amebb:~$ mkdir -p acre/air
user1@amebb:~$ cd acre/air/
user1@amebb:~/acre/air$ vue create album
(略)
🎉  Successfully created project album.
👉  Get started with the following commands:

 $ cd album
 $ npm run serve

 WARN  Skipped git commit due to missing username and email in git config, or failed to sign commit.
       You will need to perform the initial commit yourself.

選択内容: Vue 3, babel, eslint。

時間がかかった。

起動

user1@amebb:~/acre/air$ cd album/
user1@amebb:~/acre/air/album$ npm run serve
(略)
  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.100.100:8080/

Windowsのセキュリティ警告

途中でWindows10にてセキュリティ警告が表示された。

  • このアプリの機能のいくつかがWindows Defenderファイアウォールでブロックされています

「アクセスを許可する(A)」ボタンを押下しておいた。

http://localhost:8080/ にてvueのサンプルページが表示された。

初期のファイル群

├── README.md
├── babel.config.js
├── jsconfig.json
├── node_modules
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue
│   ├── assets
│   ├── components
│   └── main.js
└── vue.config.js
スポンサーリンク

コメント

タイトルとURLをコピーしました