让@/后有文件提示&less自动引入&吸顶交互效果&Vue3 全局注册组件 &自定义命令

让@/后有文件提示

vue-cli 配置文件 : jsconfig.json

{
  "compilerOptions": {
  "target": "ES6",
  "module": "commonjs",
  "allowSyntheticDefaultImports": true,
  "baseUrl": "./",
  "paths": {
    "@/*": ["src/*"]
  }
  },
  "exclude": [
  "node_modules"
  ]
}

less 自动引入

执行命令 : vue add style-resources-loader

在vue.config.js文件中配置:

const path = require('path')
        module.exports = {
  pluginOptions: {
    'style-resources-loader': {
  preProcessor: 'less',
  patterns: [
    path.join(__dirname, '/src/styles/var.less')//利用path.join 拼接字符串
  ]
}
  }
}

吸顶交互--利用VueUse

1.下包

npm i @vueuse/core

       import { useWindowScroll } from '@vueuse/core'
        const { x, y } = useWindowScroll()
    

实现相同的效果

 const scTop = ref(0)
 document.addEventListener('scroll', () => {
  console.log('html', document.documentElement.scrollTop)
   console.log('body', document.body.scrollTop)
   console.log('document', document.scrollTop)
  scTop.value = document.documentElement.scrollTop
 })
     //   对document 监听 scroll事件 将 HTML.scrollTop 赋值给 scTop 
     //   dody.scollTop    永远是0
     //   document.scollTop  是undefined
        

vueuse.org/core/usewin…

Vue3 全局注册组件 &自定义命令

1.全局注册

export default {
  install (app) {
    app.component(Skeleton.name, Skeleton)
    app.component(Slider.name, Slider)
  }
}

2.自定义命令

export default {
    install(app){
        app.directive('自定义命令名字',{
        mounted (el, bind) {
              //   执行命令
        }
    }
}

main.js

     import components from '@/components'
     
     createApp(App).use(store).use(router).use(components).mount('#app')