基于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,并安装。
vscode创建vue3项目,vscode,javascript,vue,html

2.安装vue

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

npm init vue@latest

vscode创建vue3项目,vscode,javascript,vue,html

3.启动vue项目

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

  cd vue-echart1
  npm install
  npm run dev

vscode创建vue3项目,vscode,javascript,vue,html

4.加载页面

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

5.安装vue-router

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

npm install vue-router@4

vscode创建vue3项目,vscode,javascript,vue,html

6.配置路由相关事项

在【src】目录新建【router】文件夹,在【router】文件夹中新建index.js文件，用来写路由配置文件。在【router】目录下新建【views】文件夹，【views】文件夹中放vue组件，对应路由表中的路由路径，本例中为Home.vue和About.vue。

vscode创建vue3项目,vscode,javascript,vue,html
【Home.vue】

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

【About.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')