vue导入第三方js

⑴ vue文件里面怎么引用外部的js文件

• 步骤：

1. 首先抄。我们要改袭造我们要映入的外部js文件，改成下面这个格式。主要是红色方块内部代码，我们需要将我们的模块“抛出”，让人能获取到以下及相应代码：

   

⑵ vue如何引入js文件

1、vue-cli webpack全局引入jquery
(1) 首先 npm install jquery --save (--save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。)
(2)在webpack.base.conf.js里加入

1

var webpack = require("webpack")

(3)在mole.exports的最后加圆慎入

1234567

plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.ProvidePlugin({ jQuery: "jquery", $: "jquery" })]

(4) 在main.js 引入就ok了 (测试这一步不用也雀腔察顷茄可以)

1

import $ from 'jquery'

(5)然后 npm run dev 就可以在页面中直接用$ 了.

⑶ 如何在.vue文件中引入外部js

Vue 的 createElement 方法，简单的封装一个组件解决问题。

解决方法
第一版代码（直接在操作 Dom ）如下：
export default {
mounted() {
const s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js';
document.body.appendChild(s);
},
}
使用 createElement 方法：
export default {
components: {
'dingtalk': {
render(createElement) {
return createElement(
'script',
{
attrs: {
type: 'text/javascript',
src: 'https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js',
},
},
);
},
},
},
}
// 使用在页面中调用
终极方案
通过封装一个组件 remote-js 实现：
export default {
components: {
'remote-js': {
render(createElement) {
return createElement('script', { attrs: { type: 'text/javascript', src: this.src }});
},
props: {
src: { type: String, required: true },
},
},
},
}
使用方法：
<remote-js src="https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js">remote-js>

⑷ 关于Vue-cli引入外部js资源文件失败的一点思路

首先申明我是window系统下Vue-cli 4.5.3版本，脚手架整体基于vue2内核。

1.正常js文件如果有使用export向外暴露对象，将js放在src/assets都是可以通过import直接引入。但有有些情况下我们需要导入第三方的js文件，例如近期我在做的阿里云点播视频上传SDK，包括最近在学习的ThreeJs，如果单单只是在public中index.html通过<script src="https://cdn.bootcss.com/three.js/92/three.js"></script>引入，是不够的携扰还需要在具体vue页面引入：辩闷旦

这也是我尝试两天才成功，走了些弯路，希望帮助到有同样问题的打工人，共勉罩宴!

⑸ 如何在vue中引入第三方jquery，swiper等库

一 .引入swiper(全局，局部)

• 方法一：全局引入，也是最暴力的，但是也是有好处坏处（同时加载，但是不能保证同时下载）

• <link href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.css" rel="stylesheet"><script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.min.js"></script>12



组件中可以直接使用的swiper了

• _initSwiper() { const container = this.$refs.swiper; const config = {


• effect: 'coverflow',


• slidesPerView: 'auto',


• centeredSlides: true,


• initialSlide: this.activeIndex,


• loop: true,


• autoplay: 1000,


• speed: 1000,


• coverflow: {


• rotate: 0,


• stretch: -30,


• depth: 100,


• modifier: 0.7,


• slideShadows: false,


• },


• }; this.mySwiper = new Swiper(container, config);


• }



2.方法二：main.js 中

• import '../node_moles/swiper/dist/css/swiper.min.css';import 'swiper';12



执行上面的_initSwiper()的方法 即可

3.方法三：局部的引入的，有时只想的单个组件中使用某一个的库，方法如下

• <section ref="swiper" class="swiper-container">


• <div class="swiper-wrapper">


• <div class="demo swiper-slide" v-for="item in colorList" :style="`backgroundColor:${item}`"></div>


• </div></section><script>


• let swiperAsync = import('swiper') //引入的swiper.js（node_moles）的方法


• export default {


• data(){ return {


• colorList: ['red', 'yellow', 'gray', 'pink']


• }


• },


• methods: {


• async _initSwiper() { let Swiper = await swiperAsync; //异步加载的


• const container = this.$refs.swiper; //ref='swiper'


• const config = { //swiper的参数配置


• effect: 'coverflow',


• slidesPerView: 'auto',


• centeredSlides: true,


• initialSlide: this.activeIndex,


• loop: true,


• autoplay: 1000,


• speed: 1000,


• coverflow: {


• rotate: 0,


• stretch: -30,


• depth: 100,


• modifier: 0.7,


• slideShadows: false,


• },


• }; this.mySwiper = new Swiper(container, config);


• },


• },


• mounted(){ this._initSwiper();


• }


• }</script><style lang="scss" scoped>


• /*@import '../assets/styles/swiper.min.css'; !*静态资源的文件*!*/


• @import '../../node_moles/swiper/dist/css/swiper.min.css';</style>



二 引入的jquery的方法

• 全局的方法

• <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>1



组件中可以直接使用的 ‘$’的方法

• 局部的方法：

• npm install jquery -D1



需要使用的组件中引入

• import $ from 'jquery'1

⑹ vue怎么导入自己写的js文件

1. 首先我们要改变我们要映入的外部js文件，改成以下这个格式。

⑺ vue中导入外链css或js

在vue中导入自定义的css文件或js文件

css文件
在main.js中导入公共的css
import '../static/css/common.css' //引入公链族判用css

在页面中引入单独css
<style scoped>
@import '../../static/css/header.css';
</style>

Js文件

自定义js 中写：
function title(t){
alert(t);
}

export {
title //多个方法在此处json中export出去
}

页面中使用：
<template>
<div>
<button class="btn" @click="clickme">click me</button>
</div>
</template>
<script>
import {title} from './js/common.js' //可以选择需棚改要的方法引入
export default {
data(){
return{
}
},
methods:{
clickme(){
title('你点我了穗碧');
}
}
}
</script>

或者

import Comjs from './js/common.js' //引入公用js
Vue.prototype.$comjs = Comjs; //添加到vue属性中

自定义js 中写：
const comjs = {

}

comjs.title = function (title) {
alert(title)
}

export default comjs;

页面中使用：
<template>
<div>
<button class="btn" @click="clickme">click me</button>
</div>
</template>

<script>
export default {
data(){
return{
}
},
methods:{
clickme(){
this.$comjs.title('你点我了');
}
}
}
</script>

⑻ vue项目中引入外部资源js

mounted() {

  const s = document.createElement('script');

  s.type = 'text/javascript';

  s.src = '你的需要的js文件地址';

  document.body.appendChild(s);

}

export default {

  components: {

    'remote-js': {

      render(createElement) {

        return createElement(

          'script',

          {

            attrs: {

              type: 'text/javascript',

              src: '你的需要的js文件地址',

            },

          },

        );

      },

    },

  },

}