vue-cli引入jquery、bootstrape

来源：互联网发布：淘宝退款不退货会怎样编辑：程序博客网时间：2024/05/17 18:19

jquery和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后面的版本号，一般安装的是最新的版本 3.2.1 ，超过了bootstrap的最高要求。。

所以我们需要手动将jquery的版本修改为1.11.3或者其他符合bootstrap要求的版本，然后再npm install安装。

最后npm run dev去尽情的使用bootstrap吧~

阅读全文

0 0