学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 bootstrap@3.3.7 --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 最全分析-云栖社区-阿里云

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容