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使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
详解Vue中的自定义指令
Dec 07 Vue.js
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
Vue详细的入门笔记
May 10 Vue.js
vue中div禁止点击事件的实现
Apr 02 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 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
php数组函数序列之array_unique() - 去除数组中重复的元素值
2011/10/29 PHP
php多层数组与对象的转换实例代码
2013/08/05 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
一起来写段JS drag拖动代码
2010/12/09 Javascript
JavaScript中URL编码函数代码
2011/01/11 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
2013/10/11 Javascript
javascript中数组的冒泡排序使用示例
2013/12/18 Javascript
javascript学习笔记--数字格式类型
2014/05/22 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
js中作用域的实例解析
2017/03/16 Javascript
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
Node.js console控制台简单用法分析
2019/01/04 Javascript
Vue指令指令大全
2019/02/09 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
2019/07/25 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
2019/12/25 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
编程语言Python的发展史
2014/09/26 Python
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
Python遍历numpy数组的实例
2018/04/04 Python
python 切换root 执行命令的方法
2019/01/19 Python
python 遍历pd.Series的index和value
2019/11/26 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
Python HTMLTestRunner如何下载生成报告
2020/09/04 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
python实现代码审查自动回复消息
2021/02/01 Python
意大利消费电子产品购物网站:SLG Store
2019/12/26 全球购物
征婚广告词
2014/03/17 职场文书
学雷锋先进个人事迹
2014/05/26 职场文书
毕业证丢失证明范本
2014/09/20 职场文书
大学生团日活动总结
2015/05/06 职场文书
劳保用品管理制度范本
2015/08/06 职场文书
放飞理想主题班会
2015/08/14 职场文书
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android