Vueの簡単インストール（VisualStudioCode環境)

Vue使いたいんだけど、公式を見ると色々書いてあって結局よくわからない。

VisualStudioCodeを使ってやりたいんです。って方の記事です。

Vueの公式のチュートリアルはたくさんあって素敵だと思います。

Vue.js

Vue.js - The Progressive JavaScript Framework

vuejs.org

Intro to Vue 3 - Intro to Vue 3 (Options API) | Vue Mastery

Brand new to Vue? Start learning the basics in this lesson that explores the essential syntax.

www.vuemastery.com

VisualStudioCodeでの環境構築（ローカル環境開発）

１，Node.jsのインストール

Node.js — どこでもJavaScriptを使おう

Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.

nodejs.org

2. Vue CLI のインストール（初回のみ）

VisualStudioCodeの表示から「ターミナル」選択表示させる。そこに以下のコマンドを打ち込む

npm install -g @vue/cli

3. プロジェクトの作成

vue create my-project

対話形式で設定を選べます。基本は「Default（Vue 3）」でOKです。

特にYarnを使う必要がなければ、標準の NPM　で問題ないです。

Vue CLI v5.0.9
? Please pick a preset: Default ([Vue 3] babel, eslint)
? Pick the package manager to use when installing dependencies:
Use Yarn
>Use NPM

４，実行

できたフォルダに移動します

cd my-project

実行します。

npm run serve

私のパソコンは遅いので2分くらいかかりました。

これが出れば終了です。

localhost:8080

にアクセスしましょう。

以下のような感じで起動します。

５，🧩 VSCode のおすすめ拡張機能

• ✅ Volar（Vue 3 用の言語サポート）
• ✅ ESLint（コード品質チェック）
• ✅ Prettier（コード整形）
• ✅ Vue VSCode Snippets（コード補完）

６，src/components/HelloWorld.vueを見てみる

🧩 意味と役割の解説

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}

export default

• このオブジェクト（Vue コンポーネント）を他のファイルから使えるように「外に出す」命令。
• 例えばApp.vue などで<HelloWorld/> として使えるようになります。

name:’HelloWorld’

• このコンポーネントの名前。デバッグツールやテンプレート内で識別するために使われます。
• <HelloWorld/> というタグで使えるようになる。

props:{msg:String}

• 親コンポーネントから渡される「プロパティ（props）」の定義。
• msgという名前の文字列（String）を受け取ることができる。
• 例えばこう使います：

<HelloWorld msg="こんにちは Vue!" />

このとき、 HelloWroldコンポーネントの中では msgを使って表示できます：

<p>{{ msg }}</p>

🧠 補足：このコンポーネントは何に使う？

• Vue の基本構造を理解するための「Hello World」的なサンプル。
• props を使って親からデータを受け取る仕組みを学ぶための例。

７，runに関して