ちょっとした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オプションは、ビルド後にブラウザを開いて表示するという指定なので、不要であれば外してください。
あとは、ゴリゴリとApp.vueファイルを更新すればとりあえず動くものはできるはずです。
this is only recommended for rapid prototyping.
とのことなので、ある程度のものができたら createでプロジェクトを作ってそっちに移行する方が良さそうですが。