Vue引入第三方js库

Vue引入第三方js库在index.html中引用script直接在index.html中引用script，任何时候皆可用！！注意：第三方js必须放在static目录下&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html&amp;amp;gt;&amp;amp;lt

一月清辉

11007人浏览 · 2018-11-23 15:08:51

一月清辉 · 2018-11-23 15:08:51 发布

情况一：无法通过npm install安装包引入

方法一：在index.html中引用script

直接在index.html中引用script，任何时候皆可用！！
注意：第三方js必须放在static目录下

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <title>vue-test</title>
   //新增，直接script标签引入，全局皆可用
   <script type="text/javascript" src="./static/js/qrcode.js"></script>
 </head>
 <body>
   <div id="app"></div>
   <!-- built files will be auto injected -->
 </body>
</html>

方法二：若第三方中的对象或者方法，已经暴露出来（即，已经通过export，export default导出）,则可以直接通过import引入即可使用。eg: jquery-1.11.3.min.js

此种方法，所引用的第三方插件本身必须已经通过export，export default导出方有效

2.1，将jquery-1.11.3.min.js放入static/js目录下（可局部引入2.2，或全局引入2.3）
2.2，局部引入方法如下

<script>
  //引入一个有export输出的文件
  import  $  from '../../static/js/jquery-1.11.3.min '
  export default {
      mounted(){
        this.$nextTick(function () {
           console.log($)
        })
      }
  }
</script>

或者，你也可以将jquery的路径放入webpack.base.conf.js中进行配置,这就是网上最常见的 “webpack.base.conf.js中配置 alias，import 引入后再使用”的方法。

//webpack.base.conf.js
resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'jquery':resolve('static/js/jquery-1.11.3.min')     
    }
  },

//组件中引入
<script>
  //引入一个有export输出的文件
  import  $  from 'jquery '
  export default {
      mounted(){
        this.$nextTick(function () {
           console.log($)
        })
      }
  }
</script>

2.3，全局引入方法，webpack.base.conf.js引入webpack,再配置 plugins

const webpack = require('webpack');        //先行引入webpack

//webpack.base.conf.js
resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'jquery':resolve('static/js/jquery-1.11.3.min')     
    }
  },
  //插件
plugins:[       
 //这样的话，全局皆可引用,注意，开头必须引入webpack,即const webpack = require('webpack')
    new webpack.ProvidePlugin({
      $:'jquery'
    })
],

//组件中无需引入，直接即可使用
<script>
  export default {
      mounted(){
        this.$nextTick(function () {
           console.log($)
        })
      }
  }
</script>

情况二：通过npm install安装包引入

方法一，修改webpack配制，进而引入

第一步，安装插件，npm install xxx --save.
第二步，webpack.base.conf.js配制如下( 配制和2.3 一样)

const webpack = require('webpack');        //先行引入webpack

//webpack.base.conf.js
resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    ‘xxx’:'sss'         //sss为安装的包名 ,xxx为包路径的简写
    }
  },
  //插件
plugins:[       
 //这样的话，全局皆可引用,注意，开头必须引入webpack,即const webpack = require('webpack')
    new webpack.ProvidePlugin({
      ttt:‘xxx’      //ttt为插件对象
    })
],

//组件中无需引入，直接即可使用
<script>
  export default {
      mounted(){
        this.$nextTick(function () {
           console.log(ttt)
        })
      }
  }
</script>

方法二，直接挂载到Vue实例上

// main.js中写入
import   xxx    from   '安装的插件'
Vue.prototype.xxx = xxx;

参考链接：https://www.cnblogs.com/queende7/p/8668691.html
参考链接：https://blog.csdn.net/csdn_yudong/article/details/78795743

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^