VUE3【学习四】router路由跳转及轻量级vant组件的安装及应用，轮播图制作

一、我这边scripts的运行命令是dev&＃xff0c;所以npm run dev&＃xff0c;打开访问http://localhost:300/就能顺利访问

 二、安装路由npm i vue-router&＃64;next

在src文件夹下新建router/index.js文件和views/Home.vue文件

//router/index.js页面代码
import { createRouter, createWebHashHistory } from &＃39;vue-router&＃39;
const router &＃61; createRouter({history: createWebHashHistory(), // hash模式&＃xff1a;createWebHashHistory&＃xff0c;history模式&＃xff1a;createWebHistoryroutes: [{path: &＃39;/&＃39;,redirect: &＃39;/home&＃39;},{path: &＃39;/home&＃39;,name: &＃39;home&＃39;,component: () &＃61;> import(&＃39;../views/Home.vue&＃39;),meta: {index: 1}}]
})export default router

//iews/Home.vue页面代码




App.vue页面引入路由

 在main.js文件中引入import router from &＃39;./router&＃39;和app.use(router)&＃xff0c;如下图

 启动项目来验证下&＃xff0c;成功跳转到首页

注意&＃xff1a;路由如果使用&＃64;引入的话v会报错

需要在vite.config.js增加代码

import { defineConfig } from &＃39;vite&＃39;
import vue from &＃39;&＃64;vitejs/plugin-vue&＃39;
import path from &＃39;path&＃39;// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],resolve: {alias: {&＃39;~&＃39;: path.resolve(__dirname, &＃39;./&＃39;),&＃39;&＃64;&＃39;: path.resolve(__dirname, &＃39;src&＃39;)}}
})

三、引入轻量级vant组件npm install vant -D&＃xff0c;官网地址&＃xff1a;Vant 3 - Mobile UI Components built on Vue

 在main.js中引入

import { createApp } from &＃39;vue&＃39;
import App from &＃39;./App.vue&＃39;
import router from &＃39;./router&＃39; //路由引入
import { Swipe, SwipeItem } from &＃39;vant&＃39;; //vant按需引入
import &＃39;vant/lib/index.css&＃39;; // vant样式const app &＃61; createApp(App) // 创建实例
app.use(Swipe).use(SwipeItem)app.use(router)
app.mount(&＃39;#app&＃39;)


 home.js页面去调用

考虑到可能会有很多页面用到这轮播图&＃xff0c;所以我们把它做成组件来用&＃xff0c;在components文件夹下新建Swiper.vue&＃xff0c;Home.vue页面去引入&＃xff0c;修改Home.vue页面

Swiper.vue页面

运行后可以看到图片太大了

我们得给图片设置宽高

报错了&＃xff0c;在这我们引入sass样式 

 正确代码如下&＃xff1a;

运行命令&＃xff1a; npm add sass -D

 运行项目