项目中的一些问题（补充）-编程实验室

描述问题

轮播图循环异常

你想要什么效果
请求完接口数据后，数据渲染为轮播图，而且轮播图能循环播放
哪个地方不是你预期的效果
请求完接口数据后，轮播图也能正常轮播，但是播放到最后一幅后，不再循环播放

解决方案

在<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>