【Vue3】如何创建Vue3项目及组合式API

在Vue 3中创建项目并使用组合式API（Composition API），你可以按照以下步骤操作：

1. 确保安装了Node.js和npm。
2. 安装Vue CLI，如果尚未安装，运行命令：npm install -g @vue/cli。
3. 创建一个新的Vue 3项目，运行命令：vue create my-vue3-project，然后选择Vue 3。
4. 进入项目目录：cd my-vue3-project。
5. 运行项目：npm run serve。

以下是一个简单的Vue 3组件示例，展示了如何使用组合式API：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="incrementCounter">Click me</button>
    <p>Counter: {{ counter }}</p>
  </div>
</template>
 
<script>
import { ref, reactive, computed } from 'vue';
 
export default {
  name: 'MyComponent',
  setup() {
    // Reactive state
    const counter = ref(0);
 
    // Methods
    function incrementCounter() {
      counter.value++;
    }
 
    // Computed state
    const message = computed(() => `Hello Vue 3!`);
 
    // Expose to template
    return {
      counter,
      incrementCounter,
      message
    };
  }
};
</script>

在这个例子中，我们使用了ref来创建响应式数据，computed来创建计算属性，以及setup函数作为组合式API的入口点。这样的组件更加灵活和容易维护，它是Vue 3推荐的使用方式。