浅谈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的详细内容，更多文章请关注木庄网络博客！

相关阅读 >>

jquery如何判断元素是否包含某个属性

jquery怎么让checkbox不选中？

jquery中如何实现判断空串

bootstrap是js框架吗

bootstrap如何触发下拉菜单

jquery中如何声明数组长度

vue中怎么导出excel文件？

jquery怎么操作css设置高度

jquery使按钮不可用的方法是什么

vue文件如何实现跳转页面

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




标签：

打赏

取消

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

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

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

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

相关推荐

评论

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