【05Vue3 起步】Vue3 起步：创建项目、编写组件和运行应用网站首页 学无止境

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

燃正科技 2024-09-15 12:01:03

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

Vue3 起步教程

准备工作

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

已经安装最新版本的 Node.js。你可以在https://nodejs.org下载并安装 Node.js。
了解基本的 HTML、CSS 和 JavaScript 知识。

步骤 1：创建新项目

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

打开命令行界面，并进入你想要创建项目的目录。
执行以下命令来安装 Vue CLI（Vue Command Line Interface）：

      
        npm install -g @vue/cli

创建新的 Vue3 项目：
```
      
        vue create my-vue-project
      
    
```
根据提示选择默认配置或手动配置项目。你还可以使用预设模板，如 TypeScript 或 Vue Router。

步骤 2：编写第一个组件

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

      
        cd my-vue-project

打开编辑器，并在项目目录中的 src 文件夹下创建一个新的文件，命名为 HelloWorld.vue。
在 HelloWorld.vue 文件中，编写以下代码：

      
        <template>
          <div>
            <h2>Hello, Vue3!</h2>
          </div>
        </template>
php
Copy code
    <script>
      export default {
        name: 'HelloWorld'
      }
    </script>
&lt;style&gt;
  /* 可选：添加样式 */
&lt;/style&gt;

步骤 3：使用组件

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

打开 src/App.vue 文件。
在模板中添加以下代码：

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

在脚本中添加以下代码：

      
        import HelloWorld from './HelloWorld.vue';
bash
Copy code
    export default {
      name: 'App',
      components: {
        HelloWorld
      }
    }