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"


目录
相关文章
|
资源调度 JavaScript 前端开发
Vue安装并使用Vue-CLI构建SPA项目并实现路由
Vue安装并使用Vue-CLI构建SPA项目并实现路由
73 0
|
2月前
|
JavaScript 数据可视化
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
这篇文章介绍了如何使用vue-cli 2和3版本来创建Vue项目,并详细说明了两者之间的主要区别。
116 5
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
|
2月前
|
JavaScript 数据可视化
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
这篇文章详细介绍了Vue CLI 3版本创建项目时的Runtime-Compiler和Runtime-only两种模式的区别、Vue程序的运行过程、render函数的使用、eslint的关闭方法,以及Vue CLI 2和3版本配置文件的不同和脚手架3版本创建项目的配置文件配置方法。
110 3
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
|
6月前
|
JavaScript 前端开发
Vue06.使用vue-cli创建一个spa项目
Vue06.使用vue-cli创建一个spa项目
38 0
|
7月前
|
存储 JavaScript 前端开发
如何使用 Vue CLI 创建 Vue3 项目?
如何使用 Vue CLI 创建 Vue3 项目?
540 0
如何使用 Vue CLI 创建 Vue3 项目?
|
7月前
vue-cli 3.0 配置
vue-cli 3.0 配置
58 0
|
JavaScript 前端开发 开发工具
Vue 使用vue-cli构建SPA项目(超详细)
Vue 使用vue-cli构建SPA项目(超详细)
118 0
|
JavaScript 测试技术 开发工具
Vue学习之node.js环境下利用Vue-cli脚手架搭建Vue项目
之前练习了Vue一些基础的命令标签,在学习中在遇到一些基础知识我会继续向里面进行补充。
203 0
vue-cli引入vue-router
开启图形页面 在浏览器中创建项目 右上角 项目管理器,新建项目成功后切换为新项目 在左侧选择插件 列表中则会显示当前已经安装的插件 同时在导航栏上方会有几个按钮,可以添加新的插件,如果我们之前没有安装过router插件,则会显示该按钮,点击安装即可。
102 0
vue-cli引入vue-router
下一篇
DataWorks