学vue第一记：Vuejs整合bootstrap和jQuery

一. vue 2.0环境下

1.创建vue项目   npm init webpack new-vue

2.安装jQuery   npm install jquery --save   

    如果想查看npm上jquery有哪些版本，可以执行命令： npm view jquery versions

1) 在webpack.base.conf.js中增加声明webpack

var webpack=require('webpack')

2) 在module.exports = {}中添加以下代码

plugins: [

new webpack.optimize.CommonsChunkPlugin('common'),

  new webpack.ProvidePlugin({

jQuery:'jquery',

    $:'jquery',

    "windows.jQuery":"jquery"

  })

]

3) 在用到 jquery 代码的页面

import $ from 'jqyery'  或    import jQuery from 'jquery'

3. 安装Bootstrap指定版本   npm install [email protected] --save

Bootstrap 的dropdown插件是依赖popper.js 的，所以要安装popper.js  不然会报错    npm install popper.js --save

在main.js中导入bootstrap

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

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

二. vue 3.0 环境下

1.创建项目  vue create new-vue

2. 安装 jQuery 和 bootstrap，在 main.js 引入bootstrap，同上

3. 配置

    1）打开 .eslintrc.js 文件， 添加代码

    2）在根目录下创建 vue.config.js  文件，并添加代码

参考的网站：解决Error：Bootstrap dropdown require Popper.js (https://popper.js.org) - CSDN博客

vue-cli+webpack在生成的项目中使用bootstrap方法（二） - 白色的海 - 博客园

Vue CLI 3搭建vue+vuex 最全分析-云栖社区-阿里云