基于vscode实现vue3项目创建启动+安装配置路由vue-router实现单页面组件切换

本文介绍: 基于 vscode 实现 vue3项目创建启动并安装配置路由 vue–router 实现单页面组件切换

系统：win10
工具：cmd,vscode
框架：vue：3.6.1,vue-router: 4.1.6
语言：Js,vue

1.安装 nodejs

访问 https://nodejs.org/en，点击下载最新版本的nodejs,并安装。
在这里插入图片描述

2.安装 vue

在项目目录文件下，通过 cmd 运行下述指令。

npm init vue@latest

在这里插入图片描述

3.启动 v ue 项目

依次输入下列命令，启动 v ue项目

  cd vue-echart1
  npm install
  npm run dev

在这里插入图片描述

4.加载页面

在浏览器中加载 http://localhost:5173/，页面加载成功，说明 vue项目安装启动成功。

5.安装vue–router

建议安装第三方库通过vscode中的终端来操作，项目启动通过cmd来操作，这样方便项目管理。

npm install vue-router@4

在这里插入图片描述

6.配置路由相关 事项

在【src】目录新建【router】文件夹,在【router】文件夹中新建 index.js 文件，用来写路由配置文件。在【router】目录下新建【view s】文件夹，【view s】文件夹中放vue 组件，对应路由表中的路由路径，本例中为Ho m e.vue和Ab out.vue。

在这里插入图片描述
【Home.vue】

&lt;template&gt;
  &lt;div&gt;欢迎访问，Home页面&lt;/div&gt;
&lt;/template>

【Ab out.vue】

<template>
  <div>欢迎访问，about页面</div>
</template>

【index.js】

// 0.导入vue-router中相关函数
import { createRouter, createWebHashHistory } from "vue-router";

// 1. 导入路由组件
import Home from "./views/Home.vue";
import About from "./views/About.vue";
// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
const routes = [
  { path: "/", component: Home },
  { path: "/about", component: About },
];
// 3. 创建路由实例并传递 `routes` 配置
const router = createRouter({
  // 4. 内部提供了 history 模式的实现。
  history: createWebHashHistory(),
  routes, // `routes: routes` 的缩写
});
// 5. 配置路由对外接口
export default router;

7.配置App.vue

【App.vue】

<script setup></script>

<template>
  <div>
    <h1>Hello App!</h1>
    <p>
      <!--使用 router-link 组件进行导航 -->
      <!--通过传递 `to` 来指定链接 -->
      <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
      <router-link to="/">Go to Home</router-link>
      <router-link to="/about">Go to About</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

8.配置main.js

【main.js】

import { createApp } from 'vue'
import App from './App.vue'
// 导入路由配置文件
import router from './router/index.js'
import './assets/main.css'

// 利用use函数加载路由
createApp(App).use(router).mount('#app')