vue项目如何引入element ui、iview和echarts

目录
  • vue引入element ui、iview和echarts
    • 1.vue项目引入elementui
    • 2.vue项目中引入iview
    • 3.vue项目中引入echarts
    • 4.main.js文件代码截图
    • 5.echarts在引入后
    • 6.引入之后就可以使用他们的组件了
  • iview与elementui对比
    • 表格
    • 风格
    • 按需引入
    • 表单验证
    • 下拉选择器

vue引入element ui、iview和echarts

记性不好，每次引入都要重新搜一遍，今天把几个自己整理一下。全部引入，没搞按需引入。

1.vue项目引入elementui

控制台输入npm install element-ui -s

main.js文件中输入

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

2.vue项目中引入iview

控制台输入npm install iview -s

import iView from 'iview' // 引入ivew库
import 'iview/dist/styles/iview.css' // 使用CSS

Vue.use(iView)

3.vue项目中引入echarts

控制台输入npm install echarts -s

import * as echarts from 'echarts' // 导入echarts

Vue.prototype.$echarts = echarts // 并设置对应的属性

4.main.js文件代码截图

5.echarts在引入后

需要使用echarts的页面，还需要import一下

<script>
import * as echarts from 'echarts'
</script>

6.引入之后就可以使用他们的组件了

iview与elementui对比

表格

合并单元格

elementui中的table表格组件包含行列的合并单元格；iview的table表格组件只提供了表头的合并单元格；如果表格涉及合并单元格建议使用elementui。（iview 4.0.0 之后设置属性 span-method 可以指定合并行或列的算法。）

左表头固定，可以左右滑动时

 

iview给表格绑定高后，数据少会有空白；但是绑定max-height后，左右滑动的左边这一块，会被遮盖导致划不动

elemeui可以完美的解决数据多和少的时候的左右滑动，表格多的时候建议使用elementui

风格

ivew的整体风格比较清新，适合后台管理系统

按需引入

两者都可以按需引入

表单验证

ivew的表单验证样式；

elementui带验证表单

iview带验证表单

下拉选择器

