【05Vue3 起步】Vue3 起步：创建项目、编写组件和运行应用

时间：2025-04-08 07:00:44

Vue3 起步教程

准备工作

在开始学习 Vue3 之前，请确保你已经完成以下准备工作：

  • 已经安装最新版本的 。你可以在下载并安装 。
  • 了解基本的 HTML、CSS 和 JavaScript 知识。

步骤 1：创建新项目

首先，我们将创建一个新的 Vue3 项目。

  1. 打开命令行界面，并进入你想要创建项目的目录。
  2. 执行以下命令来安装 Vue CLI（Vue Command Line Interface）：
  3.       
        npm install -g @vue/cli
    • 1
    • 2
  4. 创建新的 Vue3 项目：
  5.       
        vue create my-vue-project
    • 1
    • 2

    根据提示选择默认配置或手动配置项目。你还可以使用预设模板，如 TypeScript 或 Vue Router。

步骤 2：编写第一个组件

现在我们已经创建了一个 Vue3 项目，接下来我们将编写第一个 Vue 组件。

  1. 进入项目目录：
  2.       
        cd my-vue-project
    • 1
    • 2
  3. 打开编辑器，并在项目目录中的 src 文件夹下创建一个新的文件，命名为 。
  4. 在 文件中，编写以下代码：
  5.       
        <template>
          <div>
            <h2>Hello, Vue3!</h2>
          </div>
        </template>
php
Copy code
    <script>
      export default {
        name: 'HelloWorld'
      }
    </script>

    &lt;style&gt;
  /* 可选：添加样式 */
&lt;/style&gt;
    • 1
    • 2
    • 3
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

步骤 3：使用组件

现在我们已经编写了一个 Vue 组件，接下来我们将在应用程序中使用它。

  1. 打开 src/ 文件。
  2. 在模板中添加以下代码：
  3.       
        <template>
          <div >
            <HelloWorld />
          </div>
        </template>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
  4. 在脚本中添加以下代码：
  5.       
        import HelloWorld from './';
bash
Copy code
    export default {
      name: 'App',
      components: {
        HelloWorld
      }
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

步骤 4：运行应用

现在我们已经完成了组件的编写和使用，接下来我们将运行应用程序。

  1. 回到命令行界面。
  2. 执行以下命令来启动开发服务器：
  3.       
        npm run serve
    • 1
    • 2
  4. 打开浏览器，并访问http://localhost:8080。

进一步学习

到这里，你已经成功入门 Vue3，并编写了一个简单的应用程序。接下来，你可以继续学习 Vue3 的文档和教程，深入了解 Vue3 的更多功能和用法。

相关文章