Vue.js 3.0 项目投入使用

1、Vue、vueRouter 项目中均使用 cdn引入的 。 
2、目前使用中还是有些坑需要填，2.0语法兼容会有些问题。
3、建议新项目中使用，老项目不建议大面积使用。

/** router.js **/

const router = VueRouter.createRouter({
  history: VueRouter.createWebHistory(),
  scrollBehavior(to, from, savedPosition) {
    return savedPosition ? savedPosition : { left: 0, top: 0 }
  },
  routes: [
    {
      path: "/***",
      name: "***",
      component: () => import("@/views/**/***.vue"),      
      meta: {
        title: "**"
      }
    },
    {
      path: "/***",
      name: "***",
      component: () => import("@/views/**/***.vue"),
      meta: {
        title: "**"
      }
    }
  ]
})

export default router


/** router.js **/


import App from "./App.vue"
import router from "./router"

const app = Vue.createApp(App)

router.afterEach(to => {
  const title = to.meta.title
  if (title) {
    document.title = title
  }
})
app.use(router).mount("#app")



/*** **.vue ** /

<script type="text/javascript">
import { meetingPath } from "@/config/index"
import study_list from "@/models/study_list"
import store from "@/store/training"
const { ref, computed, getCurrentInstance, onMounted, onBeforeUnmount } = Vue

export default {
  setup() {
    const {
      appContext: {
        app: {
          config: { globalProperties }
        }
      }
    } = getCurrentInstance()
    const { $showLoading, $hideLoading, $showToast } = globalProperties
    const router = VueRouter.useRouter()
    const list = ref([])
    const historyList = ref([])
    const pageNo = ref(1)
    const showLoading = ref(true)
    const isScrollLoad = ref(true)
    const pageCount = ref(0)
    const timer = ref(null)
    const isEmpty = ref(false)

    const navIndex = computed(() => {
      return store.navIndex
    })
    const isMine = computed(() => {
      return store.isMine
    })
    onMounted(() => {
      $showLoading()
      if (store.navIndex == 0) {
        getCourseStudyList()
      } else {
        getHistoryStudyList()
      }
      window.addEventListener(
        "scroll",
        scrollLoadList,
        utils.isPassive() ? { passive: true, capture: true } : true
      )
    })
    onBeforeUnmount(() => {
      LazyLoad.removeLazyLoad()
      window.cancelAnimationFrame(timer.value)
      window.removeEventListener(
        "scroll",
        scrollLoadList,
        utils.isPassive() ? { passive: true, capture: true } : true
      )
    })

    const getHistoryStudyList = () => {
      study_list
        .getHistoryStudyList({
          type: "GET",
          hostPath: meetingPath,
          data: {
            pageNo: pageNo.value,
            pageSize: 10,
            isMine: isMine.value
          }
        })
        .then(result => {
          $hideLoading()
          const data = result.data
          if (result.code == 200 && data && data.list) {
            const { list } = data
            if (pageNo.value > 1) {
              historyList.value = historyList.value.concat(list || [])
            } else {
              historyList.value = list || []
            }
            if (pageNo.value == pageCount.value || !data.pageCount) {
              showLoading.value = false
            }
            isEmpty.value = !historyList.value.length
            pageCount.value = data.pageCount
            isScrollLoad.value = true
          }
        })
    }

    const scrollLoadList = () => {
      const winHeight = window.innerHeight
      const scrollTop = document.scrollingElement.scrollTop
      const scrollViewHeight =
        document.querySelector(".scroll-view-wrapper").offsetHeight - 20
      const realFunc = () => {
        if (
          winHeight + scrollTop >= scrollViewHeight &&
          pageNo.value < pageCount.value
        ) {
          pageNo.value += 1
          showLoading.value = true
          getHistoryStudyList()
        } else {
          isScrollLoad.value = true
        }
      }
      if (isScrollLoad.value) {
        isScrollLoad.value = false
        timer.value = window.requestAnimationFrame(realFunc)
      }
    }
    return {
      list,
      historyList,
      pageNo,
      showLoading,
      isScrollLoad,
      pageCount,
      timer,
      isEmpty,
      navIndex,
      isMine,
      navAction,
      subNavAction,
      routerAction
    }
  }
}
</script>
/** **.vue **/