助力前端开发：在vscode中使用vue3 + vue-router构建单页面应用

2023-11-15 00:32:20

在 Vue.js 中使用 Vue Router 创建动态单页应用 (SPA)

在当今快速发展的数字世界中，单页应用 (SPA) 因其动态、响应迅速和流畅的用户体验而越来越受到欢迎。其中，Vue.js 是一个流行的 JavaScript 框架，可以轻松创建和管理 SPA。本文将指导你使用 Visual Studio Code (VS Code) 创建一个 Vue.js 项目，并集成 Vue Router 来实现组件之间的无缝切换。

准备工作：安装必备工具

要开始，请确保你的电脑上已安装以下工具：

Node.js 和 npm（Node 包管理器）
Vue.js CLI（命令行界面）
VS Code 和 Vue.js 扩展包

创建 Vue.js 项目

打开 VS Code，创建一个新项目文件夹，然后在其中运行以下命令：

vue create 项目名称

选择 Vue 3 作为项目模板，并根据需要选择一个 UI 框架（例如 Element UI）。项目创建完成后，进入项目文件夹：

cd 项目名称

安装 Vue Router

接下来，安装 Vue Router：

npm install vue-router@4

在 src/main.js 文件中，导入并配置 Vue Router：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

new Vue({
  router
}).$mount('#app')

创建组件并配置路由

在 src/components 文件夹中，创建两个组件：Home.vue 和 About.vue。在这些组件中，添加基本的 HTML 和 CSS 样式。

在 src/router/index.js 文件中，配置路由规则：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

export default router