vue-cli引入jquery、bootstrape
2017-12-02 21:16
495 查看
jquery和bootstrap真的是神器哈哈~
2.打开build/webpack.base.conf.js,加入以下代码
3.打开
现在你就可以在项目中使用jQuery了。
1.先在bootstrap官网下载bootstrap的js文件和css文件。分别放在src/assets/bootstrap/js文件和src/assets/bootstrap/css文件中。
2.打开build/webpack.base.conf.js加入以下代码
3.打开main.js加入下面代码
这时如果你重新npm run dev没有报错,就说明你引入成功了。
这应该是我们npm安装的jquery版本太高了。
打开package.json文件,查看jquery后面的版本号,一般安装
4000
的是最新的版本 3.2.1 ,超过了bootstrap的最高要求。。
所以我们需要手动将jquery的版本修改为1.11.3或者其他符合bootstrap要求的版本,然后再npm install安装。
最后npm run dev去尽情的使用bootstrap吧~
引入jquery
1.在vue-cli目录下运行npm install jquery –save-dev,如果安装了cnpm淘宝镜像建议使用cnpm。2.打开build/webpack.base.conf.js,加入以下代码
var webpack = require('webpack'); plugins:[ new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.ProvidePlugin({ jQuery: "jquery", $: "jquery" }) ]
3.打开
main.js加入以下代码
import $ from 'jquery'
现在你就可以在项目中使用jQuery了。
引入bootstrap
引入bootstrap还是费了一些周折。首先引入上面的jquery。然后执行以下步骤。1.先在bootstrap官网下载bootstrap的js文件和css文件。分别放在src/assets/bootstrap/js文件和src/assets/bootstrap/css文件中。
2.打开build/webpack.base.conf.js加入以下代码
resolve:{ alias:{ 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'bootstrap':resolve('src/assets/bootstrap'), } }
3.打开main.js加入下面代码
import 'bootstrap/js/bootstrap.min.js' import 'bootstrap/css/bootstrap.min.css'
这时如果你重新npm run dev没有报错,就说明你引入成功了。
但是
但是我做到这一步时会报错,说jquery版本错误。Bootstrap's javascript requires jquery version 1.9.1 or higher, but lower than version 3.
这应该是我们npm安装的jquery版本太高了。
打开package.json文件,查看jquery后面的版本号,一般安装
4000
的是最新的版本 3.2.1 ,超过了bootstrap的最高要求。。
所以我们需要手动将jquery的版本修改为1.11.3或者其他符合bootstrap要求的版本,然后再npm install安装。
最后npm run dev去尽情的使用bootstrap吧~
相关文章推荐
- vue-cli 项目中引入jquery、sass、md5、ElementUI、vue-cookie
- vue-cli中如何引入jquery
- 如何在vue-cli+webpack构建的项目引入jquery和bootstrap
- vue-cli中引入jquery方法
- vue-cli搭建的项目中引入jquery和bootstrap
- 如何在vue-cli webpack中全局引入jquery
- vue-cli快速构建项目>>>>及引入jquery、jquery插件、this的指向 mounted钩子函数应用
- vue-cli全引入jquery
- vue-cli+webpack引入jQuery
- vue-cli 工程中引入jquery
- 饿了么项目---1、vue-cli快速构建项目(包括兼容老项目时需引入bootstrap、jquery的方法)
- vue-cli webpack 引入jquery
- 学习vue-cli时需要引入外部js库文件(如jquery)的问题,百度后解决了,再次备忘一下
- vue-cli 引入jQuery,Bootstrap,popper的方法
- vue-cli项目中,全局引入jquery
- vue-cli webpack 引入jquery
- vue-cli webpack全局引入jquery
- vue-cli怎么引入jquery
- vue-cli webpack 引入jquery
- vue脚手架vue-cli 中 引入 jquery 把某个按钮 加上点击事件 事件 第一次 成功 第二次就失效了