vue中引入jQuery和bootstrap

一、引入jQuery：

首先在当前项目的根目录下（就是与package.json同目录）

运行命令npm install jquery --save-dev   这样就将jquery安装到了这个项目中

运行命令npm install bootstrap --save-dev   这样就将bootstrap安装到了这个项目中

然后修改webpack.base.conf.js两个地方：

其一：加入var webpack = require("webpack")；

其二：在module.exports的里面加入

plugins: [    new webpack.optimize.CommonsChunkPlugin('common.js'),    new webpack.ProvidePlugin({         jQuery: "jquery",         $: "jquery"    })]

加到最后就好。

最后在main.js中加入import $ from 'jquery' 完成jQuery的引入。

二、引入 bootstrap.css和bootstrap.js文件：

修改webpack.base.conf.js

resolve: {　　extensions: ['.js', '.vue', '.json'],　　alias: {　　'vue$': 'vue/dist/vue.esm.js',　　'@': resolve('src'),　　'bootstrap':resolve('src/assets/bootstrap'),   //如果是自己手动导入的话需要加这一句，如果是 npm install bootstrap --save的话不需要写这个　　}},

在main.js中import引入

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

三、测试代码

1. <template>

2. <nav class="navbar navbar-default" role="navigation">

3. <div class="container-fluid">

4. <!-- Brand and toggle get grouped for better mobile display -->

5. <div class="navbar-header">

6. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

7. <span class="sr-only">Toggle navigation</span>

8. <span class="icon-bar"></span>

9. <span class="icon-bar"></span>

10. <span class="icon-bar"></span>

11. </button>

12. <a class="navbar-brand" href="#">{{ msg }}</a>

13. </div>

14.  

15. <!-- Collect the nav links, forms, and other content for toggling -->

16. <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

17. <ul class="nav navbar-nav">

18. <li class="active"><a href="#">Link</a></li>

19. <li><a href="#">Link</a></li>

20. <li class="dropdown">

21. <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>

22. <ul class="dropdown-menu" role="menu">

23. <li><a href="#">Action</a></li>

24. <li><a href="#">Another action</a></li>

25. <li><a href="#">Something else here</a></li>

26. <li class="divider"></li>

27. <li><a href="#">Separated link</a></li>

28. <li class="divider"></li>

29. <li><a href="#">One more separated link</a></li>

30. </ul>

31. </li>

32. </ul>

33. <form class="navbar-form navbar-left" role="search">

34. <div class="form-group">

35. <input type="text" class="form-control" placeholder="Search">

36. </div>

37. <button type="submit" class="btn btn-default">Submit</button>

38. </form>

39. <ul class="nav navbar-nav navbar-right">

40. <li><a href="#">Link</a></li>

41. <li class="dropdown">

42. <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>

43. <ul class="dropdown-menu" role="menu">

44. <li><a href="#">Action</a></li>

45. <li><a href="#">Another action</a></li>

46. <li><a href="#">Something else here</a></li>

47. <li class="divider"></li>

48. <li><a href="#">Separated link</a></li>

49. </ul>

50. </li>

51. </ul>

52. </div><!-- /.navbar-collapse -->

53. </div><!-- /.container-fluid -->

54. </nav>

55. </template>