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——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
如何管理Vue中的缓存页面
Feb 06 Vue.js
vue3中的组件间通信
Mar 31 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
详解vue身份认证管理和租户管理
May 25 Vue.js
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
vue实现在data里引入相对路径
Jun 05 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文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
ExtJS Store的数据访问与更新问题
2010/04/28 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
2010/07/17 Javascript
轻松创建nodejs服务器(6):作出响应
2014/12/18 NodeJs
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
自定义Vue中的v-module双向绑定的实现
2019/04/17 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
2019/07/25 Javascript
vue视频播放暂停代码
2019/11/08 Javascript
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
python实现解数独程序代码
2017/04/12 Python
Python实现字符串逆序输出功能示例
2017/06/24 Python
《Python学习手册》学习总结
2018/01/17 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
Python操作MySQL数据库的方法
2018/06/20 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
python中二分查找法的实现方法
2020/12/06 Python
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
HTML5 manifest离线缓存的示例代码
2018/08/08 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
绿色环保标语
2014/06/12 职场文书
在宿舍喝酒的检讨书
2014/09/28 职场文书
上市公司财务总监岗位职责
2015/04/03 职场文书
工作表现证明
2015/06/15 职场文书
浪漫婚礼主持词开场白
2015/11/24 职场文书
2016年法制宣传月活动总结
2016/04/01 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书
nginx安装以及配置的详细过程记录
2021/09/15 Servers
Python 如何利用ffmpeg 处理视频素材
2021/11/27 Python
Python实现制作销售数据可视化看板详解
2021/11/27 Python
详解TypeScript的基础类型
2022/02/18 Javascript