• 技术文章 >web前端 >Vue.js

    浅谈Vue项目中使用npm安装bootstrap和jquery

    青灯夜游青灯夜游2021-05-31 17:34:10转载211
    本篇文章给大家介绍一下在Vue项目中使用npm安装bootstrap以及jquery的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

    【相关推荐:《vue.js教程》】

    在Vue项目中使用npm安装bootstrap以及jquery

    经过我好多次的查询和实验,总结了一下在vue项目中使用bootstrap框架,npm安装注意.

    bootstrap中js插件依赖于jquery,所以在这之前必须安装jquery。

    jquery安装

    1、在package.json中添加一行代码:“jquery”: “^2.2.3”

    "dependencies": {
       "element-ui": "^2.0.5",
       "vue": "^2.5.2",
       "vue-router": "^3.0.1",
       "jquery": "^2.2.3"
     }

    2、在build文件webpack.base.conf.js中添加一行数据:

    //注:...代表省略自有的,
    //必定事先声明webpack,不然下面会不识别webpack
    const webpack = require('webpack')
    ...
    module.exports = {
        resolve: {
            ...
            alias: {
              ...
              'jquery': 'jquery' 
            }
        },
        plugins: [
            new webpack.ProvidePlugin({
              $: "jquery",
              jQuery: "jquery",
              "windows.jQuery": "jquery"
            })
        ],
        ...
    }

    3、在main.js中加入:import $ from ‘jquery’

    4、使用npm install jquery@2.2.3 –save-dev

    1.png

    这样jquery就安装完成了。

    bootstrap安装:

    1、使用npm install bootstrap@3.3.0 –save-dev

    2.png

    2、在需要的页面引入

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

    最后npm run dev启动项目,就ok啦。

    更多编程相关知识,请访问:编程视频!!

    以上就是浅谈Vue项目中使用npm安装bootstrap和jquery的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:csdn,如有侵犯,请联系admin@php.cn删除
    专题推荐:Vue bootstrap jquery
    上一篇:利用v-viewer结合vue 预览相册 下一篇:Vue如何进行事件处理?相关基础知识介绍
    第16期线上培训班

    相关文章推荐

    • vuex使用场景是什么• vue组件传值的方法有哪些• vue中key的重要作用是什么• vue兄弟组件传值有哪五种方法• vscode如何配置eslint+prettier来格式化Vue代码

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网