VUE中使用cnpm命令安装bootstrap

注意：

1.本教程将使用 cnpm 命令进行

2.在安装 bootstrap 之前，我们需要先安装 jQuery

一、安装jquery

1.安装命令

cnpm install jquery --save --save-exact  # 安装jquery的命令

--save 表示保存到 package.json 文件中

--save-exact 去掉 > 精确版本

2.修改 build文件夹下的webpack.base.conf.js 文件

在头部插入

    //..........

const webpack = require("webpack")    //新加

    //..........

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
    //下面这段为新增代码
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "windows.jQuery": "jquery",
      Popper: ['popper.js', 'default'],  //这一句是安装 bootstrap 和 bootstrap 的 popper.js 之后再添加进来
    })
  ],

3.在入口文件main.js中加入代码：

import $ from 'jquery'
import 'bootstrap/dist/css/bootstrap.min.css'  //安装 bootstrap 之后添加
import 'bootstrap/dist/js/bootstrap.min.js'  //安装 bootstrap 之后添加

二、安装 bootstrap 和 bootstrap的popper.js

1.安装命令

cnpm install bootstrap --save --save-exact  # bootstrap的命令
cnpm install --save popper.js  # bootstrap的popper.sj命令

2.再将上面那些在 bootstrap 安装完之后添加的代码加入对应地方即可

 

三、测试是否成功

1.在App.vue文件中加入

<template>
    <div id="app">
        <button type="button" class="btn btn-success">成功</button>
        <button type="button" class="btn btn-info">信息</button>
        <button type="button" class="btn btn-warning">警告</button>
    </div>
</template>

<script>
    $(function () {
        alert('jquery引入成功！')
    })
export default {
  name: 'App'
}
</script>

2.运行 cnpm run dev 之后访问项目，看到提示则引用成功