Vue中引入JQuery和Bootstrap方法

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

一、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'

相关文章
|
4月前
|
JavaScript
jQuery 遍历 方法
jQuery 遍历 方法
38 5
|
2月前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
38 3
|
3月前
|
XML JavaScript 数据格式
jquery中html()方法的使用
jquery中html()方法的使用
32 1
|
3月前
|
前端开发 JavaScript
jQuery - AJAX load() 方法
jQuery load() 方法是简单但强大的 AJAX 方法。
61 6
|
4月前
|
JavaScript 前端开发
jQuery 杂项方法
jQuery 杂项方法
36 2
|
4月前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
32 2
|
4月前
|
JavaScript
jQuery 效果 方法
jQuery 效果 方法
19 3
|
4月前
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
45 1
|
4月前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
22 2
|
3月前
|
存储 JSON JavaScript
jQuery 方法大全
jQuery 方法大全
21 0

热门文章

最新文章