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
版权声明:本文为博主原创文章,转载请附上博文链接!

vue-cli搭建项目引入jquery和jquery-weui步骤详解的更多相关文章

  1. vue cli搭建项目及文件引入

    cli搭建方法:需安装nodejs先 1.npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载 ...

  2. 从零搭建vue3.0项目架构(附带代码、步骤详解)

    前言: GitHub上我开源了vue-cli.vue-cli3两个库,文章末尾会附上GitHub仓库地址.这次把2.0的重新写了一遍,优化了一下.然后按照2.0的功能和代码,按照vue3.0的语法,完 ...

  3. vue cli搭建项目

    1.首先电脑要在安装node环境下才能运行 2.全局安装webpack:npm install webpack -g 3.安装vue脚手架: npm install vue-cli -g 4.新建文件 ...

  4. jQuery实现照片墙,附步骤详解

    现在一直使用vue写项目,发现之前的js都很生疏了,写个小demo练下手,看一下最终效果展示 功能点:点击添加图片随机添加一张图片,图片可以拖动,可以点击删除 技能点: 主要使用了jQuery的一些方 ...

  5. [转]3天搞定的小型B/S内部管理类软件定制开发项目【软件开发实战10步骤详解】

    本文转自:http://www.cnblogs.com/jirigala/archive/2010/10/07/1845275.html 2010-10-07 21:39 by 通用C#系统架构, 5 ...

  6. vue新手入门之使用vue框架搭建用户登录注册案例,手动搭建webpack+Vue项目(附源码,图文详解,亲测有效)

    前言 本篇随笔主要写了手动搭建一个webpack+Vue项目,掌握相关loader的安装与使用,包括css-loader.style-loader.vue-loader.url-loader.sass ...

  7. vue cli 打包项目造成css背景图路径错误

    vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...

  8. jquery $.trim()去除字符串空格详解

    jquery $.trim()去除字符串空格详解 语法 jQuery.trim()函数用于去除字符串两端的空白字符. 作用 该函数可以去除字符串开始和末尾两端的空白字符(直到遇到第一个非空白字符串为止 ...

  9. 人工智能之深度学习-初始环境搭建(安装Anaconda3和TensorFlow2步骤详解)

    前言: 本篇文章主要讲解的是在学习人工智能之深度学习时所学到的知识和需要的环境配置(安装Anaconda3和TensorFlow2步骤详解),以及个人的心得体会,汇集成本篇文章,作为自己深度学习的总结 ...

随机推荐

  1. 【CF 1059C】 Sequence Transformation 数学

    C. Sequence Transformation:http://codeforces.com/contest/1059/problem/C 题意 给你一个n,第一次输出1-n个数的gcd,然后你可 ...

  2. JOBDU 1027 欧拉回路

    题目1027:欧拉回路 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:3620 解决:1847 题目描述:     欧拉回路是指不令笔离开纸面,可画过图中每条边仅一次,且可以回到起点的一条 ...

  3. Gym 101470 题解

    A:Banks 代码: #include<bits/stdc++.h> using namespace std; #define Fopen freopen("_in.txt&q ...

  4. lightoj 1248-G - Dice (III) (概率dp)

    题意:给你n个面的骰子,问扔出所有面的期望次数. 虽然这题挺简单的但还是要提一下.这题题目给出了解法. E(m)表示得到m个不同面的期望次数. E(m+1)=[((n-m)/n)*E(m)+1]+(m ...

  5. Codeforces Round #383 (Div. 2)D. Arpa's weak amphitheater and Mehrdad's valuable Hoses(dp背包+并查集)

    题目链接 :http://codeforces.com/contest/742/problem/D 题意:给你n个女人的信息重量w和美丽度b,再给你m个关系,要求邀请的女人总重量不超过w 而且如果邀请 ...

  6. Promise then中回调为什么是异步执行?Promise执行机制问题

    今天发现一个问题,看下方代码 let p = new Promise(function(resolve, reject) { resolve() console.log('); }); p.then( ...

  7. 字符串的api (基础)

    一.基础 1.字符串.charAt(index) 根据下标获取字符串的某一个字符 应用: 判断字符串的首字母是否大写 任意给定的一串字母,统计字符串里面的大写字母和小写字母的个数 2.字符串.inde ...

  8. 题解 洛谷P5259【欧稳欧再次学车】

    实际上没什么可说的,暴力大模拟就好. 一定要开long long! 一定要开long long! 一定要开long long! (不然会炸数据的!!!) //Stand up for the fait ...

  9. springboot应用监控和管理

    spring boot应用监控和管理 Spring Boot 监控核心是 spring-boot-starter-actuator 依赖,增加依赖后, Spring Boot 会默认配置一些通用的监控 ...

  10. idea中applicationContext-dao.xml文件中Cannot resolve file***** :spring xml model validation问题

    访问不了classpath下的文件夹中的文件 解决办法如下:(问题出在我创建的resources文件夹是一个普通的文件夹) 1.本来是普通的文件夹 2.ctrl+shift+alt+s打开如下界面: ...