Vue项目如何引入bootstrap、elementUI、echarts

 更新时间:2020年11月26日 09:51:59   作者:-零  
这篇文章主要介绍了Vue项目如何引入bootstrap、elementUI、echarts,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

引入bootstrap

安装依赖包

cnpm install bootstrap --save-dev
cnpm install jquery --save-dev
cnpm install popper.js --save-dev

全局引入

在项目中根目录下的main.js中添加如下代码:

import 'bootstrap'
import $ from 'jquery'

在vue文件中引用

<script>
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
</script>

引入elementUI

安装 elementUI

打开终端,输入以下内容

npm i element-ui -S

全局引入

在项目中根目录下的main.js中添加如下代码:

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)

引入echarts

安装echarts

npm install echarts -S

2.全局引入main.js

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 安装VUE-CLI一直失败的排错过程及解决方案

    安装VUE-CLI一直失败的排错过程及解决方案

    这篇文章主要介绍了安装VUE-CLI一直失败的排错过程及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue 动态生成拓扑图的示例

    vue 动态生成拓扑图的示例

    这篇文章主要介绍了vue 动态生成拓扑图的示例,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2021-01-01
  • uniapp vue3中使用webview在微信小程序实现双向通讯功能

    uniapp vue3中使用webview在微信小程序实现双向通讯功能

    微信小程序的存在许多功能上的限制和约束,有些情况不得不去使用webview进行开发实现需求,这篇文章主要给大家介绍了关于uniapp vue3中使用webview在微信小程序实现双向通讯功能的相关资料,需要的朋友可以参考下
    2024-07-07
  • vue实现记事本小功能

    vue实现记事本小功能

    这篇文章主要为大家详细介绍了vue实现记事本小功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • vue数据更新但视图(DOM)不刷新的几种解决办法

    vue数据更新但视图(DOM)不刷新的几种解决办法

    这篇文章主要给大家介绍了关于vue数据更新但视图(DOM)不刷新的几种解决办法,我们在开发过程中经常会碰到数据更新,但是视图并未改变的情况,需要的朋友可以参考下
    2023-08-08
  • Vue.js 图标选择组件实践详解

    Vue.js 图标选择组件实践详解

    这篇文章主要介绍了Vue.js 图标选择组件实践详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • vue 实现微信浮标效果

    vue 实现微信浮标效果

    微信的浮窗,大伙应该都用过,当我们正在阅读一篇公众号文章时,突然需要处理微信消息,点击浮窗,在微信上会有个浮标,点击浮标可以再次回到文章。今天小编抽空给大家介绍vue 实现微信浮标效果,感兴趣的朋友一起看看吧
    2019-09-09
  • vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码

    vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码

    这篇文章主要介绍了vue 自定指令生成uuid滚动监听达到tab表格吸顶效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-09
  • iView-admin 动态路由问题的解决方法

    iView-admin 动态路由问题的解决方法

    这篇文章主要介绍了iView-admin 动态路由问题的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-10-10
  • vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作

    vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作

    这篇文章主要介绍了vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07

最新评论