vue 异步外链解决方案

55 篇文章 2 订阅

nuxt,vue交流群 群153181864  前端交流群 ,绝对原创,转载请附上 本微博链接。

场景:  一般外部JS我们都可以直接模块化成.vue  引入到 对应组件的 ,但是也会有那种需要动态获取的  JS  

比如 百度地图.js  站长统计.JS这种, 这就尴尬了,好,怎么破,最粗暴的方案就是 直接  index.html 来一刀  引入了,这也是目前最流行的方法,也有比较温柔的方法 就是 webpack-require-http  ------>>>   连接,这个方法我就不介绍了.

博主 今天要说的另一个 另类的方法  :getScript

$.getScript("http://www.aaasdsadsaeweq.js");

用法很简单啊,对  JQUERY的  你先要有,其次   要在dom节点加载完后 完  ,来,看看代码吧

mounted () {
			var m=this;
			this.$nextTick(function () {//dom节点加载完才执行
				if(window.AMap==undefined){
					$.getScript("http://webapi.amap.com/maps?v=1.4.7&key=xxxxxxxxxxxxxxxxxxxxxx",function(){
						//这里就是请求完JS之后的回调啦	
					});
				}else{
					//
				}
				
				
			})
		},

注意,因为我玩的是高德,所以是 window.AMap  来判断,   如果你是百度地图  记得换条件哦,

如果您正在使用 Vue.js 构建应用程序并想要在应用程序中使用某个现有的 CSS 布局框架,您可以将该框架作为外部链接引入您的应用程序。这里有一些步骤可以帮助您完成此操作: 1. 找到您要使用的布局框架的 CDN 地址或下载到本地。 2. 在您的 Vue 应用程序中创建一个新的 HTML 文件(例如,`index.html`),并将 CSS 样式表的链接添加到该文件中。例如,如果您想使用 Bootstrap,则可以将以下链接添加到您的 HTML 文件中: ```html <!-- CSS 样式表链接 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-Gt+y9Z+tWgZv/RYT88jPry71jiDcxJztcwvmpKj0xQfCDtY9ZBhFrZeuT7HbT+Tt" crossorigin="anonymous"> ``` 3. 在您的 Vue 应用程序中使用该布局框架的组件和样式。例如,如果您想在您的 Vue 组件中使用 Bootstrap,则可以使用以下代码: ```html <template> <div class="container"> <h1>Hello, world!</h1> </div> </template> <script> export default { name: 'MyComponent', } </script> <style> /* Bootstrap 样式 */ .container { max-width: 960px; margin: 0 auto; padding: 0 15px; } </style> ``` 这个示例组件使用了 Bootstrap 的 `.container` 样式类,该类定义了一个带有最大宽度和内边距的居中容器。您可以使用其他的 Bootstrap 类来定义您的组件的样式。 希望这些步骤能够帮助您将外部 CSS 布局框架引入您的 Vue 应用程序中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

雪狼之夜

打个赏,让博主知道博文没白写

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值