前端项目实战笔记：vue3开发响应式页面（一）

2 个月前 · 来自专栏丁鹿学堂前端路

vue3中使用bootstrap

bootstrap5已经不依赖jquey了，所以使用起来比较方便

1 安装依赖

npm install --save bootstrap
npm install --save @popperjs/core

2 main.js 中引入

import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap"

3 在页面中使用

栅格系统的套路：

最外层是container，一行就是row，下面就是一列一列的，以col-开头。一共分成12份

<div class="container">
  < <div class="row">
     <div class="col-md-6">
</div>

技巧：pc显示，移动端隐藏：

boot以小屏幕为主， d-none表示隐藏，md-block表示pc屏幕显示，结合起来就是小屏幕隐藏大屏幕展示

<div class="col-md-6 d-none d-md-block ">

vue3中使用less

安装：npm install --save less less-loader

main.js中引入

import less from 'less'
const app = createApp(App)
app.use(less)

页面中使用：

<style scoped lang="less">
.rightNav{
        display: flex;
            min-width: 100px;
            height: 80px;
            line-height: 80px;
</style>

vue3中使用swiper8

利用swiper实现轮播图效果

1 安装

npm install swiper

2 组件中使用

<div class="banner">
      <swiper
              :modules="modules"
              :loop="true"
              :slides-per-view="1"
              :autoplay="{ delay: 4000, disableOnInteraction: false }"
              navigation
              :pagination="{ clickable: true }"
              :scrollbar="{ draggable: true }"
          <!-- loop可循环轮播，autoplay可自动播放 -->
          <swiper-slide>
              <img src="../assets/img/1.jpg" alt="">
          </swiper-slide>
          <swiper-slide>
              <img src="../assets/img/2.jpg" alt="">
          </swiper-slide>
      </swiper>
  <script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/pagination' // 轮播图底面的小圆点
import { Autoplay, Pagination } from 'swiper'
const modules = [Autoplay, Pagination]
</script>

通过：：v-deep 去修改下面小圆点的样式，更流畅：

<style scoped lang="less">
.banner{
  width: 100%;
  height: 1000px;
    width: 100%;
    height: auto;
  .swiper::v-deep .swiper-pagination-bullet{
    background: hsla(0,0%,90%,.4);
    border-radius: 4px;
    height: 4px;
    transition: all .3s;
    width: 13px