Vue中引入jquery bootstarp bootstarp-table (vue 2.0)

Vue中引入jquery bootstarp bootstarp-table (vue 2.0)

今天用vue-cli总是重复搭建环境，由于老年人的记忆里,总是记不住简单的细节,此为记录,好记性不如烂笔头!

如图所示,要想使用 jquery bootstarp bootstarp-table 就需要按顺序引入

jquery > bootstarp > bootstarp-table
//路径可能会有变动 最好在node_modules 中看看

import $ from 'jquery'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
import 'bootstrap-table/dist/bootstrap-table.min.css'
import 'bootstrap-table/dist/bootstrap-table.min.js'
import 'bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js'

mian.js 入口文件引用前,当然要有依赖啦!

注意事项:要在当前项目文件夹下下载安装

npm install  jquery --save--dev
npm install bootstrap@3 --save--dev
npm install bootstrap-table@1.11.1 --save--dev
npm install --save popper.js      //这个为第三方依赖 

修改webpack.base.conf.js文件配置

1.加入

	var webpack = require('webpack');

2.在module.exports里输入：

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

最后

运行 npm run dev 就可以正常启动了 哈哈哈 .完美

推荐检测方法
一. 检测jquery

			$(function () {  
			    alert(123);  
			 });

页面弹出123,就说明第一步是没有问题的
二.检测 bootstrap

<div class="btn-group" role="group" aria-label="...">  
      <button type="button" class="btn btn-default">Left</button>  
      <button type="button" class="btn btn-default">Middle</button>  
      <button type="button" class="btn btn-default">Right</button>  
    </div>

按钮拥有样式,就说明这步也是没有问题的

三.检测bootstarp-table

//html
<table id="table" ></table>
//js
$("#table").bootstrapTable({})

因为没有配置跟数据 生成效果 (如图)

这样 就是一切完美 ,然后就可以配置使用 bootstrap-table