Vue.jsの開発環境の作成方法について説明します。
ここではVue CLI(Command Line Interface)を使用して環境構築を行う方法と手順を説明します。
Vue CLI は、手早くVue.jsで開発するためのシステムであり、
ビルドの複雑な処理の一部 (Babel や Webpack の使用など) を実行する、npmパッケージです。
今回はこれを使用して開発環境を作成していきます。
Vue公式サイト
Vue CLI公式サイト
手順
補足
以下は使用するツールおよびパッケージとその説明
| 用語 | 説明 |
|---|---|
| Node.js | サーバーサイドで動くJavascript WindowsではインストーラーによるNode.jsのインストールでnpmもインストールされる |
| npm | 「Node Package Manager」の略 Node.jsのパッケージを管理するためのもの 後述する「Vue CLI」の使用に必要 |
| Vue.js | JavaScriptをベースとしたUI構築のためのフレームワーク |
| Vue CLI | Vue.jsで開発をするためのnpmパッケージ CLIとは「Commnad Line Interface」で、 Vue CLIは「@vue/cli」「vue-cli」とも記載される |
1, node.jsのインストール
まずはnode.jsをインストールします。
公式からインストーラーをダウンロードします。
ダウンロードが終わったら、以下のようなファイルがあります。
実行してnode.jsをインストールします。
インストールが終わったら、コマンドプロンプトで以下のコマンドを実行します。
バージョンが表示されればインストールできています。
node --version
2，Vue CLIをインストールする
ここからはコマンドプロンプトで操作します。
以下のコマンドを実行して、Vue CLIをインストールします。
npm install -g @vue/cli※”-g”は「global install」の意
こちらもインストールできているか確認します。以下のコマンドを実行してバージョンを確認します。
※Vue CLI のバージョンが表示されます。
vue --version
3，開発用のテンプレートを作成する
以下のコマンドを実行して、開発用のテンプレートを作成します。
vue create {プロジェクト名}{プロジェクト名}は好きな名前をつけてください。この名前でフォルダが作成されます。
Vueのバージョンを選択するところがありますので、任意のバージョンを選択してください。
ここでは一番上の「Vue3」を選択します。
※Vue2 は2023/12/31でサポート終了
4，開発環境を起動させる
以下のコマンドを実行していきます。
作成したプロジェクトのフォルダ内に移動する
cd {プロジェクト名}プロジェクト（サーバー）起動
npm run serveサーバーを起動できたら、作成した開発環境にアクセスできるようになります。
ブラウザで localhost:8080 にアクセスすると画面が表示されます。
以上がVue CLIを使用した開発環境構築の手順です。
※vueコマンドについて
以下のコマンドを実行すると、vueコマンドの一覧が確認できます
vue -h
コメント