一、安装jquery和bootstrap框架

1.项目目录安装
npm install jquery —save-dev

2 找到build文件夹下的webpack.base.conf.js文件打开，修改配置：

  1. // 加入webpack对象
  2. var webpack=require('webpack');

vue-cli脚手架中引入jquery和bootstrap框架 - 图1
3.在exports里面加入

  1. // 引入jquery
  2.   plugins: [
  3.     new webpack.ProvidePlugin({
  4.     $:'jquery',
  5.     jQuery:'jquery',
  6.     'windows.jQuery':'jquery'
  7.     })
  8.   ],

vue-cli脚手架中引入jquery和bootstrap框架 - 图2
4. 在入口文件main.js中加入
import $ from ‘jquery’

添加jQuery—在HelloWorld.vue文件里的script标签中加入以下代码

  1. $(function () {
  2.   alert(123);
  3. });


vue-cli脚手架中引入jquery和bootstrap框架 - 图3

网页查看会弹出
vue-cli脚手架中引入jquery和bootstrap框架 - 图4
效果实现,引入成功

引入bootstrap：
1.安装bootstrap，使用命令：
npm install bootstrap —save-dev

2 安装popper.js命令
npm i popper

  1. 这时候需要在main.js中添加如下内容：
    import ‘bootstrap/dist/css/bootstrap.min.css’
    import ‘bootstrap/dist/js/bootstrap.min’

    4. 在components文件夹中HelloWorld.vue文件中添加一个bootstrap样式
    1.   <a href="#" class="btn btn-primary">bootstrap样式</a>

vue-cli脚手架中引入jquery和bootstrap框架 - 图5
我加的是一个a标签，然后去浏览器输入地址http://localhost:8080刷新网页

vue-cli脚手架中引入jquery和bootstrap框架 - 图6
效果实现,引入成功