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动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
详解Vue中的自定义指令
Dec 07 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
vue router 动态路由清除方式
May 25 Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 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 md5下16位和32位的实现代码
2008/04/09 PHP
如何在PHP程序中防止盗链
2008/04/09 PHP
开源SNS系统-ThinkSNS
2008/05/18 PHP
一个php导出oracle库的php代码
2009/04/20 PHP
PHP+MYSQL中文乱码问题
2015/07/01 PHP
PHP查看当前变量类型的方法
2015/07/31 PHP
PHP中addslashes()和stripslashes()实现字符串转义和还原用法实例
2016/01/07 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
Javascript学习笔记1 数据类型
2010/01/11 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
html向js方法传递参数具体实现
2013/08/08 Javascript
javascript数据类型示例分享
2015/01/19 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
2015/03/03 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
Vue 项目代理设置的优化
2018/04/17 Javascript
微信小程序修改数组长度的问题的解决
2019/12/17 Javascript
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
node.js基础知识汇总
2020/08/25 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
python 判断是否为正小数和正整数的实例
2017/07/23 Python
对python:threading.Thread类的使用方法详解
2019/01/31 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
pygame实现贪吃蛇游戏(下)
2019/10/29 Python
利用Python过滤相似文本的简单方法示例
2021/02/03 Python
表单button的outline在firefox浏览器下的问题
2012/12/24 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
金智子午JAVA面试题
2015/09/04 面试题
恐龙的灭绝教学反思
2014/02/12 职场文书
城管执法人员个人对照检查材料思想汇报
2014/09/29 职场文书
客户经理岗位职责
2015/01/31 职场文书
暑期工社会实践报告
2015/07/13 职场文书
Python机器学习实战之k-近邻算法的实现
2021/11/27 Python
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技