elementui_elementui 面试题 - CSDN
精华内容
参与话题
  • ElementUI快速入门

    万次阅读 多人点赞 2019-01-04 10:39:22
    本文主要从几个方面快速入门ElementUI 1、什么是ElementUI ? 掌握elementUI脚手架搭建 2、掌握elementUI的table组件的使用,实现列表功能 3、掌握elementUI的pagination组件的使用,实现分页功能 4、掌握...

    本文主要从几个方面快速入门ElementUI

    1、什么是ElementUI ? 掌握elementUI脚手架搭建

    2、掌握elementUI的table组件的使用,实现列表功能

    3、掌握elementUI的pagination组件的使用,实现分页功能

    4、掌握elementUI的form相关组件的使用,实现条件查询功能

    5、掌握elementUI的dialog组件和$message的使用,实现弹出窗口和消息提示功能

    6、掌握elementUI的select组件的使用,实现下拉列表功能实现新增数据和修改数据的功能

    7、掌握confirm的使用,实现询问框,实现删除功能

     

    1、什么是ElementUI?

    Element 饿了么前端出品的一套 基于 Vue 2.0 的桌面端组件库

    官网: http://element.eleme.io/#/zh-CN

     

    1.1、搭建elementUI脚手架(vue-admin-template)

    # Clone project
    git clone https://github.com/PanJiaChen/vue-admin-template.git
    
    # Install dependencies
    npm install
    
    # Serve with hot reload at localhost:9528
    npm run dev
    
    # Build for production with minification
    npm run build
    
    # Build for production and view the bundle analyzer report
    npm run build --report

    在执行完npm run dev后发现浏览器自动打开了vue-admin-template登录页面,点击登录,此时模板页面就搭建好了。

    打开文件夹vue-admin-template,主要的目录结构如下图所示:

     

    1.2 项目初始化调整

    1.2.1  关闭语法规范性检查

    修改config/index.js ,将useEslint的值改为false。

    此配置作用: 是否开启语法检查,语法检查是通过ESLint 来实现的。

    我们现在科普一下,什么是ESLint : ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。如果我们开启了Eslint , 也就意味着要接受它非常苛刻的语法检查,包括空格不能少些或多些,必须单引不能双引,语句后不可以写 分号等等,这些规则其实是可以设置的。作为初学者,最好先关闭这种校验,否则会浪费很多精力在语法的规范性上。如果以后做真正的企业级开发,建议开启。

     

    1.2.2  国际化设置

    打开main.js 找到这句代码

    import locale from 'element‐ui/lib/locale/lang/en'

    我们将en修改为zn-CN
    import locale from 'element‐ui/lib/locale/lang/zh‐CN'

    修改后组件都是按照中文的习惯展示

     

    1.2.3  与easy-mock对接

    (1)修改config下的dev.env.js中的BASE_API为easy-mock的Base URL

      ....
      BASE_API: '"http://10.211.5.3:7300/mock/5af314a4c612420d0d7650c7"',
      ....
    

    修改后发现无法登录上vue-admin-templates,原因是修改了BASE_API,需要在自己的Easy-mock中修改验证

    (2)easy-mock添加登陆认证模拟数据 地址: /user/login
    提交方式:post
    内容:

    {
      "code": 20000,
      "data": {
        "roles": ["admin"],
        "role": ["admin"],
        "name": "admin",
        "avatar": "https://wpimg.wallstcn.com/f778738c‐e4f8‐4870‐b634‐56703b4acafe.gif"
      }
    }

    (3)添加返回用户信息url模拟数据 地址:/user/info
    提交方式:get
    内容:

    {
      "code": 20000,
      "data": {
        "roles": ["admin"],
        "role": ["admin"],
        "name": "admin",
        "avatar": "https://wpimg.wallstcn.com/f778738c‐e4f8‐4870‐b634‐56703b4acafe.gif"
      }
    }

     

    此时又可以登录上vue-admin-template,且成功与自己的easy-mock对接上了。

     

    2.elementUI的table组件,实现列表展示

    (1)在src/api/下创建gathering.js,书写代码:

    import request from '@/utils/request'
    export default{
        getList(){
            return request(
                {
                    url:'/gathering/gathering',
                    method:'get'
                } 
            );
        }
    } 

    导入request模块实际上是对ajax的封装(在utils/request.js中),上述的url和method即为请求的url和method

    (2)在views/table中创建 gathering.vue

    vue主要分为视图区<template>、逻辑区/代码区<script>(用于控制视图区的显示)

    <template>
        <el-table :data="list" border style="width: 100%">
        <el-table-column prop="id" label="活动ID" width="180">
        </el-table-column>
        <el-table-column prop="name" label="活动名称" width="180">
        </el-table-column>
        <el-table-column prop="sponsor" label="主办方" width="180">
        </el-table-column>
        <el-table-column prop="address" label="活动地址" width="180">
        </el-table-column>
        <el-table-column prop="starttime" label="开始日期" width="180">
        </el-table-column>
        <el-table-column prop="endtime" label="结束日期" width="180">
        </el-table-column>
      </el-table>
    </template>
    
    <script>
    //将我们刚才书写的gathering.js导入到该vue中,并声明其作为变量gatheringApi
    import gatheringApi from '@/api/gathering'
    export default {
        data() {
        return {
          list: []
        }
      },
      created() {
        this.fetchData()
      },
      methods: {
        fetchData() {
          gatheringApi.getList().then(response => {
            this.list = response.data
          })
        }
      }
    }
    </script>

    (3)修改router/index.js中的path和import('@/views/table/gathering')  其中path为访问路径,import为views文件夹中的table文件夹中的gathering.vue文件

    {
        path: '/gathering',
        component: Layout,
        children: [
          {
            path: 'index',
            name: 'Form',
            component: () => import('@/views/table/gathering'),
            meta: { title: '活动管理', icon: 'form' }
          }
        ]
      }

    (4)reload工程 :   npm run dev

    (5)plus:如果此时你在开发者工具中能正常接收数据,但是无法显示,考虑easy-mock中的接口设置,返回值是否为20000等。

    {
        "code": 20000,
        "flag": true,
        "message": "@string",
        "data|10": [{
          "id": "@string",
          "name": "@cword(8,12)",
          "summary": "@cword(20,40)",
          "detail": "@cword(20,40)",
          "sponsor": "@string",
          "image": "@image",
          "starttime": "@date",
          "endtime": "@date",
          "address": "@county(true)",
          "enrolltime": "@date",
          "state": "@string",
          "city": "@string"
        }]
    }

     

    3.使用pagination实现分页

    我们已经通过表格组件完成了列表的展示,接下来需要使用分页组件完成分页功能

    一般对于分页,都需要前端传递给后端两个参数:①当前页码   ②每页显示条数

    由于笔者项目中用到了Easy Mock,所以我们第一步应该修改Easy Mock中的接口,产生更真实的模拟数据

    (1)修改接口/gathering/gathering/search/{page}/{size} method:POST

    (2)在gathering.js中添加新方法search,page当前页码,size每页显示条数,searchMap查询条件

    参考返回数据结构:

    <script>
    import gatheringApi from '@/api/gathering'
    export default {
        data() {
        return {
          total: 0 ,       //总记录数
          list: [],
          currentPage: 1,  //初始值为1
          pageSize: 10,     //每页显示条数
          searchMap: {}     //查询条件
        }
      },
      created() {
        this.fetchData()
      },
      methods: {
        fetchData() {
          gatheringApi.search(this.currentPage,this.pageSize,this.searchMap).then(response => {
            this.list = response.data.rows
            this.total = response.data.total
          })
        }
      }
    }
    </script>

    此时js部分(逻辑处理层)我们已经完成,参考官方文档完成分页组件UI层:

    http://element-cn.eleme.io/#/zh-CN/component/pagination

    plus:@代表调用的方法,当每页显示个数和当前页码改变时会调用方法fetchData,:name代表属性

      <el-pagination
          @size-change="fetchData"
          @current-change="fetchData"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>

    plus:如果加入该<el-pagination>到<template>中报错,考虑在<template>下添加一个<div>标签,因为<template>下只能有一个标签加入后即只有一个<div>标签,否则将存在<el-table>标签和<el-pagination>标签,故报错。

     

    4. 使用分页+条件查询

    需求:在分页列表的基础上实现条件查询功能【使用到了表单控件、文本输入控件、日期输入控件、行内表单等】

    总体template代码:

    <template>
      <div>
        <br/>
        <el-form :inline="true">
          <el-form-item label="活动名称">
            <el-input v-model="searchMap.name"></el-input>   
          </el-form-item>
          <el-form-item label="活动日期">
            <el-date-picker v-model="searchMap.starttime_1" type="date" placeholder="选择开始日期">
          </el-date-picker>
            <el-date-picker v-model="searchMap.starttime_2" type="date" placeholder="选择结束日期">
          </el-date-picker>
          </el-form-item>
          <el-button @click="fetchData()" type="primary">查询</el-button>
        </el-form>
    
        ......
    
      </div>
    </template>

     

    5-6. 弹出窗口、消息提示、select下拉框

    需求:界面中加入"新增"按钮,点击弹出编辑窗口,点击“修改”按钮,关闭窗口并刷新表格,弹出提示(成功或失败)

    涉及知识点:dialog组件、$message、switch开关、textarea文本域、form表单、select下拉框等

    参考官方文档:http://element-cn.eleme.io/#/zh-CN/component/dialog      (如何调出窗口并关闭窗口)

    plus:注意!需要在return内部声明一个实体对象,用于存储表单数据 ,如:renturn{ pojo:{} }

    (省略了一部分代码)新增city.js,并导出(参考gathering.js)。在gathering.vue中导入city,并在打开视图时就加载城市:

    created() {
        this.fetchData()
        cityApi.getList().then(response => {
          this.cityList = response.data
        })
      }

    不要忘记在return中加入city这个实体对象,否则为空报错。如return{ cityList:[] }

    <template>视图层代码:

    <el-dialog title="编辑" :visible.sync="dialogFormVisible">
        <el-form :model="form" label-width="100px">
        <el-form-item label="活动名称" :label-width="formLabelWidth">
          <el-input v-model="pojo.name" placeholder="活动名称"></el-input>
        </el-form-item>
        <el-form-item label="基本地址" :label-width="formLabelWidth">
          <el-input v-model="pojo.address" placeholder="基本地址"></el-input>
        </el-form-item>
        <el-form-item label="开始日期" :label-width="formLabelWidth">
          <el-date-picker v-model="pojo.starttime" type="date" placeholder="选择开始日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="截至日期" :label-width="formLabelWidth">
          <el-date-picker v-model="pojo.endtime" type="date" placeholder="选择截至日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="报名截止" :label-width="formLabelWidth">
          <el-date-picker v-model="pojo.enrolltime" type="date" placeholder="选择截至日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="活动详情" :label-width="formLabelWidth">
          <el-input v-model="pojo.detail" type="textarea" :rows="3" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="选择城市">
          <el-select v-model="pojo.city" placeholder="请选择城市">
            <el-option v-for="item in cityList" :key="item.value" :label="item.name" :value="item.id">
            </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="是否可见">
           <el-switch v-model="pojo.status" active-value="1" inactive-value="0" ></el-switch>
        </el-form-item>
        <el-form-item>
           <el-button type="primary">保存</el-button>
           <el-button type="primary" @click="dialogFormVisible = false">关闭</el-button>
        </el-form-item>
      </el-form>
      </el-dialog>

    当我们点击保存按钮的时候,则触发几个动作:①弹出消息提示框(消息内容来自于响应体中的message)  ②判断消息状态是否为true,为true则刷新列表(调用之前的刷新列表方法)  ③关闭窗口(设置dialogVisible = false),主要代码如下:

    <template>
    ...
        <el-form-item>
           <el-button type="primary" @click="handlerSave()">保存</el-button>
           <el-button type="primary" @click="dialogFormVisible = false">关闭</el-button>
        </el-form-item>
    ...
    </template>
    
    <script>
        ...
        methods:{
            handlerSave(){
              gatheringApi.save(this.pojo).then(response => {
              alert(response.message)
              if(response.flag){         //如果成功
              this.fetchData();        //刷新列表
            }
          })
          this.dialogFormVisible=false //关闭窗口
        }
        }
        ...
    </script>

     

    7、在列表显示页面右侧执行修改操作

    需求:在表格的操作列增加"修改"按钮,点击修改按钮弹出窗口并显示数据,点击保存按钮保存 修改并刷新表格。

    需求分析:在点击修改按钮时候,首先需要打开窗口(修改dialogVisible = true),其次获取点击的数据行id,根据该id查询数据并回显,在点击保存按钮时候,执行上面所讲的保存操作。

    由于我们使用Easy-Mock模拟数据,我们首先需要修改根据id查询数据的接口

    (1)修改easymock接口/gathering/gathering/{id} (GET)

    (2)修改src/api/gathering.js,增加方法定义

    findById(id) {
       return request({
          url: `/gathering/gathering/${id}`,
          method: 'get'
       })
    }
    

    (3)修改src/views/table/gathering.vue的js脚本部分,新增handleEdit()方法

    handleEdit(id){
       this.dialogFormVisible=true  //打开窗口
        gatheringApi.findById(id).then(response=>{
          if(response.flag){
            this.pojo=response.data
          }
        })
    }

    (4)在表格table中增加模板列 ,模板列中防止修改按钮,调用handleEdit方法

    <el-table-column
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.row.id)" type="text" size="small">修改</el-button>
          </template>
    </el-table-column>

    fixed="right"的作用是定义此列为右固定列slot-scope用于指定当前行的上下文。

    使用scope.row可以获取行对象,此处我们需要获得当前行的id,故使用scope.row.id

     

    展开全文
  • ElementUI框架引入和使用

    万次阅读 2019-07-01 19:47:18
    安装使用有两种方式 ①npm/cnpm安装到项目中 ②CDN引入 先介绍CDN引入 CDN全称:Content Delivery Network即内容分发网络。 CDN是构建在网络之上的内容分发网络,依靠部署在各地的边缘...可以进入ElementUI中文...

    安装使用有两种方式

    ①npm/cnpm安装到项目中
    ②CDN引入

    先介绍CDN引入
    CDN全称:Content Delivery Network即内容分发网络。
    CDN是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,
    简单说就是在网络引入文件
    在这里插入图片描述
    引入 ElementUI样式文件:在这里插入图片描述
    引入Vue和JS文件:
    在这里插入图片描述

    可以进入ElementUI中文网教程查看CDN引入
    点击进入ElementUI中文网教程

    接下来测试下element-ui是否加载成功

    HTML部分:
    	<div id="app">
    		<el-row>
    		  <el-button>默认按钮</el-button>
    		  <el-button type="primary">主要按钮</el-button>
    		  <el-button type="success">成功按钮</el-button>
    		  <el-button type="info">信息按钮</el-button>
    		  <el-button type="warning">警告按钮</el-button>
    		  <el-button type="danger">危险按钮</el-button>
    		</el-row>
    	</div>
    	
    	script标签部分:
    		 <script type="text/javascript">
    		  	new Vue({
    		      el: '#app',
    		      data: function() {
    		        return { visible: false }
    		      }
    		    })
    		  </script>
    

    网页样式:
    在这里插入图片描述

    npm/cnpm安装到项目中

    安装依赖包

    cnpm i element-ui --save
    

    在这里插入图片描述
    然后再安装cnpm i sass-loader node-sass -Dcnpm install style-loader -D(分开下载)
    在这里插入图片描述
    安装完后入口文件引入
    在这里插入图片描述
    webpack.base.conf.js添加配置
    build/build.js/webpack.base.conf.js
    在webpack.base.conf.js文件下module下rules数组末尾加上以下格式代码:
    在这里插入图片描述
    配置完成后重启项目,重启后验证是否引入成功,因为是再Vue中引入所以要写在组件的template内

    		<el-tooltip :content="'Switch value: ' + value" placement="top">
    			 <el-switch
    			    v-model="value"
    			    active-color="#13ce66"
    			    inactive-color="#ff4949"
    			    active-value="100"
    			    inactive-value="0">
    			  </el-switch>
    		</el-tooltip>
    			
    			<script>
    				  export default {
    				    data() {
    				      return {
    				        value: '100'(如果模板内有导出则只需要加入value数据而已)
    				      }
    				    }
    				  };
    			</script>
    

    进入页面查看效果:
    在这里插入图片描述
    在这里插入图片描述

    自定义主题

    在src下建立element-variables.scss文件(名字自定义)
    在这里插入图片描述
    创建完成后在该文件加入以下代码“:

    		/* 改变主题色变量 */
    		$--color-primary: yellow;
    		/* 改变 icon 字体路径变量,必需 */
    		$--font-path: '../node_modules/element-ui/lib/theme-chalk/fonts';
    		@import "../node_modules/element-ui/packages/theme-chalk/src/index";
    

    加入后在入口文件引入:
    在这里插入图片描述
    验证效果

    	  <div class="block">
    		<span class="demonstration">默认</span>
    		<el-slider v-model="value11"></el-slider>
    	  </div>
    	  <div class="block">
    		<span class="demonstration">自定义初始值</span>
    		<el-slider v-model="value2"></el-slider>
    	  </div>
    	  <div class="block">
    		<span class="demonstration">隐藏 Tooltip</span>
    		<el-slider v-model="value3" :show-tooltip="false"></el-slider>
    	  </div>
    	  <div class="block">
    		<span class="demonstration">格式化 Tooltip</span>
    		<el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
    	  </div>
    	  <div class="block">
    		<span class="demonstration">禁用</span>
    		<el-slider v-model="value5" disabled></el-slider>
    	  </div>
    
    	<script>
    	  export default {
    	    data() {
    	      return {
    	        value1: 0,
    	        value2: 50,
    	        value3: 36,
    	        value4: 48,
    	        value5: 42
    	      }
    	    },
    	    methods: {
    	      formatTooltip(val) {
    	        return val / 100;
    	      }
    	    }
    	  }
    	</script>
    
    展开全文
  • elementUi——适合于Vue的UI框架

    万次阅读 多人点赞 2018-06-21 09:18:35
    简介element-ui是一个ui库,它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。Layout布局(el-row、el-col)element-ui借用了bootstrap框架的思想,使用了栅格布局。它把单一的分栏分为24列。...

    简介

    element-ui是一个ui库,它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。

    Layout布局(el-row、el-col)

    element-ui借用了bootstrap框架的思想,使用了栅格布局。它把单一的分栏分为24列。基本的使用方式如下

    <el-row>
            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          </el-row>

    span属性:表示col所要占领的栅格占比个数。 
    offset属性:表示col相对偏移的个数。

    Container布局容器

    这些布局容器,一般充当div来使用。

    el-container:外层容器。当子元素中包含 el-header 或 el-footer 时,全部子元素会垂直上下排列,否则会水平左右排列。

    el-header:顶栏容器

    el-footer:底部栏容器

    el-aside:侧边栏容器

    el-main:页面主视图

    icons的使用

    在element-ui 中,图标是用class就可以搞定的。

    比如一个编辑的图标就可以如下表示:

    <i class="el-icon-edit"></i>

    按钮(el-button)

    按钮是el-button来表示的

    按钮是分类的,每一种类型就对应不同的button。

    按钮的类型type可取值:’primary’、’success’、’warning’、’info’、’danger’

    plain:决定了按钮是否使用素色系列。

    round:决定了按钮是不是圆角展示。

    <div class="flex-box">
          <h2>各种button</h2>
          <el-row class="flex1 margin-left10">
            <el-col :span="3"><el-button>默认按钮</el-button></el-col>
            <el-col :span="3"><el-button type="primary">主要按钮</el-button></el-col>
            <el-col :span="3"><el-button type="success">成功按钮</el-button></el-col>
            <el-col :span="3"><el-button type="warning">警告按钮</el-button></el-col>
            <el-col :span="3"><el-button plain>默认按钮</el-button></el-col>
            <el-col :span="3"><el-button round>默认按钮</el-button></el-col>
          </el-row>
        </div>

    级联选择(el-cascader)

    这里写图片描述

    //组件
    <el-cascader
     :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>
    //data数据
    options: [{
      value:'1',
      label:'components',
      children: [{
        label:'input'
      },{
        label:'swiper'
      }]
    },{
      value:'1',
      label:'views'
    },{
      value:'1',
      label:'actions'
    }]

    TimePicker 时间选择器

    picker-options是一个对象。

    这个对象的属性有start、step、end、selectableRange等。

    当设置selectableRange属性时,它提供了一个时间选择的点。

    <el-time-select
      v-model="value1"
      :picker-options="{
          start:'08:30',
          step:'00:15',
          end:'18:30'
      }"
      placeholder="选择时间"
    ></el-time-select>

    日期选择器

    日期选择器的type属性,决定选择的类型,这个type可以是date、week、month、year。

    <el-date-picker
      v-model="valueDate"
      type="date"
      placeholder="选择日期">
    </el-date-picker>

    <el-date-picker
        type='week'
        v-model='value'
        placeholder='选择周'
    >
    </el-date-picker>

    DateTimePicker 日期时间选择器

    本质就是把type改为datetime。

    <el-date-picker
     v-model="value1"
      type="datetime"
      placeholder="选择日期时间">
    </el-date-picker>
    • form表单

    element-ui的form表单组件:el-form

    element-ui的formItem组件:el-form-item

    一个简单的form表单的实现如下:

    <el-form :model=''>
        <el-form-item label='用户名'>
            <el-input></el-input>
        </el-form-item>
        <el-form-item label='密码'>
            <el-input></el-input>
        </el-form-item>
    </el-form>

    form表单还有验证:form的rules就是用来验证使用。

    Table 表格

    el-table:element-ui的表格。

    el-table-column:element-ui的表格所对应的列。

    table属性中:stripe属性可以创建带斑马纹的表格。

    table属性中:border属性可以创建带斑马纹的表格。

    table属性中:height属性可实现固定表头的表格。

    <el-table
       :data="tableData"
       style="width: 100%"
       height="200"
     >
       <el-table-column fixed width="120" label="日期" prop="date"></el-table-column>
       <el-table-column width="120" label="姓名" prop="name"></el-table-column>
       <el-table-column width="360" label="地址" prop="address"></el-table-column>
     </el-table>

    Carousel 走马灯

    其实就相当于一个轮播

    type属性:可以让轮播卡片化

    interval属性:定义轮播切换的周期

    <el-carousel height="150px">
     <el-carousel-item v-for="item in 4" :key="item">
        <h3>{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>

    Collapse 折叠面板

    折叠面板的el-collapse-item需要title属性。

    <el-collapse-item title="一致性 Consistency" name="1">
      <div>与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;</div>
      <div>在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。</div>
    </el-collapse-item>

    Navigation 导航

    el-menu

    el-menu:表示导航菜单的盒子。 
    el-submenu:表示导航菜单的子盒子选项。 
    el-menu-item:表示导航菜单的每一项。

    其中submenu和munuitem都是用于属性index。

    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">处理中心</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我的工作台</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
      </el-submenu>
      <el-menu-item index="3">订单管理</el-menu-item>
    </el-menu>

    el-tabs

    <el-tabs v-model="activeName">
        <el-tab-pane label="用户管理" name="first">
            用户管理
        </el-tab-pane>
    </el-tabs>

    Tree 树形控件

    data属性:代表着树形组件的渲染。

    <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>

    来源: https://blog.csdn.net/mapbar_front/article/details/79102167

    展开全文
  • VueJS可以说是近些年来最火的前端框架之一,越来越...其中ElementUI,就是饿了么团队开发的一款基于vue的前端组件库。构建网站的必备环境: NodeJS(npm) Webstorm (前端IDE) Nginx(后期用来转发请求到后台服...

    VueJS可以说是近些年来最火的前端框架之一,越来越多的网站开始使用vue作为前端框架,vuejs轻量、简单,对于前端友好,学习路线平坦,这使得前端开发变得更加简易,而基于vuejs的前端组件库也越来越多。其中ElementUI,就是饿了么团队开发的一款基于vue的前端组件库。构建网站的必备环境:

    • NodeJS(npm)
    • Webstorm (前端IDE)
    • Nginx(后期用来转发请求到后台服务器)

    由于我们需要使用npm的包管理器,所以首先得先安装nodejs,  直接在node官网下载

    windows系统直接下载  .msi。下载完毕直接双击安装就ok啦

    安装完毕,打开cmd 输入命令 npm -v 查看是否安装成功以及版本

    打开webstorm,点击左上角File->New->Edit File Templates,在弹出的对话框中点击左上角的绿色加号,然后按照如图显示填写Name和Extension,

    在下方橙色区域的代码段内填写

    <template>
        <div>
        </div>
    </template>
    <script type="text/ecmascript-6">
        export default {
            data(){
                return {
    
                }
            }
        }
    </script>
    

    然后点击apply,再点击ok即可。现在我们再次点击左上角File->New,可以看到刚才创建的vue template已经出现了。我们点击vue template,名称填写test,可以看到新创建的文件就是刚才我们创建的模版的样子,如图。 

    然后再设置编辑器的为ES6语法 如图

    创建ElementUI工程

    ① 使用 git 命令git clone https://github.com/ElementUI/element-starter.git下载官方提供的模板, 
    ② 使用cnpm intsall下载依赖的模块(没有淘宝镜像 cnpm 可以使用npm install) 
    ③ 使用npm run dev运行项目

    可以看到里面已经集成了bable、webpack等插件。不需要我们自己去配置。我们导入这个工程之后,需要做的一件事就是将npm模块安装到这个目录下。我们打开命令行,进入当前工程的根目录,然后输入

    npm install

    如果安装速度较慢,可以使用npm依赖包在国内由阿里云提供的镜像,如下所示

    npm install --registry=http://registry.npm.taobao.org

    点击回车。

    安装结束后我们可以看到工程目录下多了一个node_modules的文件夹,该文件夹就是工程的依赖包所在。以后我们如果想添加依赖包,就可以继续用上文的指令,例如如果想加入vue-router,那么需要输入

    npm install vue-router --save

    npm会自动寻找最新版本的依赖包进行安装。

    工程打包运行

    安装好依赖之后,我们可以对工程进行打包和运行。我们仍然是使用命令行,进入当前工程的目录,并输入

    npm run dev

    这段代码的意思就是以本地服务器的端口启动这个工程。关于本地服务器的配置信息,在工程根目录的webpack.config.js中,我们可以在该文件中看到如下代码段:

    devServer: {
        host: '127.0.0.1',
        port: 8010,
        proxy: {
          '/api/': {
            target: 'http://127.0.0.1:8080',
            changeOrigin: true,
            pathRewrite: {
              '^/api': ''
            }
          }
        },
    •  

    这里的配置信息写的很清楚,本地的服务器端口为8010,如果我们想改变端口号或主机名,只要改变这里对应的字段即可。 
    我们输入npm run dev后,会出现一长串信息,最后会出现webpack: Compiled successfully的字样,代表我们的代码编译成功。这时我们打开浏览器,输入localhost:8010,出现如图所示的网页,表示我们的第一个Vuejs2.0 +ElementUI工程已经成功运行。 

     

    点击图中的Let’s do it按钮,可以看到右侧有一个提醒消息飘出来,这就是ElementUI中的一个组件。 

    至此一个简单的基于VueJs2.0和ElementUI的前端网站的雏形已经完成了,接下来的时间我会慢慢介绍构建单页面应用的更多方法和细节。

     


    想要整理更多的碎片知识,扫码关注下面的公众号,让我们在哪里接着唠!

    展开全文
  • 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-cli 是vue.js的脚手架,用于自动生成...
  • elementUI简单应用以及nodeJs配置

    千次阅读 2019-08-05 21:48:43
    elementUI的简单应用 ElementUI简介: 我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件, 数据等是非常麻烦的, 所以饿了吗推出了基于VUE2.0的组件库,它的名称叫做...
  • Element-UI安装和项目开发

    万次阅读 2018-08-21 09:12:07
    方法一:引入CDN 使用起来最简单的方法,直接引入CDN就可以工作了 &lt;!-- 引入样式 --&gt; &lt;link rel="stylesheet" href="...&gt; &lt;!-- 先引入 Vue --&...
  • element-ui简单使用

    千次阅读 2018-12-17 11:18:00
    import ElementUI from ‘element-ui’; import ‘element-ui/lib/theme-chalk/index.css’; Vue.use(ElementUI); 3.sublime text安装element-ui代码片段插件 打开sublime text的安装目录,找到存放插件...
  • elementUi

    2020-07-25 23:32:36
    elementUi vue ui 前端
  • elementUi的使用

    千次阅读 2017-11-17 15:16:15
    官网:http://element.eleme.io/1.安装 npm i element-ui -D(–save-dev) npm i element-ui -S2.引入在main.js3.记得在webpack.config.js中增加报错的话可能要手动安装css-loader和style-loader4.App.vuecss想要用...
  • element-ui移动端rem适配

    万次阅读 2018-10-09 17:18:25
    https://segmentfault.com/a/1190000015238394
  • iview与elementui对比

    千次阅读 2020-05-14 17:02:42
    elementui中的table表格组件包含行列的合并单元格;iview的table表格组件只提供了表头的合并单元格;如果表格涉及合并单元格建议使用elementui ivew的整体风格比较清新,适合后台管理系统 两者都可以按需引入 ...
  • ElementUI官方介绍 开发API文档链接

    万次阅读 2018-11-22 18:01:27
    ElementUI官方介绍 开发API文档     http://element-cn.eleme.io/#/zh-CN/component/quickstart    
  • 关于ElementUi的详细文档欢迎大家访问官网,本节为大家介绍一款通过拖拽配置即可辅助我们开发ElementUI 让你的开发之旅变得有趣起来,大大降低element开发门槛,提升开发效率 等不及的可以直接访问 去体验...
  • 为什么80%的码农都做不了架构师?>>> ...
  • vue + elementui 新手入门案例

    千次阅读 2019-03-06 11:08:14
    vue + elementui 新手入门案例 vue vue-router axios vuex webpack elementui 接口在elementui-api中,采用spring boot 开发内置功能点: 登录 未登录判断拦截 不同用户显示不同菜单 api请求统一封装 vuex状态控制...
  • vue+elementUI+后台管理系统

    万次阅读 2019-07-10 18:36:55
    网上资源: 如图 项目使用介绍:https://panjiachen.github.io/vue-element-admin-site/ 项目地址:https://github.com/PanJiaChen/vue-element-admin/ ... 欢迎小白前来学习,这里有最基础的前端技术学...
  • elementui下拉框从后台获取数据动态显示

    万次阅读 热门讨论 2019-04-09 08:58:49
    html部分: vue部分: 效果:
  • 饿了么组件elementUI的导航el-menu点击默认可以路由跳转,怎么可以在上面添加@click绑定自定义新的事件?
  • 给form添加一个ref属性 &lt;el-form ref="paper"&gt;&lt;/el-form&gt;   调用方法,注意先清空验证再清空表单,这样就可以清除自定义的表单验证器了。 this.$refs.paper.......
1 2 3 4 5 ... 20
收藏数 26,946
精华内容 10,778
关键字:

elementui