浅谈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 ui datepicker时间控件的用法（三）

jquery判断checkbox是否被选中的方法

bootstrap的常见面试题（总结）

jquery里面的toggle怎么用

jquery怎么移除css样式

怎么用jquery做弹出窗口

jquery怎么实现淡入淡出效果

jquery中怎么获取文本框的值

解决bootstrap只加载一次 remote 数据的问题

jquery serialize乱码怎么解决？

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




标签：

打赏

取消

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

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

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

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

相关推荐

评论

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