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 相关文章推荐
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
Vue仿Bibibili首页的问题
Jan 21 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
vue+springboot实现登录验证码
May 27 Vue.js
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 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 采集书并合成txt格式的实现代码
2009/03/01 PHP
php微信公众号开发模式详解
2016/11/28 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
JavaScript 乱码问题
2009/08/06 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
2012/03/14 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
js只执行1次的函数示例
2016/07/20 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
Bootstrap Table使用整理(一)
2017/06/09 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
python3之微信文章爬虫实例讲解
2017/07/12 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
利用pandas将numpy数组导出生成excel的实例
2018/06/14 Python
python实现远程控制电脑
2019/05/23 Python
docker django无法访问redis容器的解决方法
2019/08/21 Python
python中property属性的介绍及其应用详解
2019/08/29 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
Django models文件模型变更错误解决
2020/05/11 Python
Python变量格式化输出实现原理解析
2020/08/06 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
德国黑胶唱片、街头服装及运动鞋网上商店:HHV
2018/08/24 全球购物
NYX Professional Makeup俄罗斯官网:世界知名的化妆品品牌
2019/12/26 全球购物
Swanson中国官网:美国斯旺森健康产品公司
2021/03/01 全球购物
学生出入校管理制度
2014/01/16 职场文书
市场营销管理制度
2014/01/29 职场文书
《长城》教学反思
2014/02/14 职场文书
网球场地租赁协议范本
2014/10/07 职场文书
高中班主任评语
2014/12/30 职场文书
html原生table实现合并单元格以及合并表头的示例代码
2023/05/07 HTML / CSS