美文网首页
学vue第一记:Vuejs整合bootstrap和jQuery

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

作者: ai耳边的呢喃 | 来源:发表于2018-08-23 18:40 被阅读0次

    一. 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 最全分析-云栖社区-阿里云

    相关文章

      网友评论

          本文标题:学vue第一记:Vuejs整合bootstrap和jQuery

          本文链接:https://www.haomeiwen.com/subject/frvmiftx.html