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

PHP中文网 JavaScript

本文摘自PHP中文网，作者青灯夜游，侵删。

本篇文章给大家介绍一下在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”

1

2

3

4

5

6

"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中添加一行数据：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

//注：...代表省略自有的，

//必定事先声明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 ?Csave-dev

1.png

这样jquery就安装完成了。

bootstrap安装：

1、使用npm install bootstrap@3.3.0 ?Csave-dev

2.png

2、在需要的页面引入

1

2

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

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

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

更多编程相关知识，请访问：编程视频！！

以上就是浅谈Vue项目中使用npm安装bootstrap和jquery的详细内容，更多文章请关注木庄网络博客！

相关阅读 >>

怎么引用bootstrap轮播图

为什么前端不用bootstrap

jquery怎么选择以什么结尾的元素

jquery如何按name属性选择元素

jquery中post回调函数不执行怎么办

bootstrap 不支持ie怎么办

jquery如何获取鼠标位置

vue和react是什么框架？

bootstrap table分页问题汇总【附答案&代码】

bootstrap面板怎么用

更多相关阅读请进入《vue》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...