はじめに
今回は@vue/cliのインストールをしてから実際にVueプロジェクトを実行するまでを書いていきます!
Node.jsがインストールされている必要があるので、
まだインストールできていない人はNode.jsのインストール方法(Windows)を見てね!
目次
- @vue/cliのインストール
- vue create コマンドでVueプロジェクトの作成
- 実際にブラウザで確認してみよう!
1. @vue/cliのインストール
- @vue/cliはVueプロジェクトの雛形を作るのを便利にしてくれるコマンドラインインタフェースです! 以下のコマンドを実行するとインストールできます!
$ npm install -g @vue/cli
- @vue/cliが正しくインストールされているかを確認する場合は「vue --version」を実行し、 バージョン情報が表示されればOK!
$ vue --version
@vue/cli 4.5.7
2. vue create コマンドでVueプロジェクトの作成
- 「vue create project-name」を実行すると作成されます(project-nameは自分の好きな名前で作れます)
$ vue create sample
- 以下のように表示されたらエンターでOK!
- Vueプロジェクトの雛形が以下のように生成されます
3. 実際にブラウザで確認してみよう!
- 作成されたプロジェクトフォルダに移動し「npm run serve」を実行!
$ cd sample
$ npm run serve
- ブラウザを開いて「http://localhost:8080」にアクセスし下図のような画面が表示されていれば成功!