【vue】vue-cli里引入jquery和bootstarp

版权声明：本文为博主原创文章，可以转载，但请说明文章的原始出处： https://blog.csdn.net/liyunkun888/article/details/84943419

一、首先确保项目已经使用 vue-cli 脚手架搭建完毕

如果不会搭建，请移步：从零搭建一个vue-cli项目

二、安装jquery

我们都知道 bootstarp 是依赖于 jquery 的，所有要想使用 bootstarp 我们就要先安装 jquery

在命令行打开项目根目录，输入：

npm install jquery --save-dev

安装完成以后修改 build 文件下的 webpack.base.conf.js 文件

在 module.exports 中加入下面代码：

plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "windows.jQuery": "jquery"
    })
  ]

修改 module.exports 中 resolve 下的 alias：

alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }

改为：

alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'jquery': "jquery/src/jquery"
    }

然后在 main.js 中引入 jquery

import $ from 'jquery'

到此，jquey就安装完成了！！！

三、引入 bootstarp

先从官网下载 bootstarp 生产环境包：Bootstarp中文网

然后把下载的 bootstarp 的 css、font、js 导入到项目 src/assets 目录下

注意：不导入 fonts 目录可能为报错，别问我怎么知道的！！

在 main.js 中直接引入 bootstarp：

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

OK，到此你的项目就能够使用 jquery 和 bootstarp 了，赶快去动手开发吧！