精华内容
下载资源
问答
  • element ui
    千次阅读
    2021-11-02 23:47:35

    首先官网推荐的安装方法没有生成dist文件,导致样式表等这些文件并没有生成

    npm install element-plus --save

    以上方法是有问题的,如果不幸执行了上面的命令,那么先执行卸载

    npm uninstall element-plus

     删除 main.js文件对element ui的引用,输入以下命令

    vue add element-plus

    更多相关内容
  • Element UI元件库.rplib

    2020-10-07 00:37:03
    Element UI for Axure RP9 AxureRP9使用到的Element UI元件库,可以在软件中导入使用。 在左侧点击+号,添加元件库, 或者打开Axure RP9安装目录,进入DefaultSettings\Libraries,复制资源到此目录并重启Axure软件...
  • Element UI 完整版 源码 可用 vue+Element-UI 前端框架
  • 页面内引用element ui的js 及css离线版 便于不想通过webpack 打包和前后端分离使用
  • element-ui.rar element-ui核心库压缩包
  • Element UI 框架

    千次阅读 2021-02-27 12:07:01
    实验3、Element UI框架一、简介1、内容:Element UI简介、全局引入、按需引入、实战。二、具体1、Element UI简介Element UI是一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端元组件库,由饿了么前端团队...

    实验3、Element UI框架

    一、简介

    1、内容:Element UI简介、全局引入、按需引入、实战。

    二、具体

    1、Element UI简介

    Element UI是一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端元组件库,由饿了么前端团队推出。它并不依赖于Vue,却是一个十分适合Vue项目的框架。可使用Element UI轻松制作出网页,为前端开发人员大大减轻了代码负担。本次项目也是基于Element UI框架实现的。

    2、Element UI按需引入(本次不用)

    根据自身需求对Element里面组件进行单独引入。利弊如下:

    优点:单独引入,抛弃未使用组件,从而对项目体积造成影响不大。

    缺点:手动按需引入,需要进行更多代码工作,增大了开发人员的负担,同时繁多的组件样式,会导致代码繁杂紊乱,不利于美观。

    a)安装babel-plugin-component插件,可帮助实现按需引入:npm install babel-plugin-component -D

    b)找到babel.config.js,并修改为:

    module.exports = {

    presets: [

    '@vue/app',

    ['@babel/preset-env', {'modules': false}]

    ],

    plugins: [

    [

    'component',

    {

    'libraryName': 'element-ui',

    'styleLibraryName': 'theme-chalk'

    }

    ]

    ]

    }

    c)组件引入 & 加载

    // 在 main.js 中 import App from './App.vue' 下方添加以下代码

    // 引入所需样式组件

    import { Button, Select,Option } from 'element-ui';

    // 执行引入的样式组件

    Vue.component(Button.name, Button);

    Vue.component(Select.name, Select);

    Vue.component(Option.name, Option);

    /* 或写为

    * Vue.use(Button)

    * Vue.use(Select)

    * Vue.use(Option)

    */

    d)main.js传入对象进行全局配置

    // main.js

    Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };

    size:改变组件默认尺寸,默认为"small"

    zindex:设置弹框初始z-index(默认为2000)

    3、Element UI全局引入

    Element UI提供了插件,实验一已完成安装(npm install element-ui --save)。但还需要引入,引入方式有两种:按需和全局。

    全局引入--将整个Element UI里面组件统统引入到项目中,利弊为:

    优点:使用方便,一次引入后就可以直接使用所有样式;

    缺点:因为整体引入所有样式,所以导致项目体积增大。

    适合:大量使用Element UI框架的项目。

    引入方式:

    // 将 main.js 修改为:

    import Vue from 'vue'

    import App from './App.vue'

    import router from './router';

    // 引入 Element UI

    import ElementUI from 'element-ui';

    // 单独引入样式文件

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

    // 执行 ElementUI

    // Vue.use(ElementUI); -->传入配置对象,可改为

    Vue.use(ElementUI, { size: 'small', zIndex: 3000 });

    Vue.config.productionTip = false;

    new Vue({

    router,

    render: h => h(App)

    }).$mount('#app');

    注意:样式文件要单独引入。

    4、Element UI实战:创建一静态页面

    1)component/page/EleDemo.vue

    导航

    分组一

    选项 1

    选项 2

    分组二

    选项 3

    选项 4

    选项 5

    选项 5-1

    查看

    新增

    删除

    AsunaCC

    .el-header {

    background-color: #B3C0D1;

    color: #333;

    line-height: 60px;

    }

    .el-aside {

    color: #333;

    }

    export default {

    data() {

    const item = {

    date: '2019-09-17',

    name: 'shiyanlou',

    address: '四川省成都市'

    };

    return {

    tableData: Array(10).fill(item)

    }

    }

    };

    2)修改router/index.js

    import Vue from 'vue'

    import VueRouter from 'vue-router'

    Vue.use(VueRouter);

    export default new VueRouter ({

    routes: [

    {

    path: '/home',

    component: () => import('../components/common/Home.vue'),

    children: [

    {

    path: 'child1',

    component: () => import('../components/page/Children1.vue'),

    },

    {

    path: 'child2',

    component: () => import('../components/page/Children2.vue'),

    },

    {

    path: 'child3',

    component: () => import('../components/page/Children3.vue'),

    }

    ]

    },

    {

    path: '/demo',

    component: () => import('../components/page/EleDemo.vue'),

    }

    ]

    })

    3)浏览器打开:****/#/demo

    208dbb701d1defe8fad6d0226a33d31c.png

    三、小结

    本节主要学习了Element UI框架介绍、引入(按需+全局)、实战。理解不难,重要的是如何准确有效地创建实际页面。

    展开全文
  • Element UI极简教程(1):Element UI的安装

    千次阅读 2021-12-11 00:55:22
    Java大联盟 致力于最高效的Java学习关注B 站搜索:楠哥教你学Java获取更多优质视频教程Element UI简介Element UI 是一套基于 Vue 的桌面端组件库,封...

    7f351e963ccaa635c4e3f115cca98e74.png

      Java大联盟

      致力于最高效的Java学习

    关注

    3701178270910a9e59b6784dd8296c2b.gif

    B 站搜索:楠哥教你学Java

    获取更多优质视频教程

    Element UI 简介

    Element UI 是一套基于 Vue 的桌面端组件库,封装好了很多常用的 UI 组件,开发者可以使用 ElementUI 快速搭建一个网站。

    官网:https://element.eleme.cn/

    官网中有各个组件使用的详细教程,非常全面,楠哥写这篇教程的目的是帮助大家快速上手 Element UI 的使用,大家在实际开发中可以结合官网文档来完成具体业务代码的开发。

    Element UI 安装

    要使用 Element UI,首先确保你的电脑上已经成功安装了 Vue,这里不再介绍 Vue 的安装步骤,没有安装 Vue 的小伙伴可以自行查找教程进行安装。

    1、创建 Vue 工程,命令如下。

    vue ui

    2、选择“创建”,设置工程存放路径,点击下方的“在此创建新项目”按钮。

    1f861c61c9b5f4b456d2afd127b0e861.png

    3、输入工程名,点击下方的“下一步”按钮。

    30223ff3ece2c83292b58cced1c4a4b2.png

    4、选择“手动配置项目”,点击“下一步”按钮。

    4f907e338b5dd00566a2c88ed3a4e883.png

    5、打开 Router、Vuex 选项,关闭 Linter / Formatter 选项,点击“下一步”按钮。

    93b141de9776fb6e07b67c4544b37f8c.png

    6、打开 Use history mode for router 选项,点击“下一步”按钮。

    d0e3a3dc8eb5cfe77debe901b213e67b.png

    7、点击“创建项目,不保存预设”,然后耐心等待,创建完成之后会跳转到主页面。

    f34fb17f7ae4fa37e0ba87c9526135d5.png

    8、点击“添加插件”按钮。

    7f1a621c39b7908d57f9f1f3211835e0.png

    9、在搜索框输入“element”。

    ecd54ad35f17782102f28f4ce639dd14.png

    10、选中第一个,点击“安装 vue-cli-plugin-element”,耐心等待即可。

    71ec2fb0b3dd304638d12a7083e72dd9.png

    11、打开项目,在 App.vue 中添加如下代码。

    <el-button>默认按钮</el-button

    运行项目,如果能看到如下效果图,则说明 Element UI 已安装成功。

    f6082793bb2a50ec8ee3e0521587cc90.png

    以上就是 Element UI 安装的全部步骤,下一篇教程楠哥将带领大家正式开始学习 Element UI 具体组件的使用,如果你觉得这篇教程对你有帮助,就帮楠哥点个赞吧,我们下期教程再见。

    推荐阅读

    1、Spring Boot+Vue项目实战

    2、B站:4小时上手MyBatis Plus

    3、一文搞懂前后端分离

    4、快速上手Spring Boot+Vue前后端分离

    楠哥简介

    资深 Java 工程师,微信号 southwindss

    《Java零基础实战》一书作者

    腾讯课程官方 Java 面试官,今日头条认证大V

    GitChat认证作者,B站认证UP主(楠哥教你学Java)

    致力于帮助万千 Java 学习者持续成长。

    6f81757a44afb0395f527efe6274a1fd.png

    29a8cd6f7415a4a172817d6bd9f1dfd0.png

    有收获,就在看 0eebe899de2ec4a3060379e551789611.png

    展开全文
  • element ui 上传图片

    千次阅读 2022-03-28 21:01:39
    element ui图片上传,一看即会,小白专用


    在这里插入图片描述

    • 这玩意很简单,记录一下吧,给入门的小白用下

    1.template 部分

    <template>
      <div class="editPage__img">
        <div class="title">图片设置</div>
        <div class="img__con">
          <el-upload
            class="avatar-uploader"
            :action="uploadImgUrl"
            :data="uploadImgData"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <p><span>(点击图片即可替换其它图片)</span><br>说明:图片宽度为750PX,格式为JPG或者PNG,每张图片大小不超过3M</p>
        </div>
      </div>
    </template>
    

    2. script 部分

    data() {
        return {
          imageUrl: this.rightData.imageUrl,
          // 图片上传
          uploadImgUrl: `${process.env.VUE_APP_BASE_API}/common-server/aliFile/upLoadFileNoSecret`,
          uploadImgData: { busiName: 32 },
          // 应付多个组件的情况 记录当前组件的key值
          componentKey: null,
        };
      },
      methods: {
        uploadImg() {},
        handleAvatarSuccess(res, file) {
          // console.log(res)
          this.imageUrl = res.data.url;
           this.$emit("childRightFn", {
            ...this.rightData,
            ...{ imageUrl: this.imageUrl}, 
            ...{props: {src: this.imageUrl}} 
          });
        },
        beforeAvatarUpload(file) {
          const isJPG =
            file.type === "image/jpeg" ||
            file.type === "image/jpg" ||
            file.type === "image/png";
            // 限制只能3M以内的图片
          const isLt2M = file.size / 1024 / 1024 < 3;
    
          if (!isJPG) {
            this.$message.error("图片只能是 JPG 或者 PNG 格式!");
          }
          if (!isLt2M) {
            this.$message.error("上传头像图片大小不能超过 3MB!");
          }
          return isJPG && isLt2M;
        },
      },
    

    3. scss 部分

    • 请大家按需取用,不需要删掉就是,不要原封不动的搬
    <style lang="scss" scoped>
    .editPage__img {
      .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      .avatar-uploader .el-upload:hover {
        border-color: #409eff;
      }
      .avatar-uploader-icon {
        font-size: 16px;
        color: #8c939d;
        width: 350px;
        height: 30px;
        line-height: 30px;
        text-align: center;
      }
      .avatar {
        width: 350px;
        height: auto;
        display: block;
      }
      .title {
        font-size: 18px;
        margin-bottom: 20px;
      }
      .img__con {
        p {
          margin-top: 10px;
          text-align: center;
          span{
            color: #409eff;
          }
        }
        .el-button {
          width: 100%;
          margin: 10px 0 20px 0;
        }
      }
    }
    </style>
    
    • 加了很多注释,相信大家问题不大了,有问题可以加主页的群直接问我就成

    1. 希望本文能对大家有所帮助,如有错误,敬请指出

    2. 原创不易,还请各位客官动动发财的小手支持一波(关注、评论、点赞、收藏)
    3. 拜谢各位!后续将继续奉献优质好文
    4. 如果存在疑问,可以私信我(主页有Q)

    在这里插入图片描述

    展开全文
  • vue使用element ui

    2022-05-09 09:44:20
    npm install element-ui --save 第二步: 主要代码(安装完成后在 main.js 添加全局引用): import ElementUI from "element-ui"; import "element-ui/lib/theme-chalk/index.css"; Vue.use(ElementUI); 第三步...
  • element-ui@2.15.5.zip

    2021-08-11 12:07:42
    element-ui@2.15.5离线包,包含字体等,解压即用,非npm
  • 使用Element ui 编写登录页面

    千次阅读 热门讨论 2022-03-14 11:09:10
    1 完整引入element ui 执行命令安装npm i element-ui -S mian.js中 完整引入 import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from '....
  • element ui视频上传(已上线,拿去即用)

    千次阅读 多人点赞 2022-03-28 20:00:50
    Vue+element ui 视频上传 + 进度条实现,已上线,拿去即用
  • vue安装并导入Element UI

    千次阅读 2022-04-07 11:22:19
    vue安装并导入Element UI
  • 最近发现项目的element ui 版本是2.5而最新的版本已经是2.15所以想要更新一下element ui的版本 查阅资料 升级element ui 直接在终端运行 首先卸载旧版本: npm uninstall element-ui 安装最新版本: npm install ...
  • Element UI中的图标

    千次阅读 2021-11-09 15:39:38
    1、vue是现今比较流行的前端框架了,目前,使用比较多的就是Element UI,为了页面的美观程度,我们每个前端页面大多都会使用一下图标,下面介绍一下图标的使用。如有需要,可参考官网: 2、举个简单的例子,我们...
  • Element UI 使用CDN引入

    千次阅读 2022-03-26 19:49:24
    link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <...
  • 使用Element UI实现分页

    千次阅读 2021-08-30 10:46:39
    s第一步、引入Element ui 注意:js的引入要在Vue.js的后面 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src=...
  • element ui 支持ie11

    千次阅读 2022-03-23 16:29:14
    报错如下 SCRIPT1002: 语法错误 chunk-elementUI.ca855306.js (1,3788) vue.config.js中添加 ... transpileDependencies: ['element-ui'] } 参考 https://cli.vuejs.org/zh/guide/browser-compatibility.html
  • Element UI 改变主题色

    千次阅读 2022-03-17 12:31:02
    引入 之后,在项目的入口文件(main.js或者mian.ts)中,直接引入以上样式文件即可(无需引入 Element 编译好的 CSS 文件): import Vue from 'vue' import Element from 'element-ui' import './element-...
  • vue3.0版本如何使用Element UI?为什么用不了Element UI? 前端-vue3.0/element ui (element plus) 原因 在vue3.0版本中对 element ui 的支持有所改变,其中针对 vue3.0 版本的是 element plus,基本的 element ...
  • Vue 扩展Element UI 组件

    千次阅读 2021-12-13 15:04:18
    扩展安装Element-UI 1.执行npm install element-ui 2.设置 main.js 文件引入 (这样就扩展完毕了) import elementui from "element-ui"; import "element-ui/lib/theme-chalk/index.css"; ...
  • vue和 element ui下载到本地后引入

    千次阅读 2021-12-30 14:10:51
    二:element ui下载到本地 1:打开命令提示符,可以自己切换 这里我选择的是D盘 2:输入命令 npm i element-ui -S 下载element包 3:下载成功后可以看到有个node_modules 文件夹 4:打开文件 找到 node_modules/...
  • element ui实现前台打印功能

    千次阅读 2020-12-24 00:16:40
    element ui实现前台打印功能简介在项目中经常会使用打印功能,这次我们来看一下element ui实现打印功能,后台采用springboot作为后台接口方法,后台抽数据就不用看了,大家都明白,抽出来需要打印的数据就好,然后传...
  • element ui 自定义icon图标

    万次阅读 热门讨论 2020-10-14 17:15:52
    因为安装原型图设计实现页面,在element ui自带的图标库好像没有,所以按钮的图标icon需要自定义,原型如下图所示。 第一步:复制图片到项目内。如下图所示。 第二步:建立css样式,代码如下所示。 <<style...
  • element ui 表格列合并

    千次阅读 2021-11-04 17:03:23
    <el-table :show-header="false" :data="gridData" :span-method="addSpanMethod" border :cell-style="columnStyle" style="width: 100%; margin-top: 20px" >...el-table-column p.
  • element ui 下拉菜单加多选框

    千次阅读 2022-04-23 17:17:08
    最近做一个项目,需要一个带有多选框功能的下拉菜单,还是老规矩,自己封装一个吧。很简单 写完以后打开页面测试,发现已经选中了,但是输入框并没有显示选择的值 ...打开vue开发工具,发现选中的值并没有放入...
  • 如何在vue项目中使用element ui

    千次阅读 2021-12-09 14:08:38
    第一步:安装element ui插件 第二步:打开element官网——组件 第三步:例如,选择Form表单——点击显示代码 第四步:复制你需要的代码到你的vue项目中 第五步:打开plugins文件夹下的element.js文件,导入你需要...
  • Element ui修改table表头颜色

    千次阅读 2022-04-27 10:21:17
    今天开发项目的过程中,碰到一个问题,表头颜色改不动 然后通过网上借鉴发现了以下方法 在el-table上面加 :header-cell-style="getRowClass" 这个方法 方法中写 getRowClass(){ ......
  • npm i element-ui -S 报错
  • element ui 动态添加table列

    千次阅读 2022-02-24 17:42:12
    需求:不知道表格有多少列,具体表头列数从后端返回。如图,红色框框内的列是根据后端返回的数据确认的: 1.做法:(图中红色框内是动态列的写法) 1.1注意这个tableTitle是数组,所以后面的prop和lable使用的是...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 190,175
精华内容 76,070
关键字:

element ui

友情链接: OLED+Flash(大字体).zip