Vue项目同时使用element-UI和Bootstrap

不关猫猫的事哦

已于 2023-05-28 10:50:52 修改

阅读量2.2k

点赞数 1

文章标签： vue.js bootstrap elementui

于 2023-05-28 10:46:14 首次发布

本文链接：https://blog.csdn.net/qq_53322872/article/details/130909837

版权

在Vue项目中，如果想使用多种UI框架，全部都全局引入的话，可能会造成样式冲突。因此，这里以全局引入elementUI的vue项目为例，介绍如何在项目中局部引入Bootstrap。

官网推荐使用npm的方式引入，在终端输入如下代码：

npm i element-ui -S

如果使用npm无法下载（或网速慢）的话，可以使用国内的cnpm（淘宝）进行下载安装：

cnpm i element-ui --save

安装好element-UI后，需要在项目的main.js文件里引入并注册成为全局组件。代码如下：

// main.js
// 导入element-ui(全局引入)
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

然后就可以随心使用了（开心）

为了与element-UI区分，笔者选择本地导入的方式在项目中使用bootstrap。首先，进入官网下载源文件。

下载好后解压，获得CSS和JS两个文件夹。将其复制到项目文件夹中（如图，笔者将其复制到了src/assets文件夹内）

下载到项目中后，在main.js引入bootstrap。CSS对应的是bootstrap.min.css，JS对应的是bootstrap.bundle。不过，因为是局部引入，因此不需要进行全局注册：

// 引入bootstrap
import bootstrapjs from './assets/js/bootstrap.bundle'
import bootstrapcss from './assets/css/bootstrap.min.css'

然后就可以在项目内愉快使用element-UI和bootstrap了（好耶！）

最终效果图：

关注