element_elementui - CSDN
element 订阅
Element是一份基于Ubuntu的发行,它面向家庭影院或媒体中心式的个人电脑,这类电脑可拥有十英尺大的用户屏幕并被设计为连接到高清晰度电视, 以获取一份数字媒体和因特网体验,而这种体验可以在客厅或娱乐场所舒适地获得。Element预加载有大量应用程序,它们使得用户能收听、收看和管理音 。 展开全文
Element是一份基于Ubuntu的发行,它面向家庭影院或媒体中心式的个人电脑,这类电脑可拥有十英尺大的用户屏幕并被设计为连接到高清晰度电视, 以获取一份数字媒体和因特网体验,而这种体验可以在客厅或娱乐场所舒适地获得。Element预加载有大量应用程序,它们使得用户能收听、收看和管理音 。
信息
类    型
个人电脑
特    点
十英尺大的用户屏幕
基    础
Ubuntu
外文名
elemeNt
elemeNt版本发布
2010年03月28日,Element 1.1 发布。 [1]  2010年05月17日,Element 1.2 发布。 [2]  2010年07月03日,Element 1.3 发。 [3]  2010年09月02日,Linux 发行版 Element 1.4 发布。 [4] 
收起全文
精华内容
参与话题
  • Element 组件使用心得

    千次阅读 2018-08-07 17:47:37
    Element 组件本人第一次使用,此文章为使用总结,不足之处请多多指教! 1、推荐使用 npm 安装,可以更好的与 webpack 打包工具使用  npm i element-ui -S 2、CDN(构建在网络之上的内容分发网络)  可以通过在...

    Element 组件本人第一次使用,此文章为使用总结,不足之处请多多指教!

    1、推荐使用 npm 安装,可以更好的与 webpack 打包工具使用

          npm i element-ui -S

    2、CDN(构建在网络之上的内容分发网络)

          可以通过在页面上引入js和css文件进行使用

          <!-- 引入样式 -->  <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 官网建议使用 CDN 引入 Element 的用户在链接地址上锁定版本,以免升级时收到非兼容性更新的影响。

          锁定版本的方法请查看 unpkg.com

    3、引入 Element

         完整引入 --- 在 main.js 中写入以下内容:

          

          按需引入 --- 借助 babel-plugin-component ,可以只引入需要的组件,以减小项目的体积

          1)、安装 babel-plugin-component: npm install bable-plugin-component -D

          2)、将 .babelrc 修改为:

          

          3)、按照需要在 main.js 中写入(以 Button、Select 为例)

          

          浅谈 babel      

    4、全局配置

          在引入 Element 时,传入一个全局配置对象,该对象支持 size 以及 zIndex。

          size 用于改变组件的默认尺寸

          zIndex 设置的是弹窗的 z-index (默认值是2000)

          完整引入:

          

          按需引入:

          

    5、自定义主题颜色 --- 在线主题生成工具

     

     

     

     

     

     

     

     

     

     

     

     

          

     

    展开全文
  • Element学习教程

    千次阅读 2018-08-01 13:44:07
    http://element-cn.eleme.io/#/zh-CN/component/installation
    展开全文
  • Element-UI使用指南

    万次阅读 多人点赞 2016-11-04 09:23:31
    Element-UI使用指南 Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint UI 。 开发环境1.安装webpacknpm install -g webpack2.安装vue-clivue-cli是什么?vue-cli 是...

    Element-UI饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint UI

    开发环境


    1.安装webpack

    npm install -g webpack

    2.安装vue-cli

    vue-cli是什么?

    vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的。

    使用步骤:

    • 安装vue-cli:

      npm install -g vue-cli
    • 使用vue-cli构建项目

      vue init webpack project-name  //创建一个基于webpack模板的名为project-name的项目

      目前可用的模板包括:

      • browserify–全功能的Browserify + vueify,包括热加载,静态检测,单元测试。
      • browserify-simple–一个简易的Browserify + vueify,以便于快速开始。
      • webpack–全功能的Webpack + vueify,包括热加载,静态检测,单元测试。
      • webpack-simple–一个简易的Webpack + vueify,以便于快速开始。
    • 安装项目依赖

      cd project-name    //进入项目目录
      npm install        //安装项目依赖
      npm run dev        //运行项目

    此时在浏览器打开:localhost:8080即可看到欢迎页。

    关于webpack和vue-cli的更多使用方法参见官方文档。

    • 但是这个只能在本地跑,要如何在我们自己的服务器上访问呢?此时需要执行

      npm run build

    搭建开发环境

    本来想用vue-cli重新创建项目,试了几次总是出现各种问题,没办法成功。最后在仔细查看 Element-UI官方文档快速上手 部分的时候发现 饿了么 团队给了一个他们自己的 项目模板 。于是我就用这个模板来尝试了下,结果成功了。所以,如果你不想太折腾的话,建议还是使用官方给的项目模板,可以省很多事。

    第一步:安装项目模板

    • 克隆/下载项目模板

    • 将下载的模板放到你项目的根目录下

    • 安装依赖

      npm install
    • 运行项目模板

      npm run dev

      此时在浏览器打开:localhost:8080即可看到欢迎页。

      欢迎页

    项目模板里已经把需要配置的文件都配置好了。

    第二步:安装element-ui

    第一步,我们成功安装了项目模板,接下来,我们需要安装element-ui到项目下。

    npm i element-ui@next -D

    开始使用

    接下来我们就可以参照 Element-UI官方文档上手开发了。

    例子

    我们参照官方的按钮组件使用说明,在项目模板的基础上做一个按钮的例子。其它文件不需要改动,只修改App.vue文件的内容。代码如下:

    App.vue

    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <h1>{{ msg }}</h1>
        <el-button @click.native="startHacking">Let's do it</el-button>
        <div class="block">
        <span class="demonstration">显示默认颜色</span>
        <span class="wrapper">
        <el-button type="success">成功按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        </span>
        </div>
        <br/>
        <div class="block">
          <span class="demonstration">hover 显示颜色</span>
        <span class="wrapper">
        <el-button :plain="true" type="success">成功按钮</el-button>
        <el-button :plain="true" type="warning">警告按钮</el-button>
        <el-button :plain="true" type="danger">危险按钮</el-button>
        <el-button :plain="true" type="info">信息按钮</el-button>
        </span>
        </div>
      </div>
    </template>
    <script>
    export default {
      data () {
        return {
          msg: 'Use Vue 2.0 Today!'
        }
      },
    
      methods: {
        startHacking () {
          this.$notify({
            title: 'It Works',
            message: 'We have laid the groundwork for you. Now it\'s your time to build something epic!',
            duration: 6000
          })
        }
      }
    }
    </script>
    
    <style>
    body {
      font-family: Helvetica, sans-serif;
    }
    </style>
    

    效果如下图所示:

    demo


    使用过程中碰到的问题:

    1. phantomjs安装失败

    由于源的问题,安装phantomjs必须要“搭梯子”,使用内网无法下载。所以解决的方法有两种:

    • 方法一:通过科学上网,然后安装。

    • 方法二:对于不知道怎么“搭梯子”的同学,可以通过更改源来下载,操作方法如下:

      npm install phantomjs --phantomjs_cdnurl=http://cnpmjs.org/downloads

    2.打开页面乱码

    通过 Element-UI 官方提供的项目模板开发,会发现在浏览器打开页面的时候,中文是乱码的。如下图所示:

    中文乱码

    html页面中已经设置了<meta chartset='utf-8'>

    仔细查看该页面所涉及的文件的编码格式的时候,发现引用的App.vue 文件的编码格式是GBK ,所以把该文件编码格式改为UTF-8 即可。

    展开全文
  • Vue 组件库 Element 脚手架 入门教程

    万次阅读 2018-03-26 18:45:18
    前提是安装了nodejs(6.0+),npm ...Element官网地址: http://element-cn.eleme.io/#/zh-CNElement 脚手架 代码git地址: https://github.com/ElementUI/element-starter.gitgit clone下来后,进入elem

    前提是安装了nodejs(6.0+),npm
    验证安装成功 node –version
    npm –version

    Element官网地址:
    http://element-cn.eleme.io/#/zh-CN

    Element 脚手架 代码git地址:
    https://github.com/ElementUI/element-starter.git

    git clone下来后,进入element-starter目录


    首先文档上写明了需要安装yarn

    这里写图片描述

    所以执行

     npm install -g yarn

    命令进行全局安装。
    关于yarn的说明请看yarn的安装与使用 - CSDN博客


    • 命令行进入element-starter目录下,执行:
    npm install

    等待初始化完成

    • 然后再执行
    npm run dev

    出现下面的提示即说明成功
    这里写图片描述

    然后根据提示,在浏览器打开 http://127.0.0.1:8010

    会出现下面的页面
    这里写图片描述


    对应的代码为,在src目录下的App.vue文件,

    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <div>
          <el-button @click="startHacking">Start</el-button>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        startHacking () {
          this.$notify({
            title: 'It works!',
            type: 'success',
            message: 'We\'ve laid the ground work for you. It\'s time for you to build something epic!',
            duration: 5000
          })
        }
      }
    }
    </script>
    
    <style>
    #app {
      font-family: Helvetica, sans-serif;
      text-align: center;
    }
    </style>
    

    开始写一个自己的页面

    这里要用到路由,所以需要执行下面的命令安装一下

    npm install vue-router --save
    • 修改App.vue文件,添加一个路由的标签
    <template>
      <div id="app">
        <transition name="fade" mode="out-in">
             <router-view></router-view>
        </transition>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        startHacking () {
          this.$notify({
            title: 'It works!',
            type: 'success',
            message: 'We\'ve laid the ground work for you. It\'s time for you to build something epic!',
            duration: 5000
          })
        }
      }
    }
    </script>
    
    <style>
    #app {
      font-family: Helvetica, sans-serif;
      text-align: center;
    }
    </style>
    • 在src目录下的新建一个名为 routes.js 的文件,内容如下:
    import Login from './views/Login.vue'
    
    let routes = [
        {
            path: '/login',
            component: Login,
            name: '',
            hidden: true
        }
    ];
    
    export default routes;
    • 在src目录下的新建一个名为 views 的文件夹,在该文件夹下再新建一个名为Login.vue的文件,内容如下:
    <template>
    
      <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-container">
        <h3 class="title">系统登录</h3>
        <el-form-item prop="account">
          <el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item prop="checkPass">
          <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码"></el-input>
        </el-form-item>
        <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
        <el-form-item style="width:100%;">
          <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining">登录</el-button>
          <!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
        </el-form-item>
      </el-form>
    </template>
    
    <script>
    
      export default {
        data() {
          return {
            logining: false,
            ruleForm2: {
              account: 'admin',
              checkPass: '123456'
            },
            rules2: {
              account: [
                { required: true, message: '请输入账号', trigger: 'blur' },
                //{ validator: validaePass }
              ],
              checkPass: [
                { required: true, message: '请输入密码', trigger: 'blur' },
                //{ validator: validaePass2 }
              ]
            },
            checked: true
          };
        },
        methods: {
          handleReset2() {
            this.$refs.ruleForm2.resetFields();
          },
          handleSubmit2(ev) {
            var _this = this;
            this.$refs.ruleForm2.validate((valid) => {
    
            });
          }
        }
      }
    
    </script>
    <style >
      .login-container {
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        background-clip: padding-box;
        margin: 180px auto;
        width: 350px;
        padding: 35px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
        .title {
          margin: 0px auto 40px auto;
          text-align: center;
          color: #505458;
        }
        .remember {
          margin: 0px 0px 35px 0px;
        }
      }
    </style>
    • 最后修改 main.js文件,
    import Vue from 'vue'
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    import App from './App.vue'
    
    import VueRouter from 'vue-router'
    import routes from './routes'
    
    Vue.use(ElementUI)
    Vue.use(VueRouter)
    
    const router = new VueRouter({
      routes
    })
    
    new Vue({
      router,
      el: '#app',
      render: h => h(App)
    })
    
    • 执行
    npm run dev

    启动完毕后,在浏览器输入http://127.0.0.1:8010/#/login

    即可看到下面的页面

    这里写图片描述

    打包

    npm run build

    在src同级目录下会生成一个名为dist的文件夹,

    这里写图片描述

    打开index.html,后面跟上#/login即可看到手写的页面



    展开全文
  • ElementUI快速入门

    万次阅读 多人点赞 2019-01-04 10:39:22
    本文主要从几个方面快速入门ElementUI 1、什么是ElementUI ? 掌握elementUI脚手架搭建 2、掌握elementUI的table组件的使用,实现列表功能 3、掌握elementUI的pagination组件的使用,实现分页功能 ...
  • 一、缘由 在项目中,有一个需求是需要根据条件给表单项添加验证属性prop确定是否验证表项。 二、第一次实现与遇到的问题 比如银行卡号根据输入年龄进行判断,如果大于等于18岁才需要填入银行卡号。...
  • vue+element-ui项目,设计登录界面。用户名和密码都是必填项,未填写会在输入框下方提示“请输入用户名”或“请输入密码”。 问题描述: 打开登录界面后,用户名和密码都已填写,还提示我“请填写...” 问题...
  • &lt;el-form :model="registerUser" :rules="rules2" ref="registerForm" label-width="80px" class="registerForm"&gt; &...&a
  • 最近刚接触element组件,在使用el-input组件时需要实现一个功能: 只有一个搜索框,输入内容完成后,自行返回搜索结果 像这样 搜索函数已经写好了,只等合适的时间触发事件就好 查了下element官网中input...
  • Vue 使用 element-ui

    千次阅读 2020-07-25 21:53:53
    如何在 vue 项目中使用 element-ui
  • 基于百度/高德地图的一些应用经常会有这样一种场景的查询: 取X公里范围内最近的Y位司机/商户。 某公司是这样做的:司机有一张司机信息表DriverInfo,另有一张司机位置信息表DriverPosition。...
  • 1、GeoHash是啥? GeoHash通过某种方法将二维的点数据转换成一维的数据,也就是将二维的经纬度转换成一维的字符串,方便对位置进行索引; 2、GeoHash特点 字符串越长,表示的范围越精确。5位的编码能表示10平方...
  • 充分利用 UE4 中的噪声

    千次阅读 2016-10-13 14:07:10
    充分利用 UE4 中的噪声 Ryan Brucks 在 Sep 13, 2016 | 教程 社区 美术 Share on Facebook Share on Twitter Share on Google+ Share on LinkedIn ...UE4 推出基于材质的程序式噪声已经有一段时间了,但是...
  • Vue 中 安装 element-ui 的步骤

    万次阅读 多人点赞 2018-04-26 19:23:11
    1. 在项目下 输入 npm install element-ui -S2.查看配置文件package.json,是否有element-ui组件的版本号 如下图:3.安装成功后 ,在node_modules中可以看到 element-ui的文件夹 ,所有安装的源文件可以在这里面...
  • 在vue项目中升级更新element ui版本

    万次阅读 2019-07-03 17:05:27
    一、升级element-ui需要先卸载原先的版本,在cmd中输入npm uninstall element-ui 二、然后重新安装element-uinpm i element-ui -S 三、最后在main.js中把default修改为theme-chalk ...
  • element = driver.find_element_by_css('div[class*="loadingWhiteBox"]') driver.execute_script("arguments[0].click();", element) 方法二: element = driver.find_element_by_css('div...
  •   components一定要写对啊
  • pom.xml提示Element connectors is not allowed here 解决方案是:重启IDEA就解决了 原因:这可能是Intellj软件的一个bug,有时候它不能正确的识别一些配置属性(即使相应的插件有这个属性) 只出现过一次,所以...
  • Vue下面安装Element 的详细步骤

    万次阅读 2018-03-19 23:44:13
    项目中在大量的使用vue和Element来书写自己的代码,无论是前台系统还是后天系统。这里我给大家详细的介绍一下如何在vue项目中引入Element.首先你要安装了vue,如果没有安装可以参考vue的官方文档进行安装。安装完成...
  • setting an array element with a sequence

    万次阅读 2018-10-07 17:33:21
    setting an array element with a sequence   原因与解决: 矩阵的列没有对齐,一般情况用这个方法就行了:arrayname = np.concatenate(arrayname, axis=0) 。 arrayname是自己定义的矩阵名字...
1 2 3 4 5 ... 20
收藏数 885,349
精华内容 354,139
关键字:

element