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实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
8个非常实用的Vue自定义指令
Dec 15 Vue.js
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
vue穿梭框实现上下移动
Jan 29 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
vue+django实现下载文件的示例
Mar 24 Vue.js
Vue3 Composition API的使用简介
Mar 29 Vue.js
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 Vue.js
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
Vue OpenLayer测距功能的实现
Apr 20 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
《星际争霸重制版》兵种对比图鉴
2020/03/02 星际争霸
PHP 创建标签云函数代码
2010/05/26 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
php中static和const关键字用法分析
2016/12/07 PHP
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
jquery select操作的日期联动实现代码
2009/12/06 Javascript
js tab效果的实现代码
2009/12/26 Javascript
使用js获取QueryString的方法小结
2010/02/28 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
js动态修改表格行colspan列跨度的方法
2015/03/30 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
2016/09/19 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
2017/07/17 Javascript
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
Node.js创建HTTP文件服务器的使用示例
2018/05/11 Javascript
JavaScript实现创建自定义对象的常用方式总结
2018/07/09 Javascript
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
python读取图片并修改格式与大小的方法
2018/07/24 Python
python实现烟花小程序
2019/01/30 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
Python中输入和输出(打印)数据实例方法
2019/10/13 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
opencv 阈值分割的具体使用
2020/07/08 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
Python异常处理机制结构实例解析
2020/07/23 Python
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
SmartBuyGlasses美国官网:太阳眼镜和眼镜
2017/08/20 全球购物
机械设计及其自动化专业推荐信
2013/10/31 职场文书
销售文员岗位职责
2013/11/29 职场文书
公司聘任书模板
2014/03/29 职场文书
法定代表人证明书
2014/11/28 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
承兑汇票延期证明
2015/06/23 职场文书
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS