Vue中引入JQuery和Bootstrap方法

  1. 云栖社区>
  2. 博客>
  3. 正文

Vue中引入JQuery和Bootstrap方法

slashboywang 2018-09-27 19:39:00 浏览1686
展开阅读全文

一、Vue中引入JQuery

  • 1、因为已经安装了vue-cli脚手架,所以需要在webpack中全局引入jquery
    打开package.json文件,在里面加入这行代码,jquery后面的是版本,根据你自己需求更改。
dependencies:{
  "jquery":"^2.2.1"
}

↓↓↓↓↓↓↓


img_8078d43701c18b11b5c9a47b1150f85d.png
3.png
  • 2、然后在命令行中cnpm install
    大多人应该都是使用的淘宝镜像,所以使用cnpm,如果你不是 ,可以使用npm安装。

  • 3、在webpack.base.conf.js中加入一行代码
      let webpack=require("webpack")
    ↓↓↓↓↓↓↓↓↓

    img_437543a3e54a452e97e1538587f6d698.png
    1.png

  • 4、在webpack.base.conf.js中module.exports的最后加入这行代码,

   plugins: [
  new webpack.optimize.CommonsChunkPlugin('common.js'),
  new webpack.ProvidePlugin({
    jQuery: "jquery",
    $: "jquery"
  })
]

↓↓↓↓↓↓↓↓


img_ab13c2c2708fe8e30fdd44f865cf6990.png
2.png
  • 5、在main.js中引入,加入下面这行代码,全局引入。即可使用
    import $ from 'jquery'

二、引入Bootstrap

  • 1.安装Bootstrap
    打开package.json文件,在里面加入这行代码,bootstrap后面的是版本
    ↓↓↓↓↓↓↓↓
img_8078d43701c18b11b5c9a47b1150f85d.png
3.png
  • 2、然后在命令行中cnpm install
    大多人应该都是使用的淘宝镜像,所以使用cnpm,如果你不是 ,可以使用npm安装。

  • 3.在入口文件index.js里导入即可见效:
    import './node_modules/bootstrap/dist/css/bootstrap.min.css'
    import './node_modules/bootstrap/dist/js/bootstrap.min.js'

网友评论

登录后评论
0/500
评论
slashboywang
+ 关注