【Vue.js】基礎知識とvue-cliを使用した開発環境の構築（Windows）

この記事の内容

1. はじめに
   • Vue.jsとは？
   • Vue.jsが使われているサービス一例
   • Vue.jsの特徴
2. 開発環境の構築
   • 開発環境
   • vue-cliのインストール

はじめに

---

Vue.jsとは？

Vue.js（ヴュージェイエス）はWebアプリケーションにおけるUIを構築するための オープソンソースのJavaScriptフレームワークです。

GoogleでAngularJSを使用した開発に携わったEvan Youによって開発され、2014年2月にリリースされました。

Vue.js公式サイト
https://jp.vuejs.org/index.html

Vue.jsが使われているサービス一例

・LINE
・Retty
・note

Vue.jsの特徴

・HTML/CSSや、JavaScriptの知識がある場合の学習コストが低い
・シンプルで拡張性が高い
・コンポーネント単位で区切ることでの再利用性が高い

開発環境の構築

---

開発環境

本記事の開発環境
・Windows10
・VS Code 1.47.2

この記事でインストールするもの
・Vue CLI 4.4.1

前提として、Node.jsやNpmについては既にインストールがされているという環境を想定して記事を作成しています。
インストールされているかどうかが分からない方はコマンドプロンプトで以下のコマンドをそれぞれ実行し確認してみてください。

npm -v
node -v

インストールされていなかった場合は、以下の記事を参考にNode.jsとNpmのインストールを実施してください。

【React Native】基礎知識とExpoを使用した開発環境構築！（【Node.js とNpmのインストール】項）

vue-cliのインストール

以下のコマンドを入力するとインストールが開始されます。

npm install -g @vue/cli

インストールが完了したら、念のため以下コマンドでインストールの確認を行います。

vue --version 

これでインストールは完了です。

以下のブログでは本内容に加えて、vue-cliをインストール後、アプリ実行～HelloWorld表示までを紹介しています。
是非見てね！
ロックシステム技術ブログ：【Vue.js】基礎知識とvue-cliを使用した開発環境の構築（Windows）