iview的下拉选择器select的option是渲染在组件内部，和elementui的渲染在body不一样。如果页面有几百个selcet，会造成严重的卡顿，这种时候建议选择elementui。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue中使用Echarts可视化图表宽度自适应的完美解决方案

    Vue中使用Echarts可视化图表宽度自适应的完美解决方案

    目录 一.问题阐述: 二.解决思路: 三.最终效果: 一.问题阐述: 开发H5项目中应用到Echarts数据可视化,由于H5主要使用在手机,屏幕宽度大大限制了图表的展现,问题如下. 上图中x轴的数据是动态的,从2022年切换到2021年数据变化,此时如果x轴的数据过多就会显得格外拥挤. 二.解决思路: 我的解决方案是,在放置Echarts的容器(div)外层再套一层容器(div),外层容器宽度固定设置手机屏幕宽,并设置溢出显示滚动条(width: 100%;overflow: auto),内层E

  • Vue通过echarts实现数据图表化显示

    Vue通过echarts实现数据图表化显示

    目录 一.项目引入echarts 二.创建容器 三.配置图表 一.项目引入echarts ecahrts官网 官网有许多图表案例,并且可以直接复制对应的配置代码. vue项目中引入: 安装 npm install echarts --save 引入echarts 全部一次性引入: import * as echarts from 'echarts'; 按需引入: // 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口. import * as echarts fr

  • Vue echarts模拟后端数据流程详解

    Vue echarts模拟后端数据流程详解

    目录 KOA2的使用 安装 Koa app.js入口文件 KOA2的使用 KOA2是由Express 原班人马打造. 环境依赖 Node v7.6.0 及以上. 支持 async 和 await 洋葱模型的中间件 写响应函数(中间件) 响应函数是通过use的方式才能产生效果, 这个函数有两个参数, ctx :上下文, 指的是请求所处于的Web容器,我们可以通过 ctx.request 拿到请求对象, 也可 以通过 ctx.response 拿到响应对象 next :内层中间件执行的入口 模拟服务

  • vue项目中vue-echarts讲解及常用图表实现方案(推荐)

    vue项目中vue-echarts讲解及常用图表实现方案(推荐)

    目录 1.图表主题颜色的修改 2.XY轴体颜色和文本颜色修改 3.横向柱状图的显示 4.过滤xy轴文本内容 5.Y轴文本显示在轴线内 6.在柱状条头部添加标签内容 7.自定义图例修改 8.环比图中间显示内容 图表类的项目操作一般常见于管理平台系统,移动端项目中并不是特别常见,不常见不代表没有,在一些商城类应用中,商家需要看到商品的销量分析,盈利分析等,就需要用到图标,比较常用的图标库,像百度的ECHARTS,蚂蚁金服的AntV都是不错的图标库,感兴趣的读者可以直接到他们的官网阅读相关的资料,笔者

  • Vue echarts画甘特图流程详细讲解

    Vue echarts画甘特图流程详细讲解

    vue项目中添加echarts,只需要增加echarts依赖,然后在main.js中引入echarts就可以使用了. 1.npm install echarts --save 2.修改main.js import * as echarts from 'echarts' Vue.prototype.$echarts = echarts 3.具体页面使用: <template> <div class="about"> <h1>This is echart

  • vue中的echarts实现宽度自适应的解决方案

    vue中的echarts实现宽度自适应的解决方案

    今天项目中需要使用到 echarts 为了自适应.找到了.以下解决方案. 效果图 代码 <template> <!-- 这是图表开始 --> <div class="chart"> <div ref="main1" style="width: 600px;height:400px;" ></div> <div ref="main2" style="wi

  • 在vue中使用echarts的方法以及可能遇到的问题

    在vue中使用echarts的方法以及可能遇到的问题

    目录 1.安装 2.在vue中引入(全局引入) 3.在vue中的使用 4.模板代码放在哪个位置 5.完整的一个vue页面实例: 6.实现效果 7.可能遇到的问题,下载不成功.使用 8.11:25-32 "export ‘default’ (imported as ‘echarts’) was not found in 'echarts 总结 1.安装 npm install echarts --save 2.在vue中引入(全局引入) // 引入echarts import echarts fr

  • vue中设置echarts宽度自适应的代码步骤

    vue中设置echarts宽度自适应的代码步骤

    目录 问题描述 无自适应效果图 有自适应效果图 代码步骤 问题描述 我们使用vue做项目的时候,常常需要做到echarts图表的自适应,一般是根据页面的宽度做对应的适应.本文记录一下设置echarts图表的自适应的步骤.我们先看一下没有做echarts自适应的效果 无自适应效果图 我们发现echarts图的宽度并没有随着页面宽度的变化而变化 有自适应效果图 很显然,这个才是我们想要的效果 代码步骤 echart图表本身提供了一个resize的函数,我们只需要监听页面的resize变化以后,去执行

  • vue项目如何引入element ui、iview和echarts

    vue项目如何引入element ui、iview和echarts

    目录 vue引入element ui.iview和echarts 1.vue项目引入elementui 2.vue项目中引入iview 3.vue项目中引入echarts 4.main.js文件代码截图 5.echarts在引入后 6.引入之后就可以使用他们的组件了 iview与elementui对比 表格 风格 按需引入 表单验证 下拉选择器 vue引入element ui.iview和echarts 记性不好,每次引入都要重新搜一遍,今天把几个自己整理一下.全部引入,没搞按需引入. 1.vu

  • Vue项目如何引入bootstrap、elementUI、echarts

    引入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.

  • 详解从新建vue项目到引入组件Element的方法

    详解从新建vue项目到引入组件Element的方法

    本文介绍了从新建vue项目到引入组件Element以及Error when rendering component报错解决,分享给大家 一.新建项目 1.打开cmd,运行:vue init webpack Vue-Demo 2.运行:cd Vue-Demo进入这一级 3.运行:npm install 4.运行:npm run dev 如果浏览器打开之后,没有加载出页面,说明本地的8080 端口被占用,需要修改一下配置文件 config/index.js 解释:1.将 build 的路径前缀修改为

  • 在vue项目中引入高德地图及其UI组件的方法

    引入高德地图: 打开index.html,引用高德地图的JavaScript API: <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你的API key"></script> 在"key="这里添加你申请的key,key不需要加引号. 引入高德地图UI组件,只需要在上面代码后面再加一串代码: <script

  • 创建Vue项目以及引入Iview的方法示例

    创建Vue项目 以及引入Iview 官方文档 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖,走你 $ cd my-project $ npm install $ npm run dev 以上是vue官方文档中Vue.js 提供一个 官方命令行工具 创建vue项目的方法. 我创建Vue项目过程 $ vue init webpack

  • 在 Vue 项目中引入 tinymce 富文本编辑器的完整代码

    项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量.简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项目,功能强大,基于 jQuery,但已经没有再维护,而且限定了后端代码,修改起来比较费劲 bootstrap-wysiwyg:微型,易用,小而美,只是 Bootstrap + jQuery... kindEditor:功能强大,代码简洁,需要配置后台,而且好久没见更新了 wangEditor:轻量.

  • Vue项目中引入ESLint校验代码避免代码错误

    Vue项目中引入ESLint校验代码避免代码错误

    目录 1 ESLint 是什么 2 在 Vue 项目中引入 ESLint 2.1 引入 ESLint 2.2 ESLint 配置 2.3 执行 ESLint 代码检查 2.4 自动修复 ESLint 问题 3 配置 husky 和 PR 门禁 3.1 配置 husky 门禁 3.2 配置 PR 门禁 4 常见的 ESLint 问题及修复案例 4.1 案例1: 4.2 案例2: 4.3 案例3: 4.4 案例4: 5 感谢 1 ESLint 是什么 ESLint 是一个插件式的 JavaScrip

  • vue按需引入element Transfer 穿梭框

    Transfer 穿梭框 按需引入Transfer 编辑main.js import { ... Transfer } from 'element-ui'; const components = [ ... Transfer ]; components.map(component => { Vue.component(component.name, component); }); 安装transform-vue-jsx 插件 编辑 .babelrc文件 { "presets":

  • 在vue项目中引入highcharts图表的方法(详解)

    npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个chart.vue组件 <template> <div class="x-bar"> <div :id="id" :option="option"></div> </div> </templa

  • vue项目中引入noVNC远程桌面的方法

    1 .首先,先简单介绍一下概念. VNCServer 是一个为了满足分布式用户共享服务器资源,而在服务器开启的一项服务,对应的客户端软件有图形化客户端 VNCViewer,而 noVNC 则是 HTML5 VNC 客户端,它采用 HTML 5 WebSocket, Canvas 和 JavaScript 实现. noVNC 被普遍用在各大云计算.虚拟机控制面板中.noVNC 采用 WebSockets 实现,但是当前大多 VNC 服务器不支持 WebSocket,所以 noVNC 不能直连 VN

随机推荐