前端学习笔记（脚手架构建的vue项目中引入jquery和bootstrap）

1、引入jquery

1.1、下载依赖

cnpm install jquery --save-dev

1.2、修改 build/webpack.base.conf.js 配置文件

• 加入 webpack 对象

var webpack = require('webpack')

• 在 module.exports 里面加入：

plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      jquery: "jquery",
      "window.jQuery": "jquery",
      Popper: ['popper.js', 'default']
    })
  ],

1.3、在入口文件 main.js 中加入：

import $ from 'jquery'

如果遇到 报错 '$' is defined but never used  可参考解决方案：点击这里

2、引入bootstrap

2.1、下载bootstrap依赖

cnpm install bootstrap@3 --save-dev

下载依赖后可能会有提示：peerDependencies WARNING bootstrap@* requires a peer of popper.js@^1.14.7 but none was installed

需要安装 popper.js 1.14.7版本的依赖，执行下面命令下载依赖即可：

如果没有提示则忽略这一步。

cnpm i popper.js@1.14.7 -S  # -S表示保存到当前项目的依赖里去

2.2、在入口文件 main.js 中引入bootstrap

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

//字体根据自己需要引入
import 'bootstrap/dist/fonts/glyphicons-halflings-regular.eot'
import 'bootstrap/dist/fonts/glyphicons-halflings-regular.svg'
import 'bootstrap/dist/fonts/glyphicons-halflings-regular.ttf'
import 'bootstrap/dist/fonts/glyphicons-halflings-regular.woff'
import 'bootstrap/dist/fonts/glyphicons-halflings-regular.woff2'

3、测试是否引入成功

从bootstrap官网随便复制一段代码，我这里复制一下分页的代码放到项目中去：

<nav aria-label="Page navigation">
      <ul class="pagination">
        <li>
          <a href="#" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li>
          <a href="#" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>

使用 npm run dev 运行项目。

可能会报警告：{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.

请参考解决方式：点击这里

 

最后  如果一切像预料的那样显示，那么说明引入成功了。