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之邮箱、密码、手机号码等输入验证规则说明

    vue之邮箱、密码、手机号码等输入验证规则说明

    这篇文章主要介绍了vue之邮箱、密码、手机号码等输入验证规则说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 解决vuex数据异步造成初始化的时候没值报错问题

    解决vuex数据异步造成初始化的时候没值报错问题

    今天小编大家分享一篇解决vuex数据异步造成初始化的时候没值报错问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue中内置指令与自定义指令语法详解

    Vue中内置指令与自定义指令语法详解

    这篇文章主要为大家介绍了Vue中内置指令与自定义指令语法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • 一文秒懂Vue3的v-model

    一文秒懂Vue3的v-model

    v-model 是 Vue 内置的指令作为属性接收一个变量(不能是常量)绑定到普通组件和自定义组件中,本文给大家介绍Vue3的v-model示例代码,感兴趣的朋友跟随小编一起看看吧
    2023-02-02
  • vue实现3D切换滚动效果

    vue实现3D切换滚动效果

    这篇文章主要为大家详细介绍了vue实现伪3D切换滚动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 如何使用vue-json-viewer插件展示JSON格式数据

    如何使用vue-json-viewer插件展示JSON格式数据

    这篇文章主要给大家介绍了关于如何使用vue-json-viewer插件展示JSON格式数据的相关资料,Vue-json-viewer是一个Vue组件,用于在Vue应用中显示JSON数据的可视化工具,需要的朋友可以参考下
    2023-11-11
  • 关于vue-property-decorator的基础使用实践

    关于vue-property-decorator的基础使用实践

    这篇文章主要介绍了关于vue-property-decorator的基础使用实践,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 基于Vue中点击组件外关闭组件的实现方法

    基于Vue中点击组件外关闭组件的实现方法

    下面小编就为大家分享一篇基于Vue中点击组件外关闭组件的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue3实现多层级列表的项目实践

    vue3实现多层级列表的项目实践

    本文主要介绍了vue3实现多层级列表的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • Vue中对watch的理解(关键是immediate和deep属性)

    Vue中对watch的理解(关键是immediate和deep属性)

    watch侦听器,是Vue实例的一个属性,是用来响应数据的变化,需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的,这篇文章主要介绍了Vue中对watch的理解,需要的朋友可以参考下
    2022-11-11

最新评论