vue中引入jQuery和bootstrap

2024-05-03 12:23•java•阅读 3471

引入

$ npm install jquery bootstrap --save

jquery

1.加入webpack对象

var webpack = require('webpack');

2.在module.exports里面引入

  plugins: [  
    new webpack.ProvidePlugin({  
      $:"jquery",  
      jQuery:"jquery",  
      "windows.jQuery":"jquery"  
    })  
  ]

3.在入口文件main.js中引入

import $ from "jquery"

全局引入jq

bootstrap

1.修改webpack.base.conf.js 文件：

alias: {
      'vue$': 'vue/dist/vue.esm.js',
      'jquery': "jquery/src/jquery"  
    },

2.在入口文件main.js中加入：

import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import '../node_modules/bootstrap/dist/js/bootstrap.min'

　　 vue适用的场景：复杂数据操作的后台页面，表单填写页面

　　 jquery适用的场景：比如说一些html5的动画页面，一些需要js来操作页面样式的页面

　　然而二者也是可以结合起来一起使用的，vue侧重数据绑定，jquery侧重样式操作，动画效果等，则会更加高效率的完成业务需求