ロト君のサイト by lotokunn

L'sCore ロト君のサイトへようこそ!

  1. TOP
  2. パソコン
  3. Vue.js ローカル開発

Vue.js ローカル開発

皆さんこんにちは!今晩は!!ロト君です。
今回は、『Vue.js』のローカル開発について記載したいと思います。

1.Vue.jsとは?

Vue.jsとは、コンポーネント型のユーザーインターフェイスを構築するためのプログレッシブフレームワークです。

部分毎に、システムを構築出来るので小規模・大規模なシステム構成問わず、更新の際の改変がとても楽に出来ます。
(まだ、私は艱難辛苦していますが・・・。)

2.ローカル環境構築の仕方

ここでは主に、『Windows』でのシステム構成を記載致します。
構成に必要なモノは『コマンドプロンプト』です。

始めに、『Node.js』をインストールします。
Node.jsがインストールされていない場合は本家のWindows版をダウンロードして下さい。

ダウンロードが完了できましたら、コマンドプロンプト上でバージョンを確認してみて下さい。
バージョン情報が確認出来ればインストールされています。

コマンドプロンプト

node -v

続いて、『Vue.js』をインストールします。
インストールにはコマンドプロンプトを使用します。
コマンドプロンプト内に下記のモノを記述し実行します。

コマンドプロンプト

npm install -g vue-cli

無事に上記の魔法の呪文でインストール出来ましたら、バージョンを確認してみましょう!

コマンドプロンプト

vue -V

3.Webpackでのワークスペース作成

無事、起動出来ましたら『ワークスペース』を作成しましょう。
Webpackでのワークスペース作成は下記のコマンドで作成されます。

コマンドプロンプト

vue init webpack-simple FolderName

FolderNameには任意の名前を付けて下さい。

実行後、いくつか質問が来ますが、基本はEnterで進み、
後半の『Use sass?』には『Yes』で回答して下さい。

任意のフォルダ『FolderName』が作成できましたら、コマンドプロンプトで、移動します。移動の仕方は下記のモノです。

コマンドプロンプト

cd FolderName

移動が出来ましたら、Vue.jsをワークスペースにインストールします。
インストール方法は下記のモノです。

コマンドプロンプト

npm install

インストールが完了出来たら、最後の作業。
Vue.jsの起動です!!
起動コマンドは下記のモノです。

コマンドプロンプト

npm run dev

上手く起動出来たら下記の様な表示が出ます。

以上で、ローカル環境の構築が完了しました!
お疲れ様です!!!

4.まとめ

色々な参考書を読んでも毎回と言っていいほど『MacOS』の方法でしか説明が無かったので、私がインストール出来た方法を記載してみました。

少々、Blogのシステムを更新したので記述が難しくなってしまって上手く掲載出来てるか分かりませんが、少しでも役に立てればと思います。

では!今回はこの辺で!(>ω<)ノシ



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA



Hello!!

皆さんこんにちは!こんばんは!!ロト君です。

このサイトは私が興味を持ったモノやコトについて掲載をしていくサイトです。

主にパソコン関係やアニメ・ゲーム等について掲載すたいと思いますので、 どうぞ宜しくお願い致します!

コメント等はTwitter等を活用して頂けると有り難いです!!

Twitter: ロト君@lotokunn