zoukankan      html  css  js  c++  java
  • vue 中使用jquery

    vue-cli搭建的项目

    第一种方式:npm 引包的方式

    1.安装jquery

    npm install jquery --save

    2.webpack配置

    在项目根目录下的build目录下找到webpack.base.conf.js文件,在开头使用以下代码引入webpack,因为该文件默认没有引用,

    var webpack = require('webpack')

    然后在module.exports中添加一段代码,

    // 原有代码
    resolve: {

    },
    // 添加代码

    plugins: [
    new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery"
    })
    ],
    // 原有代码
    module: {
    rules: [
    // ......
    ]
    }

    3.在main.js中导入jquery,全局可用

    import 'jquery'

    4.在.vue文件中就可以操作dom了 console.log($('选择器')) 然后执行npm run dev

    注意:如果你的项目装了eslint,可能会报一下的错误

    但是编译却报错了:

    http://eslint.org/docs/rules/no-undef '$' is not defined or

    http://eslint.org/docs/rules/no-undef 'jQuery' is not defined

    这时候需要做的下一步就是要修改根目录下.eslintrc.js文件了,在改文件的module.exports中,为env添加一个键值对 jquery: true

    env: { 
    // 原有
    browser: true,
    // 添加
    jquery: true
    }
    再次执行npm run dev 就可以啦

    第二种方式:绝对路径直接引入,全局可用

    1.在index.html中引入jquery.js

    注意:如果是在index.html引入的是自己写的全局的js,写在window.onload=function(){}

    2.在.vue文件即可使用了
     
  • 相关阅读:
    转:页面刷新方法
    CSS 浏览器兼容与解析
    转XML格式与DataTable、DataSet、DataView格式的转换
    好文共欣赏--发布收藏
    利用HttpWebRequest自动抓取51la统计数据
    Asp.net中多语言的实现
    转 启用IIS的Gzip压缩
    在asp.net web 程序中使用Sqlite数据库
    cte+xml
    trace (转)
  • 原文地址:https://www.cnblogs.com/zousaili/p/9392996.html
Copyright © 2011-2022 走看看