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


Posted in Vue.js onNovember 26, 2020

引入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.js 相关文章推荐
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
vue el-upload上传文件的示例代码
Dec 21 Vue.js
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
Vue中引入svg图标的两种方式
Jan 14 Vue.js
vue监听键盘事件的相关总结
Jan 29 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
vue实现广告栏上下滚动效果
Nov 26 #Vue.js
Vue组件生命周期运行原理解析
Nov 25 #Vue.js
vue element-ul实现展开和收起功能的实例代码
Nov 25 #Vue.js
在Vue中使用mockjs代码实例
Nov 25 #Vue.js
Vue3配置axios跨域实现过程解析
Nov 25 #Vue.js
Vue使用Element实现增删改查+打包的步骤
Nov 25 #Vue.js
vue + el-form 实现的多层循环表单验证
Nov 25 #Vue.js
You might like
Protoss兵种介绍
2020/03/14 星际争霸
如何使用PHP获取指定日期所在月的开始日期与结束日期
2013/08/01 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
Javascript中Eval函数的使用说明
2008/10/11 Javascript
jquery实现网站超链接和图片提示效果
2013/03/21 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
JavaScript自定义文本框光标
2017/03/05 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
微信小程序文字显示换行问题
2019/07/28 Javascript
python中wx将图标显示在右下角的脚本代码
2013/03/08 Python
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
Python中操作MySQL入门实例
2015/02/08 Python
python optparse模块使用实例
2015/04/09 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
linux下python中文乱码解决方案详解
2019/08/28 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
django数据模型(Model)的字段类型解析
2019/12/25 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
介绍一下EJB的体系结构
2012/08/01 面试题
申报职称专业技术个人的自我评价
2013/12/12 职场文书
分厂厂长岗位职责
2013/12/29 职场文书
2014年幼儿园学期工作总结
2014/12/05 职场文书
大学生创业事迹材料
2014/12/30 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
2016年母亲节寄语
2015/12/04 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers
正确的理解和使用Django信号(Signals)
2021/04/14 Python
Mongo服务重启异常问题的处理方法
2021/07/01 MongoDB