vue - (引入jq)

以前很拒绝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 走一波!!!

posted @ 2018-03-14 13:51  Lafitewu  阅读(182)  评论(0)    收藏  举报