Hbuilderx创建vue3项目并使用路由(router)

在现代前端开发中，Vue.js 是一个非常流行的 JavaScript 框架。本文将介绍如何使用 HBuilderX 创建一个 Vue 3 项目，并在项目中使用 Vue Router 来实现页面的导航。

一、环境准备

首先，你需要安装 HBuilderX，这是一个功能强大的前端开发工具。你可以从 DCloud 官网下载并安装 HBuilderX。

二、创建 Vue 3 项目

1. 打开 HBuilderX，在主界面选择“新建” -> “项目”。
2. 在新项目的设置中，选择“Vue.js”作为项目类型，并确保选择 Vue 3 版本。
3. 输入项目名称，例如“my-vue3-app”，选择项目的存储位置，然后点击“确定”进行项目的创建。

三、安装 Vue Router

创建好项目后，我们需要安装 Vue Router，这是 Vue.js 官方的路由管理器。

1. 打开 HBuilderX 的终端（Terminal），你可以使用快捷键 Ctrl + （反引号）。
2. 在终端中输入以下命令安装 Vue Router：

bash npm install vue-router@4

四、配置路由

接下来，我们将设置 Vue Router。创建一个 router 文件夹，并在其中创建一个 index.js 文件。

1. 创建 router 文件夹：

在 src 目录下新建一个名为 router 的文件夹，然后在这个文件夹中创建 index.js 文件。

1. 编写路由配置代码：

在 src/router/index.js 中，输入以下代码：

```javascript import { createRouter, createWebHistory } from 'vue-router'; import Home from '../views/Home.vue'; import About from '../views/About.vue';

const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About } ];

const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes });

export default router; ```

五、创建视图组件

在 src/views 目录下，创建两个视图组件 Home.vue 和 About.vue。

1. 创建 Home.vue：

```html

```

1. 创建 About.vue：

```html

```

六、在 Vue 应用中使用路由

最后，我们需要确保在我们的 Vue 应用中使用 Router。

1. 打开 src/main.js 文件，修改如下：

```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; // 引入router

createApp(App).use(router).mount('#app'); // 使用router ```

1. 确保在 App.vue 中添加 <router-view /> 组件，用于渲染匹配的视图：

```html

```

七、运行项目

完成以上步骤后，返回到终端，运行以下命令启动开发服务器：

npm run serve

在浏览器中访问 http://localhost:8080，可以看到首页，并能够通过链接导航到关于页。

结语

通过上述步骤，我们成功地在 HBuilderX 中创建了一个 Vue 3 项目，并使用 Vue Router 实现了基本的页面导航。你可以根据自己的需求进一步扩展页面和路由配置，构建复杂的单页面应用（SPA）。希望这篇文章对你有所帮助！