基于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.启动vue项目

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

cd vue-echart1
  npminstallnpm run dev

4.加载页面

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

5.安装vue-router

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

npminstall vue-router@4

6.配置路由相关事项

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

【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. 配置路由对外接口exportdefault router;

7.配置App.vue

【App.vue】

<scriptsetup></script><template><div><h1>Hello App!</h1><p><!--使用 router-link 组件进行导航 --><!--通过传递 `to` 来指定链接 --><!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签--><router-linkto="/">Go to Home</router-link><router-linkto="/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')

9.最终呈现