などの疑問や悩みを解決してまいります。
この記事ではVue.jsで開発するための環境構築の手順を初心者の方にもわかりやすく解説していきます。
前提条件
Node.jsがPC内にインストールされていること
Node.jsがまだインストールできていない方はこちらからインストールしてください。
またインストールされているか確認したい場合はターミナルで以下コマンドを入力してください。
node -vこれで以下のようにインストールしているNode.jsのバージョンが表示されたらインストールされています。
①テキストエディタを開く
まずは自分が使用しているテキストエディタを開きましょう。
今回はVSCodeを使って説明していきます。
②ターミナルを開く
次にターミナルを開きます。
ターミナルを開く方法は以下の2つの方法があります。
ターミナルを開く方法
- メニューから開く方法
- ショートカットで開く方法
メニューから開く方法
エディタ上部にある「Terminal」します。にカーソルを合わせます。
するとメニューが展開され、その中に「New Terminal」とありますのでクリックします。
するとエディタ下部でターミナルが開かれたかと思います。これでOKです。
ショートカットでターミナルを開く方法
ターミナルはショートカットキーでも開くことが可能です。
Ctrl＋shift＋＠で開くことができます。
③コマンドを入力していく
次にコマンドを入力していきます。
npm create vue@latest
まずは開発フォルダ内にVueファイルを作成します。
作成する方法は先程開いたターミナルで以下のコードを入力します。
> npm create vue@latestこちらを入力してenterキーを押すと以下のようにオプションを設定する項目が表示されます。
今回は単純に環境構築をするだけですので、項目の詳しい解説は割愛させていただきます。
一旦ここではすべて「No」としておいてください。
すべて選択したら開発フォルダ内にProject nameで設定した名称（今回はvue-project）のフォルダが追加されたかと思います。
これがVueファイル群になります。
npm install
次にnpmをインストールしていきます。
npm とはNode.jsのパッケージを管理するシステムのことです。
インストールすることでローカルサーバーを立ち上げることができるようになります。
ターミナルに以下のコードを入力してください。
npm install入力してenterキーを押すとインストールが開始します。
インストールが終わったらローカルサーバーを立ち上げてVueファイルが表示されるか確認してみましょう！
npm run dev
最後にローカルサーバーを立ち上げてVueファイルの表示を確認できるようにしていきたいと思います。
ターミナルに以下コマンドを入力してください。
npm run devコマンドを入力したら以下のようにターミナルに表示されるかと思います。
このhttp://localhost:○○○○/というのがローカルサーバーにアクセスできるURLです。
アクセスすると以下のようにVueのページが表示されれば環境構築は正常に行われました。お疲れ様でした。
