Vue 3の開発環境を作り、ViteとSFCの構造を理解する - Vueの基礎 第1回
📅
npm create vite@latestproject name: で名前を入力します。例えば my-vue-app とします。Select a framework: では矢印キーで Vue を選び、Enterを押します。Select a variant: では JavaScript または TypeScript を選びます。今回は JavaScript を選びます。cd my-vue-app
npm installnpm install は、プロジェクトに必要なパッケージをダウンロードしてインストールするコマンドです。
終わったら、開発サーバーを起動できます。npm run devhttp://localhost:5173 のようなアドレスが表示されます。
アドレスをブラウザで開くと、「You did it!」というメッセージと、回転するVueロゴが表示されます。.vue ファイルです。
レゴブロックのように、1つの .vue ファイルが独立したコンポーネントになります。1つのファイルにHTML、JavaScript、CSSをまとめられるので、関連するコードを管理しやすくなります。src/components/HelloWorld.vue を開くと、次のような構成を確認できます。<script setup>
// JavaScript 로직이 들어가는 부분
// 컴포넌트의 데이터, 함수 등을 정의합니다.
import { ref } from 'vue'
defineProps({
msg: String,
})
const count = ref(0)
</script>
<template>
<h1>{{ msg }}</h1>
<div class="card">
<button type="button" @click="count++">count is {{ count }}</button>
</div>
<p>
Edit
<code>components/HelloWorld.vue</code> to test HMR
</p>
</template>
<style scoped>
/* CSS 스타일이 들어가는 부분 */
/* `scoped` 속성을 사용하면 이 스타일은 현재 컴포넌트에만 적용됩니다. */
.read-the-docs {
color: #888;
}
</style><template> 🔗template 内の {{ }} などの構文を使い、データを画面に表示します。<script setup> 🔗setup 属性でコンポーネントのロジックを簡潔に書けます。
setup を使うと、コンポーネントのインスタンス作成時に実行される関数のように動き、リアクティブなデータを宣言したり、関数を定義したりできます。<style scoped> 🔗scoped 属性です。
scoped を付けると、<style> 内のCSSが.vue 単一ファイルコンポーネント（SFC）の各部分の役割も確認しました。
SFCは、Vueプロジェクトを整理して管理し、開発を効率化するうえで重要です。次回はVueのテンプレート構文を詳しく見て、データを画面に表示し、ユーザー入力を処理する方法を学びます。