トップ > Vue.js > 【Vue.js】基礎 Vite、Vue CLI、SFC

【Vue.js】基礎 Vite、Vue CLI、SFC

Vue.js

Vue.jsの学習記録。

Vite

Vite（ヴィート）は Vue SFCサポートをする高速なビルドツール。

Vita + Vue を使い始めるには、以下を実行する。

npm init vite@latest

開発サーバの起動や Hot Module Replacement （HMR）の更新パフォーマンスの点で、開発体験が大幅に向上するため、Vue CLI ではなく Vite を利用すれば良い。
※HMR: 画面の再描画すること無しにJSの変更をブラウザに適用してくれる開発ツール

Vue CLI

Vue CLI は Vue プロジェクト用の webpack をベースとした公式のビルドツール。

Vue CLI + Vue を使い始めるには、以下を実行する。

npm install -g @vue/cli
vue create hello-vue

単一ファイルコンポーネント

Vue 単一ファイルコンポーネント（Single File Component: SFCと略する）は、Vueコンポーネントの、

  • テンプレート
  • ロジック
  • スタイル

を1つのファイルにまとめることができるファイル形式のこと。
*.vue ファイルで扱う。

<script>
export default {
  data() {
    return {
      greeting: 'Hello World!'
    }
  }
}
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>