我是靠谱客的博主 紧张绿茶,最近开发中收集的这篇文章主要介绍Vue中引入JQuery和Bootstrap方法一、Vue中引入JQuery二、引入Bootstrap,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

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

最后

以上就是紧张绿茶为你收集整理的Vue中引入JQuery和Bootstrap方法一、Vue中引入JQuery二、引入Bootstrap的全部内容,希望文章能够帮你解决Vue中引入JQuery和Bootstrap方法一、Vue中引入JQuery二、引入Bootstrap所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(65)

评论列表共有 0 条评论

立即
投稿
返回
顶部