快速开始

让我们一起开启 Vue 的学习之旅吧！💫

创建新项目

选择你喜欢的工具
创建项目
启动开发服务器
开始编码！

使用官方脚手架

npm create vue@latest my-vue-app

cd my-vue-app
npm install
npm run dev

使用 CDN

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">{{ message }}</div>

  <script>
    const { createApp } = Vue
    createApp({
      data() {
        return { message: 'Hello Vue! 💚' }
      }
    }).mount('#app')
  </script>
</body>
</html>

第一个组件 📝

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">
    点击了 {{ count }} 次 🎯
  </button>
</template>

🌸恭喜你迈出了第一步！继续加油哦！💫