前言：最近有小伙伴问我，是不是用vue脚手架生成的项目就不能jquery了呢？显然，答案是否定的，必须能用。但是个人建议最好不要用了，用人家vue提供的不好嘛。

一、用vue-cli生成项目

1. vue init webpack-simple vue-jq

2. cd vue-jq

3. cnpm install

4. 使用git bash(只是为了方便)

5. package.json 中修改端口 --port 8088

6. npm run dev

二、构建项目结构，引入相关文件

目录结构如下：

|--assets

|--js

|--fn.js

|--jquery-1.7.2.min.js

|--css

|--animate.css

|--1.css

说明：fn.js为一个函数，里面返回了一个生成随机数的函数

export default {

rnd:function(m,n){

return parseInt(Math.random()*(m-n)+n)

},

b:5

};

1.css文件就设置了一个body的背景色

body{

background:#399;

}

三、配置相关文件

1. 在入口文件main.js引入所需的库

import './assets/css/animate.css';

import './assets/css/1.css';

import './assets/js/jquery-1.7.2.min.js';

2. 开始配置jquery库

1). npm install jquery --save-dev

2). 在webpack.base.conf.js中添加 配置

plugins: [

new webpack.ProvidePlugin({

$: 'jquery',

jquery: 'jquery',

'window.jQuery': 'jquery',

jQuery: 'jquery'

}),

],

3). 在App.vue中引入模块

import $ from 'jquery'

import fn from './assets/js/fn.js';

3. 开始配置animate.css库

1). npm install style-loader --save-dev

2). 在webpack.base.conf.js中添加 配置

{

test: /\.css$/,

loader: 'style-loader!css-loader' //顺序定死的，必须这么写，知道吗？

},

4. 添加事件修改dom

说明：

1. 点击“按钮”，利用jquery将class名为box的元素背景设为粉色

2. 点击“走你”，利用vue提供的方法获取元素并结合animate.css来实现动画效果，注意：这里调用了fn.js文件中生成随机数的函数。

ps：vue中获取元素，首先在该元素上加ref="xxx"，然后在js中用this.$refs.xxx 来获取该元素进行后续操作

import $ from 'jquery';//引入jq

import fn from './assets/js/fn.js';//引入外部的fn.js文件

export default {

name: 'app',

data () {

return {

msg: 'Welcome to vue',

show: true

}

},

methods: {

change(){

this.msg = 'div背景色变红了'

$('.box').css('background-color','pink');

},

move(){

this.show = !this.show;//用来配合动画(animate)使用

this.$refs.div1.style.backgroundColor = 'lawngreen';

//利用外部的fn.js中的rnd函数生成一个随机数

let item = $('.box:first span').html() + '；
生成的随机数是：'+ fn.rnd(1,100);

$('.box:first span').html(item);

}

}

}

效果如下：