zoukankan      html  css  js  c++  java
  • vue-cli搭建项目引入jquery和jquery-weui步骤详解

    vue简介
       Vue.js 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。
    Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
      另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

    vue引入jquery
      1. 在package.json里加入依赖:

    dependencies:{
    "jquery" : "^3.2.1"
    }
    1
    2
    3
      2. 然后在集成终端执行命令: npm install
      
      3. 添加webpack静态模块打包器,在build目录下的webpack.base.conf.js里加入:

    var webpack = require("webpack")
    1
      4. 在build目录下的webpack.base.conf.js里的module.exports的最后加入:

    plugins: [
    new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.ProvidePlugin({
    jQuery: "jquery",
    $: "jquery"
    })
    ]
    1
    2
    3
    4
    5
    6
    7
      5. 上面的步骤做完之后,在集成终端执行命令:npm run dev,这样jquery就引入进来了
      
      6. 使用方式,在src目录下的main.js引入:import $ from ‘jquery’,这个是配置全局的;
        如果要在单个vue引入的话,可以在vue页面的script里面添加:import $ from ‘jquery’

      7.引入了jquery之后,就可以在vue里面直接使用jquery了

    vue引入jquery-weui
      1.首先同样的在package.json文件里面加入依赖:

    dependencies:{
    "jquery-weui" : "^1.2.0"
    }
    1
    2
    3
      2.然后在集成终端执行命令:npm install –save jquery-weui

      3.上面的步骤完成之后就可以直接在vue页面的script里面调用:

    import weui from 'jquery-weui/dist/js/jquery-weui.min'
    import picker from 'jquery-weui/dist/js/city-picker.min'
    1
    2
      4.最后就能直接调用jquery-weui上面的方法和组件了,比如:

    对话框:$.alert("自定义的消息内容");
    顶部提示toptip:$.toptip('操作成功', 'success');
    日期时间选择器:$("#datetime-picker").datetimePicker();
    1
    2
    3
    总结
      好了,以上就是vue引入jquery和jquery-weui的步骤详解,实践是检验认识真理性的唯一标准,多动手操作就能很快对vue上手了,另外,推荐vue实现多种效果的学习网站:http://618cj.com/category/vue教程/
    ---------------------
    作者:sixmonth~
    来源:CSDN
    原文:https://blog.csdn.net/alan_liuyue/article/details/79904327
    版权声明:本文为博主原创文章,转载请附上博文链接!

  • 相关阅读:
    对象遍历 for in ,数组遍历for in 与 for of 的区别
    计算一个数组中key值相同的数量
    VUE的两种跳转push和replace对比区别
    微信公众号二次分享ios分享失败问题
    获得对象中的键或值
    第一个table根据checkbox选择tr,在另一个table中显示对应索引的tr(jq遍历的运用)
    checkbox 全选反选 获得所有的checkbox
    为什么jQuery要return this.each()?
    用jq代码写出一个轮播图。
    页面滚动到一定位置,两个div 朝中间运动。
  • 原文地址:https://www.cnblogs.com/whowhere/p/10015035.html
Copyright © 2011-2022 走看看