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中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
vue中如何自定义右键菜单详解
Dec 08 Vue.js
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
vue自定义组件实现双向绑定
Jan 13 Vue.js
vue组件是如何解析及渲染的?
Jan 13 Vue.js
vue使用echarts画组织结构图
Feb 06 Vue.js
Vue vee-validate插件的简单使用
Jun 22 Vue.js
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
vue实现列表拖拽排序的示例代码
Apr 08 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动态生成静态HTML网页的代码
2010/03/04 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
ThinkPHP使用Smarty第三方插件方法小结
2016/03/19 PHP
PHP实现的用户注册表单验证功能简单示例
2019/02/25 PHP
JQuery jsonp 使用示例代码
2009/08/12 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
关于JS管理作用域的问题
2013/04/10 Javascript
JS辨别访问浏览器判断是android还是ios系统
2014/08/19 Javascript
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
2015/09/06 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
JS类的定义与使用方法深入探索
2016/11/26 Javascript
JavaScript 数据类型详解
2017/03/13 Javascript
JavaScript在控件上添加倒计时功能的实现代码
2017/07/04 Javascript
详解VueJs中的V-bind指令
2018/05/03 Javascript
在Python程序中进行文件读取和写入操作的教程
2015/04/28 Python
详解Django中Request对象的相关用法
2015/07/17 Python
Python实现的下载网页源码功能示例
2017/06/13 Python
selenium+python自动化测试之鼠标和键盘事件
2019/01/23 Python
使用Python第三方库pygame写个贪吃蛇小游戏
2020/03/06 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
详解anaconda离线安装pytorchGPU版
2020/09/08 Python
python 写一个性能测试工具(一)
2020/10/24 Python
英国假睫毛购买网站:FalseEyelashes.co.uk
2018/05/23 全球购物
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
Linux不知道文件后缀名怎么判断文件类型
2014/08/21 面试题
幼儿园园长个人总结
2015/03/02 职场文书
导游词之无锡东林书院
2019/12/11 职场文书
django学习之ajax post传参的2种格式实例
2021/05/14 Python
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
Java中CyclicBarrier和CountDownLatch的用法与区别
2021/08/23 Java/Android
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技