WSL2にvueの開発環境を構築

6625 ワード
vite Vue.js Ubuntu WSL2 Node.js Node.js テキストリンク

WSL2のubuntuのアップデート

$ sudo apt update
$ sudo apt upgrade

Node.jsの環境構築

マイクロソフトのドキュメント

nvmのインストール

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 13527  100 13527    0     0  28537      0 --:--:-- --:--:-- --:--:-- 28537
=> Downloading nvm from git to '/home/nomura/.nvm'
=> Cloning into '/home/nomura/.nvm'...
remote: Enumerating objects: 288, done.
remote: Counting objects: 100% (288/288), done.
remote: Compressing objects: 100% (254/254), done.
remote: Total 288 (delta 33), reused 112 (delta 22), pack-reused 0
Receiving objects: 100% (288/288), 146.58 KiB | 422.00 KiB/s, done.
Resolving deltas: 100% (33/33), done.
=> Compressing and cleaning up git repository

=> Appending nvm source string to /home/nomura/.bashrc
=> Appending bash_completion source string to /home/nomura/.bashrc
=> Close and reopen your terminal to start using nvm or run the following to use it now:

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

ubuntuを再起動

$ nvm --version
0.35.2

nodejsの最新版(15.5.0)をインストール

$ nvm install 15.5.0
Downloading and installing node v15.5.0...
Downloading https://nodejs.org/dist/v15.5.0/node-v15.5.0-linux-x64.tar.xz...
################################################################################ 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v15.5.0 (npm v7.3.0)
Creating default alias: default -> 15.5.0 (-> v15.5.0)
$ node -v
v15.5.0

安定版をインストールしたい場合は、

$ nvm install --lts

vueのインストール

$ npm install -g @vue/cli
npm WARN deprecated [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/[email protected]: Moved to 'npm install @sideway/address'
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated @hapi/[email protected]: Switch to 'npm install joi'

added 1373 packages, and audited 1374 packages in 1m

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

found 0 vulnerabilities
$ vue --version
@vue/cli 4.5.9

vue create [プロジェクト名]のあとにvue 3を選択する。

Vue CLI v4.5.9
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
❯ Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features

Vue CLI v4.5.9
✨  Creating project in /home/nomura/sample.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


added 1269 packages, and audited 1270 packages in 41s

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

found 0 vulnerabilities
🚀  Invoking generators...
📦  Installing additional dependencies...


added 71 packages, and audited 1341 packages in 7s

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

found 0 vulnerabilities
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project sample.
👉  Get started with the following commands:

 $ cd sample
 $ 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.

$ cd sample
$ npm run serve

> [email protected] serve
> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 4468ms

Vite

Software Design 2021/1のViteのセットアップを試してみる。

$ npm init vite-app vue-todo-list
Need to install the following packages:
  create-vite-app
Ok to proceed? (y) y
Scaffolding project in /home/nomura/vue-todo-list...

Done. Now run:

  cd vue-todo-list
  npm install (or `yarn`)
  npm run dev (or `yarn dev`)

$ cd vue-todo-list/
$ npm install
npm WARN deprecated [email protected]: Please update to v 2.2.x

added 326 packages, and audited 327 packages in 20s

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

found 0 vulnerabilities
$ npm run dev

> [email protected] dev
> vite

[vite] Optimizable dependencies detected:
vue

  Dev server running at:
  > Local:    http://localhost:3000/
  > Network:  http://172.30.106.45:3000/

アクセスしてみると以下のような画面が表示されました。