zoukankan      html  css  js  c++  java
  • vue+webpack 引入jquery

    1 首先 cnpm install jquery;这时jquery已经安装成功,可以使用jquery,但是jquery不是全局的,需要在使用的组件中引入jquery,jquery的路径是jquery/dist/jquery.min.js,

    inport $ from "jquery/dist/jquery.min.js" 就可以使用$了;

    我们也可以在webpack.base.config.js中配置;路径的别名方便引入:2


    之后我们就可以在使用jquery的组件中这样引入

    3 import $ from 'jquery';

    这是jquery不是全局的,如果要使用在每一个模块中需要import 。比较麻烦,下面是设置jquery为全局的方法:

    一。引入jQuery

    在当前项目的目录下(就是package.json),运行命令 cnpm install jquery --save-dev  这样就将jquery安装到了这个项目中。在上面步骤的前提下:

    修改webpack.base.conf.js(在build文件下)两个地方:

    4:加入 

    var webpack=require('webpack');

    5 在module.exports的里面加入

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

    6 最后在main.js中加入import $ form 'jquery',完成jquery的引入

    ok,这是jquery就是全局的了,在任意模块中都可以使用了

    tip:在webpack的output.libraryTarget,需要设置为var,默认值就是var(当 library 加载完成,入口起点的返回值将分配给一个变量),如果设置为commonjs等可能会报错,原因见:output.libraryTarget

    如果想要引入不会以commonjs规范书写的js就可以这样引入,在组件中import之后,因为是commonjs规范,所以会按顺序加载,引入成功

  • 相关阅读:
    安装VMWare tools 及安装后/mnt中有hgfs但没共享文件的解决办法
    linux挂载命令
    RHEL7/CentOS7 Network Service开机无法启动的解决方法
    linux消息队列编程实例
    Linux进程间通信——使用消息队列
    消息队列函数
    ipcs查看消息队列命令
    linux批量删除
    HTTP 请求消息头部实例:
    drf 序列化组件
  • 原文地址:https://www.cnblogs.com/xiaofenguo/p/7605912.html
Copyright © 2011-2022 走看看