以前很拒绝vue+jq一起使用。但是vue写动画特效实在是难受,所以就试着去尝试了下,vue+jq的开发。
嗯,挺爽的,哈哈。
这里讲下,如何在vue-cli中引入jquery。
1.找到package.json文件,打开
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"jquery": "^3.1.1" // 加入此行,版本号可自己定义
},
2.找到webpack.base.conf.js文件,打开
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const webpack = require("webpack") //加入此行
const vueLoaderConfig = require('./vue-loader.conf')
3.在webpack.base.conf.js 文件中,加入
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
// 加入以下代码
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
],
4.找到main.js 打开
import Vue from 'vue'
import App from './App'
import router from './router'
import $ from 'jquery' // 加入此行
好了,大功告成。
npm run dev 走一波!!!