vue cli4 中引入bootstrap3

vue-cli4引入jquery和bootstrap 引入jquery

1、下载jquery npm install jquery --save-dev

2、vue.config.js中webpack配置configureWebpack添加jquery插件 在项目根目录下创建文件vue.config.js，与package.json同级。

复制代码 const webpack = require(“webpack”); module.exports = { configureWebpack: { //支持jquery plugins: [ new webpack.ProvidePlugin({ $:“jquery”, jQuery:“jquery”, “windows.jQuery”:“jquery” }) ] }, }; 复制代码

3、package.json中eslint配置项env中添加"jquery":true 复制代码 “eslintConfig”: { “root”: true, “env”: { “node”: true, “jquery”: true //此处配置意思为全局引入jquery，详情可查看文档 }, “extends”: [ “plugin:vue/essential”, “eslint:recommended” ], “rules”: { }, “parserOptions”: { “parser”: “babel-eslint” } }, 复制代码

4、验证是否安装成功 $(function () {alert (123);});

引入Bootstrap 1、安装bootstrap前，必须先安装jQuery

2、安装bootstrap，使用命令

npm install bootstrap --save-dev

可以指定版本，不指定的话会安装最新的版本。

npm install bootstrap@3 --save-dev

3、安装成功后，能够在package.json文件夹中看到bootstrap这个模块。这时候需要在main.js中添加如下内容：

import ‘bootstrap/dist/css/bootstrap.min.css’; import ‘bootstrap/dist/js/bootstrap.min.js’;