VUE3零基础入门实例教程

在前端开发的领域中，VUE3凭借其诸多优势吸引着众多开发者。即使你是零基础，也能通过这篇实例教程轻松入门。

确保你已经安装了Node.js。这是一切的基础，因为VUE项目的创建和运行都依赖它。安装完成后，打开命令行工具，输入指令创建一个VUE3项目：npm init vue@latest。按照提示进行项目配置，例如项目名称、选择特性等。这里我们选择默认配置快速入门。

进入项目目录，输入cd 项目名称 进入刚刚创建的项目文件夹。然后使用npm install安装项目所需的依赖包。安装完成后，运行npm run dev，你会看到一个本地链接，在浏览器中打开它，就能看到一个初始的VUE3项目界面。

接下来，我们创建一个简单的计数器实例。在src/components文件夹下新建一个Counter.vue文件。在文件中，先定义模板部分，也就是HTML结构：

<template>
  <div>
    <p>当前计数: {{ count }}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

然后是脚本部分，也就是JavaScript代码：

<script setup>
import { ref } from 'vue';

const count = ref(0);

const increment = () => {
  count.value++;
};

const decrement = () => {
  count.value--;
};
</script>

在这段代码中，我们使用ref函数创建了一个响应式数据count，并定义了两个方法increment和decrement来对count进行增加和减少操作。

最后，在App.vue中引入并使用这个组件：

<template>
  <div id="app">
    <Counter />
  </div>
</template>

<script setup>
import Counter from './components/Counter.vue';
</script>

再次运行项目，就能在页面上看到计数器，点击按钮可以实现计数的增加和减少。

通过这个简单的实例，你已经初步了解了VUE3的项目创建、组件使用以及响应式数据的操作。后续可以继续深入学习路由、状态管理等知识，逐步成为VUE3开发高手。