如何在VUE单页面引入CSS、JS(CDN链接)
2023-09-14 09:06:33 时间
来自:https://blog.csdn.net/kielin/article/details/86649074 侵删
可以有以下几个方法,关键看希望在什么环境下使用 1. JS/CSS想在全局使用,可以通过npm 安装后在main.js中引入,或在index.html中引入,这种大多不必说 2. 想在单页面使用,而又不想通npm安装,那个可以通过创建一个component的方式来引入,如下 <template> <div id="baseReport" > <remote-css href="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/css/bootstrap-grid.min.css"></remote-css> <remote-css href="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/css/bootstrap-reboot.css"></remote-css> <remote-css href="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/css/bootstrap.css"></remote-css> <remote-js src="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/js/bootstrap.bundle.js"></remote-js> <remote-js src="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/js/bootstrap.js"></remote-js> <div class="card-group"> <div class="card"> 这里是内容 </div> <div class="card"> 这里是内容 </div> <div class="card"> 这里是内容 </div> </div> </div> </template> <script> export default { components:{ 'remote-css': { render(createElement) { return createElement('link', { attrs: { rel: 'stylesheet', href: this.href }}); }, props: { href: { type: String, required: true }, }, }, 'remote-js': { render(createElement) { return createElement('script', { attrs: { type: 'text/javascript', src: this.src }}); }, props: { src: { type: String, required: true }, }, }, }, name: "baseReport", data() { return { } }, mounted(){ }, methods:{ } }; </script> <style scoped> </style> ———————————————— 版权声明:本文为CSDN博主「kielin」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/kielin/java/article/details/86649074
相关文章
- 基于vue-cli搭了一个多页面应用的空脚手架
- vue之用法
- vue.js - 解决vue-cli打包后自动压缩代码
- [Vue-rx] Handle Image Loading Errors in Vue.js with RxJS and domStreams
- [Vue-rx] Stream an API using RxJS into a Vue.js Template
- [Vue] Build Vue.js Apps with the Vue-CLI and Nuxt.js
- vue.js3:使用clipboard.js实现复制到剪贴板(vue@3.2.37 / clipboard@2.0.11)
- vue.js 3.2.6 解决swiper动态加载数据时默认显示最后一页(swiper@6.8.4)
- vue.js 3.2.22:自动旋转的音乐播放按钮
- Vue.js快速入门
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器前端源码重构(二)-webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间
- vue.js3: 使用js-md5 (js-md5@0.7.3 / vue@3.2.26)
- vue.js 3.2.22:用@vueuse/core实现图片懒加载(@vueuse/core@7.0.3)
- vue.js 3.2.22:自动旋转的音乐播放按钮
- vue.js 3.2.20:拖动创建div及移动、缩放、删除等操作
- vue项目中sass全局引用变量 sass-resources-loader webpack配置
- vue项目报错:migrating.js?2bb5:56 [Element Migrating][ElInput][Event]: click is removed.
- Vue数据双向绑定.sync 和v-model
- Vue中在template标签中进行判断时注意比较元素
- 主流前端框架对比:Vue.js , React, Angular.js
- 一文说清 webpack、vite、vue-cli、create-vue 的区别
- 【Vue介绍】
- Vue.js 条件与循环
- vue脚手架搭建2022年6月版本(保姆级-直接到路由使用)
- 网页前端(Html)video播放m3u8(HLS)&Vue使用video.js播放m3u8
- Vue 组件的定义、组件的使用、什么是路由、路由的定义和使用、nrm的安装使用