シェル(@takasqr)のブログ

【Vue3】vue-cliをインストールして始める

はじめに

Vueはvue-cliを使うことで、簡単にプロジェクトを作成して、デバッグを始めることができます。

今回はvue-cliを使ってVueのプロジェクトを立ち上げる方法を紹介します。

https://cli.vuejs.org/

この記事を書いた人

@takasqr アプリケーション開発が大好きなエンジニア。Vue、Swift、Electrom などでアプリを作って公開している。AWS や Firebase などのクラウドサービスも好き。

作ったアプリKeyScript

Vue.jsとは?

Vue.jsは一言で言うと、「フロントエンド(ブラウザ)で動く、javascriptのフレームワーク」です。

vue-cliをインストール

npm install -g @vue/cli

Vueのプロジェクトを作成

vue create hello-world

vue-cliのバージョンがv4.5.4でプロジェクトを作成したところ、Vue3でプロジェクトを作るか聞かれました。

Vue3で作ってみました。

? Please pick a preset: Default (Vue 3 Preview) ([Vue 3] babel, eslint)

ちなみにvue-cliのバージョンは、

vue --version

で確認できます。

vue-cliのアップデートは、

npm update -g @vue/cli

で行うことができます。

Vueをデバックする

cd hello-world
npm run serve

Welcome to Your Vue.js Appと表示されれば成功です。