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
github.com
に書いてあるようにインストールするだけ。
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 ...
stackoverflow.com
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
コメント