【vue】vue中使用jquery和bootstrap

前端开发小铁匠 2019-01-04

vue中使用jquery和bootstrap

在阅读本文之前，应该掌握了vue项目的搭建。命令执行请先切换到项目目录。

引入jquery

安装jquery（在package.json中查看是否安装，如果已安装可忽略此步骤）

$ npm install jquery --save-dev

在 build/webpack.base.conf.js 中添加如下内容：

const webpack = require('webpack')

在 module.exports = { 代码段里加入下面内容：

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

在main.js中添加内容

import $ from 'jquery'

然后可以重新执行 npm run dev 后测试是否可用

引入bootstrap （方式一）

安装bootstrap

npm install bootstrap --save-dev

安装成功后，能够在package.json文件夹中看到bootstrap这个模块。
这时候需要在main.js中添加如下内容：

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

重新运行如果报一下错误：

Module not found: Error: Can't resolve 'popper.js' ....

这是因为使用webpack打包bootstrap4的时候，需要手动安装popper.js

npm install popper.js -D

然后重新运行即可

引入bootstrap （方式二）

可以把bootstrap下载下来放入静态文件夹，或者使用 BootCDN 提供的免费 CDN 加速服务直接在index.html中引入bootstrap


<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>title>

    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">script>
head>