Vue.jsのvue-cliをインストールから動作確認まで（備忘録）

どうも、更新頻度がかなり低いマサです。

最近、大学関連で静的なサイトを持つようになり、いちいちHTMLファイルを作成するのが面倒で仕方なく感じるようになりました。

そこで、何とかして楽はできないかと思い、今まで使っていたvue.jsで何とかならないかと色々試行錯誤してみることに。

正直、gatsby.jsを使えば良いんじゃないの？とは思いましたが、今回はvue.jsを使うことにします。

npmでインストールする

前提としてOSはWindows10です。

package.jsonを作成していない場合、念のため作成しておきます。（エラーか警告が出る）
今回はグローバルインストールだから多分関係ないはずです。

$ npm init -y

vue-cliをインストール

$ npm install -g @vue/cli

色々警告（WARNING）が出ますが動作に問題がなさそうなのでスルーします。
インストールされているかの確認として以下のコマンドを打ってみる。（グローバルインストールなので、-gオプションが必要）

$ npm ls -g --depth=0

結果

+-- @vue/cli@4.5.8
npm ERR! peer dep missing: vue@3.0.2, required by @vue/compiler-sfc@3.0.2

何かエラーが出てきた…
どうやら、必要とされているパッケージが入ってないっていう警告らしい。
オプションを「—depth=1」にして調べてみると、vue@2.6.12があるから、バージョンが3じゃなくてエラーを吐いているっぽい。

Githubのissuesに乗ってたけど、具体的な解決策が分からなかった。（vue-cliのissues）割と新しい投稿が多いから、最近のことらしい。
一応vueのパッケージ自体はあるようなので、このまま行ってみる。

プロジェクトの作成

とりあえず作ってみる。

プロジェクトの作成（今回はsample-project）

$ vue create sample-project

接続方法の確認。
特にどっちでも問題ないと思うけど Y で。

? Your connection to the default yarn registry seems to be slow.
Use https://registry.npm.taobao.org for faster installation? (Y/n) Y

プリセットの設定。矢印で選択する形式。
Vue3はまだベータ版のようなので今回はVue2を使う。

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

npmとyarnのどっちを使っているかの確認。
自分はnpmなので下ですね。

? Pick the package manager to use when installing dependencies: (Use arrow keys)
> Use Yarn
  Use NPM

結果

 … 略 …
⚓  Running completion hooks...

📄  Generating README.md...

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

 $ cd sample-project
 $ npm run serve

良い感じ。
このまま指示にあるように、cdで移動してnpm run serveで動かします。

$ cd sample-project
$ npm run serve

結果

> sample-project@0.1.0 serve C:\Users\xxx\sample-project
> vue-cli-service serve

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

 DONE  Compiled successfully in 2282ms                                                                           0:20:48


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.xx.xx:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

これで動いた感じですね。
ローカルのアドレスが渡されるのでブラウザで開きます。