项目中的一些问题（补充）

描述问题

轮播图循环异常

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

解决方案

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

Plain 复制代码

npm i normalize.css

移动端适配js

复制flexible.js到src/assets文件夹中
引入图标字体

在assets/fonts中存入图标字体文件

在assets/css中存入iconfont.css, 并修正路径
定义全局css

在assets/css中创建global.css,定义全局样式
在main.js中引入以下文件，以便全局使用

JavaScript 复制代码

// 引入重置样式
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属性
在任意组件中使用图标字体

HTML 复制代码

<i class="iconfont icon-kefu"></i>

处理本地静态资源

HTML 复制代码

<div class="logo">
    <p><button>切换图片</button></p>
    <p><img :src="url" alt=""></p>
    <!-- <p><img src="../../../assets/img/m_hualogo.png" alt=""></p> -->
 </div>

JavaScript 复制代码

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

拼接

HTML 复制代码

<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

JavaScript 复制代码

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

CSS 复制代码

$$green: #0f0;
ul,li {
    list-style: none;
    background-color: $$green;
}

在main.js中引入

JavaScript 复制代码

import "@/assets/scss/common.scss"

在指定组件中引入****sass

src/assets/scss/variables.scss （定义全量）

CSS 复制代码

$bg: rgb(17, 24, 152);

在组件中引入

CSS 复制代码

<style lang="scss">
    @import "./assets/scss/variables.scss";
    
    $light: #f00;
        .app {
          width: 5rem;
          border: 1px solid $
    light;
      background-color: $bg;
    }
</style>

项目中的一些问题（补充）

描述问题

轮播****图循环异常

解决方案

分析原理

vue3项目开发中注意事项

**配置css和js

处理本地静态资源

vite 中使用 @ ，配置路径别名

Sass****的使用

轮播图循环异常

Sass的使用