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中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
详解Vue 的异常处理机制
Nov 30 Vue.js
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
Vue——前端生成二维码的示例
Dec 19 Vue.js
Vue实现小购物车功能
Dec 21 Vue.js
vue实现登录功能
Dec 31 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
关于Vue Router的10条高级技巧总结
May 06 Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
Vue操作Storage本地化存储
Apr 29 Vue.js
vue router 动态路由清除方式
May 25 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
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
DedeCms模板安装/制作概述
2007/03/11 PHP
php flush类输出缓冲剖析
2008/10/19 PHP
PHP SEO优化之URL优化方法
2011/04/21 PHP
PHP模板解析类实例
2015/07/09 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
Javascript中设置默认参数值示例
2014/09/11 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
jQuery元素选择器用法实例
2014/12/23 Javascript
对JavaScript中this指针的新理解分享
2015/01/31 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
JS数字千分位格式化实现方法总结
2016/12/16 Javascript
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
浅谈ECMAScript6新特性之let、const
2017/08/02 Javascript
jQuery 改变P标签文本值方法
2018/02/24 jQuery
vue2.0 循环遍历加载不同图片的方法
2018/03/06 Javascript
angular 内存溢出的问题解决
2018/07/12 Javascript
jQuery实现菜单的显示和隐藏功能示例
2018/07/24 jQuery
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
wxPython中listbox用法实例详解
2015/06/01 Python
在Python的Django框架中加载模版的方法
2015/07/16 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
anaconda3安装及jupyter环境配置全教程
2020/08/24 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
墨尔本照明批发商店:Mica Lighting
2017/12/28 全球购物
地球一小时倡议书
2014/04/15 职场文书
2015年妇联工作总结范文
2015/04/22 职场文书
冬季作息时间调整通知
2015/04/24 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书
python 爬取天气网卫星图片
2021/06/07 Python
Python进程间的通信之语法学习
2022/04/11 Python