vue-cli3 引入 bootstrap

简介: vue-cli3 引入 bootstrap

vue-cli3 引入 bootstrap


在 package.json 引入并安装 jquery 和 boostrap、webpack

"webpack": "latest"
"jquery": "^3.4.1",
"bootstrap": "^3.4.1"


在项目目录下(和package.json 同目录下)配置 jquery


新建 vue.config.js

/*
*Vue-CLI项目的核心配置文件
*/
const webpack = require("webpack");
module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery",
                Popper: ["popper.js", "default"]
            })
        ]
    }
};


在 main.js 引入 bootstrap,即可

import "bootstrap"
import "bootstrap/dist/css/bootstrap.css"


目录
相关文章
|
5月前
|
Web App开发 缓存 前端开发
VUE-CLI可选的配置文件vue.config.js
VUE-CLI可选的配置文件vue.config.js
67 0
|
4月前
|
JavaScript 前端开发
Vue06.使用vue-cli创建一个spa项目
Vue06.使用vue-cli创建一个spa项目
26 0
|
5月前
|
存储 JavaScript 前端开发
如何使用 Vue CLI 创建 Vue3 项目?
如何使用 Vue CLI 创建 Vue3 项目?
437 0
如何使用 Vue CLI 创建 Vue3 项目?
|
5月前
vue-cli 3.0 配置
vue-cli 3.0 配置
51 0
|
12月前
|
JavaScript 前端开发 开发工具
Vue 使用vue-cli构建SPA项目(超详细)
Vue 使用vue-cli构建SPA项目(超详细)
100 0
|
JavaScript 测试技术 开发工具
Vue学习之node.js环境下利用Vue-cli脚手架搭建Vue项目
之前练习了Vue一些基础的命令标签,在学习中在遇到一些基础知识我会继续向里面进行补充。
188 0
|
JSON JavaScript 数据安全/隐私保护
Vue--Vue-CLI服务命令、项目结构、自定义配置
Vue--Vue-CLI服务命令、项目结构、自定义配置
|
JavaScript 前端开发 CDN
如何优化你的 vue-cli 项目?(下)
如何优化你的 vue-cli 项目?
275 0
|
缓存 JavaScript 数据可视化
如何优化你的 vue-cli 项目?(上)
如何优化你的 vue-cli 项目?
453 0
vue-cli引入vue-router
开启图形页面 在浏览器中创建项目 右上角 项目管理器,新建项目成功后切换为新项目 在左侧选择插件 列表中则会显示当前已经安装的插件 同时在导航栏上方会有几个按钮,可以添加新的插件,如果我们之前没有安装过router插件,则会显示该按钮,点击安装即可。
92 0
vue-cli引入vue-router