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 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
vue keep-alive的简单总结
Jan 25 Vue.js
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
vue引入Excel表格插件的方法
Apr 28 Vue.js
vue实现简单数据双向绑定
Apr 28 Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
vue-element-admin项目导入和导出的实现
May 21 Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
vue实现移动端div拖动效果
Mar 03 Vue.js
vue选项卡切换的实现案例
Apr 11 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+SqlServer实现分页显示
2006/10/09 PHP
PHP产生随机字符串函数
2006/12/06 PHP
php实现图形显示Ip地址的代码及注释
2014/01/20 PHP
php 判断网页是否是utf8编码的方法
2014/06/06 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
jquery animate 动画效果使用说明
2009/11/04 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
js取值中form.all和不加all的区别介绍
2014/01/20 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
javascript中的面向对象
2017/03/30 Javascript
微信小程序--组件(swiper)详细介绍
2017/06/13 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
vue-cli扩展多模块打包的示例代码
2018/04/09 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
node静态服务器实现静态读取文件或文件夹
2019/12/03 Javascript
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
Python编程中用close()方法关闭文件的教程
2015/05/24 Python
动感网页相册 python编写简单文件夹内图片浏览工具
2016/08/17 Python
centos 安装python3.6环境并配置虚拟环境的详细教程
2018/02/22 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例
2020/02/26 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
python中xlutils库用法浅析
2020/12/29 Python
HTML5是什么 HTML5是什么意思 HTML5简介
2012/10/26 HTML / CSS
艺术节主持词
2014/04/02 职场文书
学生喝酒检讨书500字
2014/11/02 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
消防验收申请报告
2015/05/15 职场文书
乱世佳人观后感
2015/06/08 职场文书
穷人该怎么创业?谨记以下几点
2019/07/11 职场文书
Python PIL按比例裁剪图片
2022/05/11 Python