精华内容
下载资源
问答
  • 突然发现已经半年没更新的element-ui更新了 更新了什么还不清楚,但是告知了基于vue3.x版本的 element-plus 已经出来了。 先来上手体验一下 首先安装一个最新的@vue-cli,搭建一个vue3.x的项目,脚手架创建流程...

    官方文档已更新: 点击跳转

    突然发现已经半年没更新的element-ui更新了
    在这里插入图片描述
    更新了什么还不清楚,但是告知了基于vue3.x版本的 element-plus 已经出来了。
    在这里插入图片描述
    先来上手体验一下
    首先安装一个最新的@vue-cli,搭建一个vue3.x的项目,脚手架创建流程已经很简洁了,这里就不多说了。建好之后,直接开始安装吧

    npm i element-plus 
    

    为了方便,直接采取全部引入的方式

    src/plugins/element.ts

    import ElementPlus from 'element-plus'
    import 'element-plus/lib/theme-chalk/index.css'
    
    export default (app: any) => {
      app.use(ElementPlus)
    }
    

    src/main.ts

    import router from './router'
    import store from './store'
    import App from './App.vue'
    import { createApp } from 'vue'
    import installElementPlus from './plugins/element'
    const app = createApp(App)
    installElementPlus(app)
    app.use(store).use(router).mount('#app')
    

    在页面中加一个按钮

    <el-button type="primary">el-button</el-button>
    

    在这里插入图片描述
    在新版的vue3.x版本中还保留了原有的生命周期函数

    created(){
      this.$message("message")
    },
    

    在这里插入图片描述
    打印了一下this
    在这里插入图片描述

    更新补充:

    element-plus按需引入

    src/plugins/element.ts

    import { Button, Message } from 'element-plus'
    
    export default (app) => {
      app.use(Button)
      app.use(Message)
    }
    

    babel.config.js

    module.exports = {
      "presets": [
        "@vue/cli-plugin-babel/preset"
      ],
      "plugins": [
        [
          "component",
          {
            "libraryName": "element-plus",
            "styleLibraryName": "theme-chalk"
          }
        ]
      ]
    }
    

    在vue3.0 setup中使用

    import { setup } from 'vue-class-component'
    import { getCurrentInstance } from 'vue'
    export default {
      name: 'App',
      components: {
    
      },
      setup(e){
        const {ctx} = getCurrentInstance()
        ctx.$message("mesage")
      }
    }
    

    更新:ctx 打包之后无法调用$message,可以使用proxy

    import { getCurrentInstance } from 'vue'
    export default {
      name: 'App',
      components: {
    
      },
      setup(){
        const {proxy} = getCurrentInstance()
        proxy.$message("mesage")
      }
    }
    
    展开全文
  • element-ui Element Element-UI echarts

    千次阅读 2018-10-29 09:26:09
    element elementui element-ui Element  Element-UI 官网 echarts Echarts.js
    展开全文
  • vue导入element-ui并使用element-ui组件

    千次阅读 2020-08-03 21:46:49
    npm install element-ui -S 2、在项目中导入,修改main.js /** 引入element ,必须有*/ import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI);

    1、安装

    npm install element-ui -S

    2、在main.js导入elment-ui及css并use

    /** 引入element ,必须有*/
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    Vue.use(ElementUI);
    
    
    

    在这里插入图片描述
    3、使用element-ui

    1. 建立一个element.js文件,该文件主要引入element-ui组件
      在这里插入图片描述
    import Vue from 'vue'  //导入vue
    
    //从element-ui导入想要使用的组件
    import { Button, Form, FormItem, Input, Message, Container, Header,
      Aside, Main, Menu, Submenu, MenuItemGroup, MenuItem, Breadcrumb,
      BreadcrumbItem, Card, Row, Col, Table, TableColumn, Switch, Tooltip, Pagination,
      Dialog, MessageBox, Tag, Tree, Select, Option, Cascader, Alert, Tabs, TabPane,
      Step, Steps, Checkbox, CheckboxGroup, Upload,
      Timeline, TimelineItem } from 'element-ui'
    
      //用哪个就use哪个
    Vue.use(Button)
    Vue.use(Form)
    Vue.use(FormItem)
    Vue.use(Input)
    
    // 将弹框组件全局挂在到VUe原形实例
    Vue.prototype.$message = Message
    
    Vue.use(Container)
    Vue.use(Header)
    Vue.use(Aside)
    Vue.use(Main)
    Vue.use(Menu)
    Vue.use(Submenu)
    Vue.use(MenuItemGroup)
    Vue.use(MenuItem)
    Vue.use(Breadcrumb)
    Vue.use(BreadcrumbItem)
    Vue.use(Card)
    Vue.use(Row)
    Vue.use(Col)
    Vue.use(Table)
    Vue.use(TableColumn)
    Vue.use(Switch)
    Vue.use(Tooltip)
    Vue.use(Pagination)
    Vue.use(Dialog)
    Vue.prototype.$confirm = MessageBox.confirm
    Vue.use(Tag)
    Vue.use(Tree)
    Vue.use(Select)
    Vue.use(Option)
    Vue.use(Cascader)
    Vue.use(Alert)
    Vue.use(Tabs)
    Vue.use(TabPane)
    Vue.use(Step)
    Vue.use(Steps)
    Vue.use(Checkbox)
    Vue.use(CheckboxGroup)
    Vue.use(Upload)
    Vue.use(Timeline)
    Vue.use(TimelineItem)
    
    1. 在main.js引入element.js
      在这里插入图片描述

    2. 在vue页面中使用这些组件
      在这里插入图片描述

    展开全文
  • element-ui 本地化使用教程

    万次阅读 2019-10-26 10:22:58
    element-ui 本地化使用 element-ui 下载脚本

    起因:

    用 element-ui 时,本人是没有安装其它环境,而是直接用链接引入,这个带来的问题是,每次打开网页都很慢,于是想本地化,但是发现只是下载两个引入的 js 和 css 是不够的,很多功能会无法使用,打开 DevTools 发现是还有别的资源本地没有。

    在这里插入图片描述

    再次前往官网,找到下载页面,结果发现并没有给直接的下载链接。。没办法了,自己写个脚本来下载。最后成功离线化。

    下载后在 html 中引入:

    <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    
    <!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
    <script src="element-ui/lib/index.js"></script>
    

    在这里插入图片描述

    下载脚本:

    临时起意做的,代码里面可能会有些瑕疵,但是不影响使用,本人已经成功下载并使用。
    路径可以自己更改,注意不要从 Windows 资源管理器复制,Linux 系统当我没说。

    import java.io.File;
    import java.io.FileOutputStream;
    import java.io.InputStream;
    import java.net.HttpURLConnection;
    import java.net.URL;
    import java.nio.charset.StandardCharsets;
    import java.util.ArrayList;
    
    public class Main {
        static String fileP = "C:\\Users\\ChuanruiYan\\Desktop\\element-ui\\"; // 不要从资源管理器复制,有的字符会有问题,导致无法创建文件
        static String urlP = "https://unpkg.com/browse/element-ui@2.13.2/";
        static String urlF = "https://unpkg.com/element-ui@2.13.2/";
        public static void main(String[] args){
            try {
                GetPage("");
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
        static void GetPage(String after) throws Exception {
            System.out.println(urlP + after);
            new File(fileP + after).mkdir();
            HttpURLConnection http = (HttpURLConnection) (new URL(urlP + after)).openConnection();
            http.setRequestMethod("GET");
            http.setRequestProperty("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3562.0 Safari/537.36");
            http.connect();
            if(http.getResponseCode() == 200) {
                InputStream inputStream = http.getInputStream();
                byte [] buffer = new byte[1024];
                ArrayList<byte []> byteList = new ArrayList<>();
                ArrayList<Integer> byteLength = new ArrayList<>();
                int length;
                int totalLength = 0;
                while( (length = inputStream.read(buffer)) != -1 ) {
                    byteList.add(buffer);
                    byteLength.add(length);
                    totalLength += length;
                    buffer = new byte[1024];
                }
                http.disconnect();
                byte [] all;
                all = new byte[totalLength];
                totalLength = 0;
                while(byteList.size() != 0) {
                    System.arraycopy(byteList.get(0), 0, all, totalLength, byteLength.get(0));
                    totalLength += byteLength.get(0);
                    byteList.remove(0);
                    byteLength.remove(0);
                }
                String content = new String(all, StandardCharsets.UTF_8);
                all = null;
                content = content.split("tbody")[1];
                String [] us = content.split("href=\"");
                for(int i = 1; i < us.length; i ++) {
                    String href = us[i].split("\"", 2)[0];
                    if(href.equals("../")) {
                        continue;
                    }
                    if(href.charAt(href.length() - 1) == '/') {
                        GetPage(after + href);
                    } else {
                        if(!href.equals(".DS_Store"))
                            GetFile(after + href);
                    }
                }
            } else {
                GetPage(after);
            }
        }
        static void GetFile(String url) throws Exception{
            System.out.println(url);
            HttpURLConnection http;
            http = (HttpURLConnection) (new URL(urlF + url)).openConnection();
            http.setRequestMethod("GET");
            http.setRequestProperty("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3562.0 Safari/537.36");
            http.connect();
            if(http.getResponseCode() == 200) {
                InputStream inputStream = http.getInputStream();
                byte [] buffer = new byte[1024];
                ArrayList<byte []> byteList = new ArrayList<>();
                ArrayList<Integer> byteLength = new ArrayList<>();
                int length;
                int totalLength = 0;
                while( (length = inputStream.read(buffer)) != -1 ) {
                    byteList.add(buffer);
                    byteLength.add(length);
                    totalLength += length;
                    buffer = new byte[1024];
                }
                http.disconnect();
                byte [] all;
                all = new byte[totalLength];
                totalLength = 0;
                while(byteList.size() != 0) {
                    System.arraycopy(byteList.get(0), 0, all, totalLength, byteLength.get(0));
                    totalLength += byteLength.get(0);
                    byteList.remove(0);
                    byteLength.remove(0);
                }
                File f = new File(fileP + url.replaceAll("/", "\\\\"));
                f.createNewFile();
                FileOutputStream fos = new FileOutputStream(f, false);
                fos.write(all);
                fos.flush();
                fos.close();
            } else {
                GetFile(url);
            }
        }
    }
    
    
    展开全文
  • element-ui

    千次阅读 2019-06-03 03:04:16
    安装 npm i element-ui 这三句不能少
  • Element-UI - Vue项目整合Element-UI & Icon图标 & 自定义Icon图标 博主很久之前就想使用Element-UI,总是因为学习后端的技术鸽了很久(博主目前是偏后端),这里博主通过Vue来整合Element-UI(不是Vue项目...
  • Element-ui和vue-element-admin学习

    千次阅读 2020-05-27 00:23:05
    Element-ui 什么是Element-ui? 根据官网的说法,Element-ui,是一套为开发者、设计师和产品经理准备的基于Vue 2.0的由饿了么公司出品的桌面端组件库。 官网:https://element.eleme.cn/#/zh-CN 如何使用? 1、...
  • 出现需要To install them, you can run: npm install --save element-ui element-ui/lib/theme-chalk/index.css 解决方法一: 检查书写: import ElementUI from ‘element-ui’ import ‘element-ui/lib/theme-...
  • Element-ui之ElScrollBar组件滚动条的使用

    万次阅读 多人点赞 2018-04-25 15:18:27
    在使用vue + element-ui 搭建后台管理页面的时候,做了一个头部、侧栏、面包屑固定的布局,导航栏和主要内容区域当内容超出时自动滚动。 使用的原因: 原来是采用优化浏览器样式的方式,对滚动条进行样式调整。...
  • Element-UI详解

    万次阅读 多人点赞 2019-11-06 09:00:58
    Element-UI Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 Element UI是基于Vue 2.0的 Element UI 提供一组组件 Element UI 提供组件的参考实例, 直接复制 安装...
  • 有项目需要使用VUE+element-ui做一个前端项目,从网上找了一个Demo修改后发现很多element-ui的图标是用不了,后来发现是因为element-ui的版本太低导致很多图标不支持,升级element-ui的版本后项目运行出错,最后查...
  • 在VUE-CLI 3下的第一个Element-ui项目(菜鸟专用) 上面这个链接是vue-cli3.0安装element-ui的详细过程,如果想要按需引用看下面的 1.引入vue add element How do you want to import Element? --&gt;选择 ...
  • ERROR in ./node_modules/_element-ui@2.13.2@element-ui/lib/theme-chalk/fonts/element-icons.ttf Module parse failed: Unexpected character '' (1:0) You may need an appropriate loader to handle this file ...
  • 一、版本说明,没有的需要安装 ..."element-ui": "^2.13.0", // npm install --save element-ui "vue": "^2.5.2", // npm install --save vue "vue-router": "^3.0.1", // npm install --save ...
  • element-ui切换主题

    2019-11-01 08:11:18
    vue+element-ui实现切换主题颜色,根据element-ui官方提供的主题生成工具生成主题,实现切换。
  • 报错信息:in …/node_modules/_element-ui@2.13.0@element-ui/lib/theme-chalk/index.css 原代码: `import Vue from ‘vue’ import App from ‘./App.vue’ import router from ‘./router’ //引入element-ui ...
  • 报错信息 These dependencies were not found: * element-ui in ./src/main.js * element-ui/lib/theme-...2、输入 cnpm i element-ui -S(没有装淘宝镜像的使用 npm i element-ui -S) 再起项目,可以解决了 ...
  • elementUI: 如何使用 官网:... 安装 element-ui npm i element-ui -D npm install element-ui --save-dev // i -&gt; install // D -&gt; --save-dev // S -&gt; --save2. 引入 ...
  • 初始化Vue项目,安装element-ui 组价,导入element-ui 组件 vue 项目安装(cnpm install),项目执行(cnpm run dev), 提示如下错误信息: This dependency was not found: * element-ui/lib/theme-default/index....
  • 在默认设置里,采用的是英文。 将src/main.js里的 import locale from 'element-ui/lib/locale/lang/en 改成 import locale from 'element-ui/lib/locale/lang/zh-CN' 就可以了
  • 一、引入element-ui的两种方式 第一种方式:使用npm命令行安装 npm i element-ui -S 第二种方式:CDN直接获取最新资源 二、查看当前Vue项目的element的版本 我是用idea创建的Vue项目,在pack.json的...
  • 如题,在项目中实际遇到的问题,本地运行项目没有问题,打包后放到测试,element-ui的所有图片都变成了小方块,因为是老项目的更新迭代,初步判断是element-ui的版本问题,安装新版本后依然行; 最后解决方案来源于...
  • Element-Ui组件(二)Icon 图标

    万次阅读 多人点赞 2019-06-03 16:16:39
    Element-Ui组件(二)图标应用 本文参考Element官方文档: http://element-cn.eleme.io/#/zh-CN/component 基本用法 Element内置丰富的图标库,主要有以下2种用法: 设置类名el-icon-xxx,通常使用i元素 在...
  • 在腾讯云centos7上用Django+vue+element-ui搭建项目,按照网上资料下载了 npm i element-ui -S 也向webpack.base.conf.js 和 main.js中添加了代码, 且逻辑没有问题,页面可以正常那个访问且不报错,但样式就是不...
  • element-ui离线

    2019-01-03 21:02:23
    vue2.0的ui组件,element-ui官网的离线版本,几乎完美还原.
  • element-ui-api 离线文档

    2019-01-28 11:25:21
    element-ui-api 离线文档 2.0 2.1 2.2 2.3 2.4 全版本 。
  • Vue、Element-ui项目中如何使用Iconfont(阿里图标库)

    万次阅读 多人点赞 2018-03-29 13:45:42
    我们使用element-ui、vue开发网站的时候,往往图标是起着很重要的作用。 2018-11-9更新 1.傻瓜式引用:由于这种方法及其简单 省去了很多繁琐的步骤, a.引入项目生成的,图标地址。 b.使用推荐使用这种,详情请...
  • vue用npm安装删除模块element-ui mint-ui

    千次阅读 2019-01-18 18:42:00
    vue用npm安装删除模块element-ui mint-ui 在vue项目中先引入了element-ui,后来发现移动版的需要用mint-ui,所以需要先卸载了再安装。卸载element-ui:npm uninstall element-ui 然后再安装mint-ui:npm i mint-ui...
  • element-ui@2.4.8最新版

    2018-10-29 18:04:05
    element-ui@2.4.8最新版,最element-ui官网CDN下载,网址https://unpkg.com/element-ui@2.4.8/
  • 卸载现有的element-ui,重新安装 npm uninstall element-ui npm install element-ui 若不行,则继续往下看 由下图可知,通过url-loader将 woff2?|eot|ttf|otf 相关文件打包到 fonts/ 目录下; 代码 { test: /\....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 151,505
精华内容 60,602
关键字:

element-ui