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绑定class的三种方法
Dec 24 Vue.js
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
Vue中引入svg图标的两种方式
Jan 14 Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
基于vue的video播放器的实现示例
Feb 19 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
详解vue中v-for的key唯一性
May 15 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 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 Smarty初体验二 获取配置信息
2011/08/08 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
在Z-Blog中运行代码[html][/html](纯JS版)
2007/03/25 Javascript
学习ExtJS Column布局
2009/10/08 Javascript
基于javascript 闭包基础分享
2013/07/10 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
2013/10/28 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
2016/09/04 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
H5手机端多文件上传预览插件
2017/04/21 Javascript
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
nodejs通过钉钉群机器人推送消息的实现代码
2019/05/05 NodeJs
Vue函数式组件-你值得拥有
2019/05/09 Javascript
Python代理抓取并验证使用多线程实现
2013/05/03 Python
Python中AND、OR的一个使用小技巧
2015/02/18 Python
python Django批量导入数据
2016/03/25 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
Python接口测试get请求过程详解
2020/02/28 Python
HTML5 移动页面自适应手机屏幕四类方法总结
2017/08/17 HTML / CSS
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
安全生产责任书范本
2014/04/15 职场文书
地理科学专业自荐信
2014/09/01 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
2014年药剂科工作总结
2014/11/26 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
高三英语教学反思
2016/03/03 职场文书
centos7安装mysql5.7经验记录
2022/05/02 Servers
NoSQL优缺点与MongoDB数据库简介
2022/06/05 MongoDB
spring boot实现文件上传
2022/08/14 Java/Android