ちょっとしたwebアプリをスクラッチで作る機会があって、vue-cliを使ってみようと思ったんですが、先人の解説記事どおりにやっていると

vue init webpack new-project

  Unknown command init.


   vue-cli · Failed to download repo vuejs-templates/[object Object]: Response code 404 (Not Found)

といった感じで怒られます。

公式webページを見ると

npm install -g @vue/cli
# or
yarn global add @vue/cli

vue create my-project

と書かれてて、そもそもパッケージ名からして違う・・・

とりあえず、initが無いって言ってるから、公式推奨のcreateをしてみると

vue create new-project

  Unknown command create.
  vue create is a Vue CLI 3 only command and you are using Vue CLI 2.x.

どうやら、メジャーバージョンが上がって色々変わってるようです。

というわけで、長い前置きでしたがvue-cli 3系列をちょろっと触ってみたメモです。

インストール

ドキュメントにある、

Zero config rapid prototyping via @vue/cli + @vue/cli-service-global.

というのを試してみたいので、このふたつをインストールします。

> npm install -g @vue/cli @vue/cli-service-global

新規プロジェクト作成

vue create new-projectとするとcursesっぽいテキストベースのメニューが現れて色々選択できます。

が、今回はこちらは使わずに、vue serveコマンドの方を使っていきます。ドキュメントにあるように、とりあえず適当なvueファイルをApp.vueという名前で作成してコマンドをたたくとビルドしてからサーバを起動してくれます。

> echo '<template><h1>Hello!</h1></template>' > App.vue
> vue serve -o
 DONE  Compiled successfully in 1164ms                                                                                                                                                            21:56:50

 
  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.0.31:8080/

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

vueファイルの名前をApp.vue(またはapp.vue)以外にする場合は、この後に続けてファイル名を指定します。また、-oオプションは、ビルド後にブラウザを開いて表示するという指定なので、不要であれば外してください。

f:id:n_so5:20180531223630p:plain