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+iview实现文件上传
Nov 17 Vue.js
vue 插槽简介及使用示例
Nov 19 Vue.js
对vue生命周期的深入理解
Dec 03 Vue.js
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
vue组件是如何解析及渲染的?
Jan 13 Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
vue3中provide && inject的使用
Jul 01 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 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侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
(PHP实现)只使用++运算实现加法,减法,乘法,除法
2013/06/27 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
Javascript注入技巧
2007/06/22 Javascript
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
js Form.elements[i]的使用实例
2011/11/13 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
Egret引擎开发指南之创建项目
2014/09/03 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
2016/05/31 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
2016/08/25 Javascript
Vue监听数据对象变化源码
2017/03/09 Javascript
单击按钮发送验证码,出现倒计时的简单实例
2017/03/17 Javascript
JavaScript实现选中文字提示新浪微博分享效果
2017/06/15 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
2017/10/27 jQuery
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
小程序scroll-view组件实现滚动的示例代码
2018/09/20 Javascript
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
python使用socket向客户端发送数据的方法
2015/04/29 Python
Ubuntu安装Jupyter Notebook教程
2017/10/18 Python
从django的中间件直接返回请求的方法
2018/05/30 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
详解Django admin高级用法
2019/11/06 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
CSS3 选择器 属性选择器介绍
2012/01/21 HTML / CSS
Html5 localStorage入门教程
2018/04/26 HTML / CSS
财务会计人员岗位职责
2013/11/30 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
三好生演讲稿
2014/09/12 职场文书
Mysql基础之常见函数
2021/04/22 MySQL
教你win10系统中APPCRASH事件问题解决方法
2022/07/15 数码科技