Vue3从零开始-第一章-1-1 Hello world和计数器

1. 创建一个Vue3项目

首先，我们需要创建一个新的Vue3项目。您可以使用Vue CLI来完成这项工作。Vue CLI是一个命令行工具，可以帮助您快速创建和管理Vue项目。

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

这将创建一个新的Vue项目，名为“vue-hello-world”。

2. 安装必要的依赖项

接下来，我们需要安装一些必要的依赖项。这些依赖项包括Vue3本身、Vuex和Vue Router。

npm install vue vuex vue-router

3. 创建一个Vue组件

现在，我们可以创建一个Vue组件了。组件是Vue应用程序的基本构建块。每个组件都有自己的模板、数据和方法。

在src文件夹中创建一个名为HelloWorld.vue的文件，并在其中输入以下代码：

<template>
  <div>
    <h1>Hello world!</h1>
    <p>Count: {{ count }}</p>
    <button @click="increment">+</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

这个组件包含了一个带有“Hello world!”文本的<h1>元素、一个带有“Count: {{ count }}”文本的<p>元素，以及一个带有“+”文本的<button>元素。当用户点击<button>元素时，increment()方法会被调用，count数据将被递增1。

4. 将组件添加到您的应用程序中

现在，我们需要将组件添加到我们的应用程序中。在src/main.js文件中，找到以下代码：

import { createApp } from 'vue'
import HelloWorld from './components/HelloWorld.vue'

createApp(HelloWorld).mount('#app')

这将告诉Vue创建一个HelloWorld组件的实例，并将它挂载到<div id="app">元素上。

5. 运行您的应用程序

现在，您可以运行您的应用程序了。在终端中，输入以下命令：

npm run serve

这将启动一个开发服务器，您可以在浏览器中访问您的应用程序。

6. 恭喜您！

您已经成功创建了您的第一个Vue应用程序。现在，您可以开始学习如何使用Vue3构建更复杂的应用程序了。

总结

Vue3是一个功能强大、易于使用的前端框架。它可以帮助您快速构建出色的Web应用程序。如果您正在寻找一个新的前端框架，那么Vue3是一个很好的选择。