Vue3 使用 Bs5 、 Jq 、 gsap

https://bootstrap5.hexschool.com/docs/5.1/getting-started/webpack/

1. 全使用BS内css样式，可以直接汇入

https://bootstrap5.hexschool.com/docs/5.1/getting-started/webpack/#importing-compiled-css

2. 使用Bs样式并更改其样式时(预编译)，使用scss

https://bootstrap5.hexschool.com/docs/5.1/getting-started/webpack/#importing-precompiled-sass
详细见 5.如何在 Cli 环境中加入 Vue 元件
https://ithelp.ithome.com.tw/articles/10282453

<style lang="scss">
@import "./assets/all";
</style>

3. 使用Bs内Js(动画效果)

https://bootstrap5.hexschool.com/docs/5.1/getting-started/webpack/#importing-javascript
全域汇入时可能因当初设定专案方式(Eslink)有错误 使用任一code皆可

import 'bootstrap';

// or get all of the named exports for further usage
import * as bootstrap from 'bootstrap';

4. Bs4 vs Bs5 差异 (Bs5无须jQuery)

Bootstrap 5 被设计成不需要使用 jQuery，但仍有机会将我们的元件与 jQuery 一起做使用。如果 Bootstrap 在 window 物件检测到 jQuery，它将会把 Bootstrap 的所有元件加入 jQuery 的插件系统中；这意味着您将能够用 $('[data-bs-toggle="tooltip"]').tooltip() 来启用工具提示。我们的其他元件也是如此运作。

目前专案使用 scss + Bs内Js

记得一定要使用container，因BS5会直接把网页的内建padding与margin取消掉

<div class="container">
    <div class="row">
        <div class="col">
            <div class="h4">
                Lorem ipsum dolor sit amet consectetur.
            </div>
        </div>
    </div>
</div>

5.使用JQ

(1)安装

npm i jquery

(2)汇入
全域放main.js、区域放该网页下
import $ from 'jquery'

(3)将Jq程序码放mounted()
以下区域引用

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p>{{testData}}</p>
  </div>
</template>

<script>
import $ from 'jquery';
export default {
  data() {
    return {
      testData:'',
    }
  },
  mounted() {
    this.testData = $('h1').text();
  },
}
</script>

5.使用 Gsap

参考：
https://www.youtube.com/watch?v=qk7Xj4Q0IuE
https://chupai.github.io/posts/200229_gsap3/#10-%E7%9B%B8%E5%B0%8D%E5%8B%95%E7%95%AB%E6%99%82%E9%96%93
https://chupai.github.io/posts/200229_gsap3/

(1) 安装

npm i gsap

(2)引用

import gsap from "gsap";

(3)使用

必须让 transition-group 下行接 v-for的 才能让gsap抓到key!!

        <transition-group appear @before-enter="beforeEnter" @enter="enter">
          <div
            class="col"
            v-for="(item, key) in products"
            :data-index="key"
            :key="item.id + key"
          >
            <div class="card product">
              <img
                v-on:click.prevent="getProduct(item.id)"
                :src="`${item.imageUrl}`"
                class="card-img-top"
                alt="..."
              />
              <div class="card-body">
                <h5 class="card-title text-center">{{ item.title }}</h5>
                <div class="card-text text-center">
                  <div class="h5" v-if="!item.price">
                    {{ item.origin_price }} 元
                  </div>
                  <br />
                  <del class="h6" v-if="item.price"
                    >original price {{ item.origin_price }} NT</del
                  >

                  <div class="h5" v-if="item.price">
                    special offer {{ $filters.currency(item.price) }} NT
                  </div>
                </div>
              </div>
              <button
                @click="getProduct(item.id)"
                type="button"
                class="btn btn-outline-secondary"
                style="font-weight: bold"
              >
                SEE MORE
              </button>
              <!-- API需要product_id(String)、qty(Number) -->
              <!-- 样式：disabled 按钮不能按 -->
              <!-- 如果仓库收到的值 === 当前id -->
              <button
                v-on:click="addCart(item.id)"
                v-bind:disabled="this.status.loadingItem === item.id"
                type="button"
                class="btn btn-outline-danger"
                style="font-weight: bold"
              >
                <!-- BS样式 -->
                <!-- https://getbootstrap.com/docs/5.1/components/spinners/ -->
                <div
                  v-if="this.status.loadingItem === item.id"
                  class="spinner-grow spinner-grow-sm text-danger"
                  role="status"
                >
                  <span class="visually-hidden">Loading...</span>
                </div>
                Add Cart
              </button>
            </div>
          </div>
        </transition-group>

    beforeEnterBottom(el) {
      console.log("aaa");
      el.style.opacity = 0;
      el.style.transform = "translateY(60px)";
    },
    enterBottom(el) {
      console.log("aaa");
      gsap.to(
        el,
        {
          opacity: 1,
          y: 0,
          duration: 1,
          delay: el.dataset.index * 0.5,
        },
        "6"
      );
    },

6.滚轮特效 scrolltrigger

https://www.facebook.com/groups/vuejs.tw/posts/4421028727976825/
vue-scrollmagic 不支援 Vue3 因此 使用 gsap 的套件 scrolltrigger
(1) 引用 ( gsap内含该套件 )

import gsap from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

(2) 使用
https://ithelp.ithome.com.tw/articles/10257007
https://huanyichuang.com/blog/gsap-scrolltrigger-counter/

    enterBottom(el) {
      console.log("aaa");
      gsap.registerPlugin(ScrollTrigger);
      gsap.to(el, {
        opacity: 1,
        y: 0,
        x: 0,
        duration: 1,
        delay: el.dataset.index * 0.5,
        scrollTrigger: {
          trigger: el,
          // 在这个情境 trigger 要是物件，不是选择器
          toggleActions: "play none none none",
          // scrub: true, // 物件动画根据卷轴卷动程度跑
          start: "top center",
          // end: "+=100",
          // markers: true,
        },
      });
    },

通常下在 mounted()

<h1 class="title">可使用 管理者登入</h1>

mounted() {
    // title动画
    gsap.registerPlugin(ScrollTrigger);
    gsap.to(".title", {
      opacity: 0,
      duration: 1,
      y: 0,
      x: 100,
      scrollTrigger: {
        trigger: ".title",
        // 在这个情境 trigger 要是物件，不是选择器
        toggleActions: "play none none none",
        scrub: true, // 物件动画根据卷轴卷动程度跑
        start: "top",
        // end: "+=100",
        // markers: true,
      },
    });