描述问题
轮播****图循环异常
你想要什么效果
请求完接口数据后，数据渲染为轮播图，而且轮播图能循环播放
哪个地方不是你预期的效果
请求完接口数据后，轮播图也能正常轮播，但是播放到最后一幅后，不再循环播放
解决方案
在<swiper>组件上添加 v-if=“swiperList.length”
分析原理
如果没有加 v-if
在接口数据到来之前，swiper已经初始化，此时数据为[], loop选项是针对空数据的循环控制，
而获取数据之后，虽然触发了视图更新，但只更新<swiper-slide>,而没有更新swiper配置,所以循环失效
如果加了v-if
在接口数据到来之前，因为swiper上有v-if的判断，此时数据为[]，所以swiper组件根本没有初始化。而获取数据后，v-if判断为真，引时触发视图更新，就是针对所有图片的loop设置
vue3项目开发中注意事项
**配置css和js
- 安装重置样式normalize.css
npm i normalize.css移动端适配js
复制flexible.js到src/assets文件夹中
引入图标字体
在assets/fonts中存入图标字体文件
在assets/css中存入iconfont.css, 并修正路径
定义全局css
在assets/css中创建global.css,定义全局样式
在main.js中引入以下文件 ，以便全局使用
// 引入重置样式 import 'normalize.css' import './assets/css/global.css' import './assets/css/iconfont.css' // 引入rem适配的js import './assets/flexible'修改px-to-rem插件的配置
基准font-size： 75
规定屏幕宽度： 750
App.vue的style标签中，去掉scoped属性
在任意组件中使用图标字体
<i class="iconfont icon-kefu"></i>处理本地静态资源
<div class="logo"> <p><button>切换图片</button></p> <p><img :src="url" alt=""></p> <!-- <p><img src="../../../assets/img/m_hualogo.png" alt=""></p> --> </div><script> //引用本地静态资源模块 import logo from '../../../assets/img/m_hualogo.png' export default { data() { return { //引用本地静态资源，不能使用下面的方式 // url: '../../../assets/img/m_hualogo.png' url: logo, // 线上地址有效 // url: 'https://m.hua.com/content/vue/login/static/img/m_hualogo.png' } } } </script>拼接
<script setup> let imgurl = 'baidu_logo.png'; var icon = new URL(`../assets/imgs/${imgurl}`, import.meta.url) change(){ // 2. 使用当前资源 // this.url = logo; this.url = new URL(`../../assets/images/m_home_logo.png`, import.meta.url); } </script> <template> <div class="imgs"> <img :src=icon alt=""> </div> </template>vite 中使用 @ ，配置路径别名
修改vite.config.js
import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; import path from 'path' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], server: { //启动热更新 hmr: true, }, resolve: { // 配置路径别名 alias: { '@': path.resolve(__dirname, './src'), }, }, });Sass****的使用
全局引入****sass
- src/assets/scss/common.scss
$$green: #0f0; ul,li { list-style: none; background-color: $$green; }- 在main.js中引入
import "@/assets/scss/common.scss"- 在指定组件中引入****sass
- src/assets/scss/variables.scss （定义全量）
$bg: rgb(17, 24, 152);- 在组件中引入
<style lang="scss"> @import "./assets/scss/variables.scss"; $light: #f00; .app { width: 5rem; border: 1px solid $ light; background-color: $bg; } </style>
