精华内容
下载资源
问答
  • 下面小编就为大家分享一篇Vue cli 引入第三方JS和CSS的常用方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了vue引入第三方字体文件的方法示例,文中讲述了实现方法及其错误的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Vue引入第三方js库

    千次阅读 2018-11-23 15:08:51
    Vue引入第三方js库 在index.html中引用script 直接在index.html中引用script,任何时候皆可用!! 注意:第三方js必须放在static目录下 <!DOCTYPE html> &...

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

    1. 方法一:在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>
    
    1. 方法二:若第三方中的对象或者方法,已经暴露出来(即,已经通过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配制,进而引入

    1. 第一步,安装插件,npm install xxx --save.
    2. 第二步,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

    展开全文
  • 主要介绍了通过webpack引入第三方库的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇关于VUE引入第三方js包及调用方法讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
  • script src="./static/jquery-1.12.4.js"></script> 这样,其实就已经可以在项目中使用 jQuery 了。 mounted () { console.log($) } 我们来看一下 调试器 截图: 可以看到,我们是可以正常打印出 ...

    <script src="./static/jquery-1.12.4.js"></script>
    这样,其实就已经可以在项目中使用 jQuery 了。
    mounted () {

      console.log($)

    }
    我们来看一下 调试器 截图:

    可以看到,我们是可以正常打印出 jQuery 的。

    由于我的项目开启了 ESLint 检测,所以也会报一个 warning[警告] :'$' is not defined 。

    我们可以让 ESLint 不检查这一行:


    mounted () {

      /* eslint-disable */

      console.log($)

    }


    加了 /* eslint-disable */ 以后,就不会报那个警告了。

    [](

    )二、绝对路径直接引入,配置后,import 引入后再使用

    第一种方法有一个弊端就是:我们每一个使用了 $ 的地方,都要再前面加上 /* eslint-disable */ ,这显然是不方便的。

    于是,我们有了第二种方法

    还是先在主入口页面 index.html 中用 script 标签引入:


    <script src="./static/jquery-1.12.4.js"></script>


    然后,我们可以在 webpack 中配置一个 externals


    externals: {

      'jquery': 'jQuery'

    }


    这样,我们就可以在每一个组件中用 import 来引用这个 jquery 了。


    import $ from 'jquery'

    export default {

      created() {

        console.log($)

      }

    }

    很好,没有任何问题,我们可以在这个组件中 随意的 任意的 多次的 来使用 $ 了。

    OK,咱们已经介绍两种方式了,它们有一个共同点:都需要在主入口页面 index.html 中,用 script 标签来引入 jQuery。前端培训

    如果你不想在 inde.html 中使用 script 标签来引入 jQuery 的话,我们还有方法

    [](

    )三、webpack中配置 alias,import 引入后再使用

    我们不需要在主入口文件 index.html 中引入 jQuery 。我们只需要在 webpack 的配置文件中,在 resolve 中为 jQuery 添加一个 alias[别名] 。


    resolve: {

      extensions: ['.js', '.vue', '.json'],

      alias: {

        '@': resolve('src'),

        'jquery': resolve('static/jquery-1.12.4.js')

      }

    }

    那么,我们就可以在任意组件中,通过 import 的方式来使用 jquery 了。


    <script>

    import $ from 'jquery'

    export default {

      name: 'app',

      created() {

        console.log($)

      }

    }

    </script>

    控制台截图:

    OK,也是没有任何问题的

    [](

    )四、webpack 中配置 plugins,无需 import 全局可用

    在第三种的基础上,如果我们增加一个 plugins 的配置,那么,我们在使用的时候,无需 import $ from 'jquery' 也可以。

    复制


    ### 最后

    ![Vue 中如何引入第三方 JS 库,如何学习web开发_前端开发_04](https://s8.51cto.com/images/20210928/1632837850716891.jpg)

    ![Vue 中如何引入第三方 JS 库,如何学习web开发_面试_05](https://s2.51cto.com/images/20210928/1632837851636867.jpg)

    **资料过多,篇幅有限**

    **[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://ali1024.coding.net/public/P7/Web/git)**

    >自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。

    展开全文
  • vue引入第三方js文件

    千次阅读 2019-07-09 14:44:03
    1.把js文件放入静态文件文件夹(static)下; 2.修改build>webpack.base.conf.js文件 在resolve.alias添加需要的js文件 3.在需要的页面引入

    1.把js文件放入静态文件文件夹(static)下;

    在这里插入图片描述

    2.修改build>webpack.base.conf.js文件

    在resolve.alias添加需要的js文件
    在这里插入图片描述

    3.在需要的页面引入

    在这里插入图片描述

    展开全文
  • const appjs = (callback,url) => { var scripts = [url]; var HEAD = document.getElementsByTagName("head").item(0) || document.documentElement; var s = new Array(), last = scripts.length - 1, ...

    const appjs = (callback,url) => {
        var scripts = [url];
        var HEAD =
            document.getElementsByTagName("head").item(0) ||
            document.documentElement;
        var s = new Array(),
            last = scripts.length - 1,
            recursiveLoad = function (i) {
                console.log('recursiveLoad中的this',this);
                //递归
                s[i] = document.createElement("script");
                s[i].setAttribute("type", "text/javascript");
                s[i].onload = s[i].onreadystatechange = function () {

                    console.log('onreadystatechange中的this',this);
                    
                    //Attach handlers for all browsers
                    if (
                        !/*@cc_on!@*/ 0 ||
                        this.readyState == "loaded" ||
                        this.readyState == "complete"
                    ) {
                        this.onload = this.onreadystatechange = null;
                        this.parentNode.removeChild(this);
                        if (i != last) recursiveLoad(i + 1);
                        else if (typeof callback == "function") {
                            callback();
                        }
                    }
                };
                s[i].setAttribute("src", scripts[i]);
                HEAD.appendChild(s[i]);
            };
        recursiveLoad(0);
    }

    export default appjs 
     

    展开全文
  • vue项目引入第三方js插件,单个js文件引入成功,使用该插件方法时报错 1、引入第三方js文件,npm安装不了 2、控制台显示引入成功 3、在methods下使用 图片看不清请看下面代码 updateTime() { setInterval(()=>...
  • 第三方库: https://github.com/google/blockly 需要引入两个js文件 blockly_compressed.js blocks_compressed.js 使下边的代码正常运行 ``` 挑战1 ; width: 600px;"> ...
  • 由于我们会用到第三方的js,有些不遵守eslint规则,会有很多报错,比如: 我们可以在.vue文件引入第三方js文件的的上方引入如下代码: /* eslint-disable */
  • 方法一:配置 webpack ProvidePlugin 全局引入 假设要使用到 jquery,那么可以通过配置 ...另外一种比较靠谱的方法是将第三方模块打包成插件,如我需要全局使用 echarts,那么在 src 目录下新建一个 lib,并创建名为
  • 主要介绍了vue组件内部引入外部js文件的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Vue cli 引入第三方JS和CSS的常用方法

    万次阅读 2017-08-21 16:33:33
    如果要引入第三方JS或者css 最好是把文件放在statis文件夹下,此处是静态文件存放的位置 第一种方法: 直接在index.html中引入 js   &lt;script type="text/javascript" src="static/...
  • 本篇文章主要介绍了如何在 Vue.js 中使用第三方js库,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 最近在使用 Vue 做东西,用到钉钉扫描登录的功能,这里需要引入远程的 js 文件,因为 Vue 的方式跟之前的不太一样,又不想把文件下载到本地应用,找了一下解决的方法,貌似都需要引入第三方,最后找到了解决方案...
  • 方法一:静态资源导入(或者cdn资源加载) ...script type="text/javascript" src="./wangEditor.min.js"></script> //cdn资源加载 <script type="text/javascript" src="https://unpk
  • 我们以 JQuery 为例,来讲解~ 一、绝对路径直接引入,全局...script src="./static/jquery-1.12.4.js"></script> 这样,其实就已经可以在项目中使用 JQuery 了。 mounted () { console.log($) }...
  • 前端通过引入第三方js包,调用js包里的初始化方法和提交方法完成登陆; 流程1.引入第三方包 1.1在index.html文件下引入 流程2.完成初始化 问题2.1因为初始化的时候,必须传递后端分配的state,用作验证。 当时...
  • vue.js如何引入第三方模块?下面本篇文章给大家介绍一下Vue中正确引入第三方模块的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。vue.js如何引入第三方模块?方法一:配置 webpack ...
  • es6不能在用script了,如果vue项目中用script引入js文件是不生效的 此处,我引入的是echarts的中国地图数据文件 `//chinaJson.js var chinaJson = { //此处是中国地图的json数据,可在 以下链接找到中国国内所有省市...
  • 因为gif.js没有npm包,所以用官方提供的cdn引入,这样好像不行,是不是要写成import呢 具体要怎么写呢 import https://imgss.github.io/demo/gif/gif.js
  • vue.js怎样引入到HTML中如何将vue.js引入HTML,把vue.js引入HTML的方法:一、下载vue . js;然后在HTML中添加vue.js包,其语法为“script src=’ $ { path }/web/constant/vue . js ‘/script”。这个教程操作环境:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,427
精华内容 8,170
关键字:

vue文件引入第三方js库

vue 订阅