引入外部JS:
<script setup>useHead({script: [ {type: "text/javascript",src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js'}]})
</script>
useHead只能与组件的setup和生命周期钩子一起使用
如果需要将js放置body区域末尾,直接添加参数
<script setup>useHead({script: [ {type: "text/javascript",src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js',body:true}]})
</script>
引入外部CSS:
<script setup>useHead({link: [{rel: 'preconnect',type: "text/css",href: 'https://fonts.googleapis.com'},{rel: 'stylesheet',type: "text/css",href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap',crossorigin: ''},{rel: "stylesheet",type: "text/css",href: "https://unpkg.com/swiper@8/swiper-bundle.css",},]})
</script>
扩展:
如果是本地的CSS获取JS要配置再public 的目录下,然后安装public文件目录约定访问路径进行访问即可,例如
useHead({script: [{src: "/js/jquery.js",},{src: "/js/slide.js",},],
});