vue工程化之项目引入jquery
既然写项目,那么少不了用jq,那我们就引入进来吧
1、因为已经安装了vue脚手架,所以需要在webpack中全局引入jquery
打开package.json文件,在里面加入这行代码,jquery后面的是版本,根据你自己需求更改。
dependencies:{
"jquery":"^2.2.1"
}

2、然后在命令行中cnpm install
大多人应该都是使用的淘宝镜像,所以使用cnpm,如果你不是 ,可以使用npm安装。
3、在webpack.base.conf.js中加入一行代码
var webpack=require("webpack")

4、在webpack.base.conf.js中module.exports的最后加入这行代码,
|
1
2
3
4
5
6
7
|
plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.ProvidePlugin({ jQuery: "jquery", $: "jquery" })] |

5、在main.js中引入,加入下面这行代码,全局引入
|
1
|
import $ from 'jquery' |
6、最后一步,重新跑一遍就好,控制台输入npm run dev
你会神奇的发现,jq可以用了!
vue工程化之项目引入jquery的更多相关文章
- VUE项目引入jquery
既然写项目,那么少不了用jq,那我们就引入进来吧 1.因为已经安装了vue脚手架,所以需要在webpack中全局引入jquery 打开package.json文件,在里面加入这行代码,jquery后面 ...
- vue框架(三)_vue引入jquery、bootstrap
一.vue安装jquery 1.按照之前博客的内容,新建一个vue工程. 2.在项目文件夹下,使用命令npm install jquery --save-dev 引入jquery. 3.在build/ ...
- vue-cli搭建项目引入jquery和jquery-weui步骤详解
vue简介 Vue.js 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用. Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合 ...
- vue-cli项目引入jquery和bootstrap
1.安装插件 npm install jquery --save npm install bootstrap --save npm install popper.js --save //提示框插件,b ...
- vue项目引入bootstrap、jquery
在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...
- 在vue项目中引入jquery
在vue项目中引入jquerycnpm install jquery --save在main.js中引入,加入下面这行代码:import 'jquery'注:有些项目是按需加载的,在main.js里面 ...
- 在vue项目中正确的引入jquery和bootstrap
<script>标签引入jquery在vue脚手架里并不适用,需要利用webpack引入jquery 一.第一种方法 1:因为已经安装了vue脚手架,所以需要在webpack中全局引入jq ...
- vue系列---vue项目(已安装vuex)中引入jquery
vue项目中引入jquery有很多方法,这只是其中一种. 步骤如下: 1,安装jquery依赖 npm install jquery --save 如果是使用淘宝镜像则将npm改为cnpm 2,修改配 ...
- 在vue项目中通过iframe引入jquery项目
最近公司因为原来的jq框架存在的问题太多,所以要进行主题框架的重新搭建,我使用的vue进行的主题框架的重新搭建,但是原来的页面已经完成很多了,而且都是使用的jquery进行开发的 在vue中引入jqu ...
随机推荐
- hihocoder 第二十五周 spfa 最短路
其实hihocoder里的题目目前大都是模板题啊-.- 这周的是SPFA,暑假的时候有看过SPFA,不过一直用的都是Dijkstra,感觉spfa要更加简洁一点~~,今天找了一份之前一直都看不太懂所以 ...
- Code Project精彩系列(转)
Code Project精彩系列(转) Code Project精彩系列(转) Applications Crafting a C# forms Editor From scratch htt ...
- js中的call和apply方法
call方法: 语法:call(thisObj,[arg1,arg2,arg3,...]); 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call 方法可以用来代替另一个对象调用 ...
- 关于CentOS 7安装solr+tomcat
1.Solr7.1.0 安装部署(centos7) Solr7.1.0为目前的最新版,安装环境需要jdk1.8 或者更高,容器我用的tomcat,也建议tomcat8.0或者更高 1.1.下载solr ...
- Linux 常用命令十二 top
一.top命令 top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器. top显示系统当前的进程和其他状况,是一个动态显示过程,即可以 ...
- 洛谷 P3959 宝藏【状压dp】
一开始状态设计错了-- 设f[i][s]为当前与根节点联通状况为s,最深深度为i 转移的话枚举当前没有和根联通的点集,预处理出把这些点加进联通块的代价(枚举s中的点和当前点的连边乘以i即可),然后用没 ...
- hdu 5201 The Monkey King【容斥原理+组合数学】
原来我一开始以为的\( O(n^2) \)是调和级数\( O(nlog_2n) \)的! 首先枚举猴王的桃子个数\( x \),然后使用容斥原理,枚举有至少\( k \)个不满足的条件,那么这\( k ...
- ROS学习笔记六:xxx.launch文件详解
每当我们需要运行一个ROS节点或工具时,都需要打开一个新的终端运行一个命令.当系统中的节点数量不断增加时,每个节点一个终端的模式会变得非常麻烦.那么有没有一种方式可以一次性启动所有节点呢?答案当然是肯 ...
- 【BZOJ3309】DZY Loves Math(线性筛)
题目: BZOJ 3309 分析: 首先,经过一番非常套路的莫比乌斯反演(实在懒得写了),我们得到: \[\sum_{T=1}^n \sum_{d|T}f(d)\mu(\frac{T}{d})\lfl ...
- Activity状态图、生命周期图(超详细),onSaveInstanceState只保存、恢复基本ui数据,持久数据不在这里保存。
1.Activity状态图 2.Activity生命周期简图 启动Activity: onCreate()—>onStart()—>onResume(),Activity进入running ...