なにはともあれはとりあえずVue.jsの開発環境を準備します。
環境は Windows10 です。
Vue.jsの開発環境には以下の2点が必要です。
- Node.js および npm
- Vue CLI
「npm」はNode Package Managerの略です。Node.jsとともにインストールが可能です。
順番にインストールしていきます。
Node.js および npmのインストール
下記Webページにアクセスして、node.js および npm のインストーラをダウンロードします。
https://nodejs.org/en/download/
「node-v12.14.1-x64.msi」のような名前でインストーラがダウンロードできるので、起動します。
「Next」をクリック。
規約に同意するにチェックをつけて、「Next」をクリック。
特にデフォルトから変える必要はないので、「Next」をクリック。
「Next」をクリック。
「Install」をクリック。
「Finish」をクリック。
コマンドプロンプトを起動して、下記コマンドを実行してみましょう。
npm --version
バージョンが表示されればnpmのインストール完了です。
Vue CLIのインストール
続けてコマンドプロンプトで下記コマンドを実行して、Vue CLIをインストールしましょう。
npm install -g @vue/cli
下記コマンドを実行して、バージョンが表示されれば、インストール完了です。
vue --version
とりあえずプロジェクトを作ってみる
まずは動くものを見たいという方は早速プロジェクトを作ってみましょう。
コマンドプロンプトで、任意のフォルダで下記コマンドを実行します。
vue create myvue
「myvue」の部分はプロジェクト名ですので、任意につけてください。
Enterキーを押します。
画面に表示された通り、素直に以下のコマンドを実行します。
cd myvue npm run serve
これでプロジェクトがPC上で起動したので、以下のURLにアクセスしてみましょう。
http://localhost:8080/
おめでとうございます！これでもうVue.jsで開発したことがあると言えますね。
終了するには、コマンドプロンプトで Ctrl + C を押してください。