Element-Ui

已于 2023-05-06 11:53:28 修改
阅读量6.6w 收藏 76
点赞数 22
分类专栏： Web 文章标签： ui vue.js elementui
于 2021-12-07 20:58:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zyw907155124/article/details/121778505
版权
本文详细介绍了如何从零开始搭建Vue.js项目，包括安装Node.js、使用Vue CLI、安装Element UI框架，并展示了如何在项目中创建组件、实现时间选择器、动画效果、左侧导航栏、路由跳转、axios请求数据以及Mock数据的使用。同时，还演示了如何处理安装过程中的错误，以及如何在Vue项目中实现表格和分页功能。
摘要由CSDN通过智能技术生成

安装环境搭建

Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，手机端有对应框架是Mint UI 。

中文文档：http://element-cn.eleme.io/#/zh-CN github地址：https://github.com/ElemeFE/element

1：安装node

端开发框架和环境都是需要 Node.js ，先安装node.js开发环境，vue的运行是要依赖于node的npm的管理工具来实现，下载https://nodejs.org/en/，安装完成之后，打开cmd开始输入命令。（我用的是win10系统，所以需要管理员权限，右键点击以管理员身份运行cmd），不然会出现很多报错。

2：查看node的版本号

下载好node之后，以管理员身份打开cmd管理工具，，输入 node -v ，回车，查看node版本号，出现版本号则说明安装成功。

输入命令： node -v

3：安装淘宝npm镜像

由于npm是国外的，使用起来比较慢，我们这里使用淘宝的cnpm镜像来安装vue. 淘宝的cnpm命令管理工具可以代替默认的npm管理工具。

输入命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

4：安装全局vue-cli脚手架

淘宝镜像安装成功之后，我们就可以全局vue-cli脚手架，输入命令：cnpm install --global vue-cli 回车；验证是否安装成功，在命令输入vue，出来vue的信息，及说明安装成功；

输入命令：cnpm install --global vue-cli

5：开始进入主题，初始化一个vue项目

我这里是在d盘里面新建一个项目，先用d:的命令，回车键进入d盘；回车键默认创建项目信息。

vue init webpack itemname

出现这样的提示，初始化成功

运行初始化demo，输入命令npm run dev；运行一下初始后的demo，弹出访问地址，如果没有问题则进行安装elementUI；准备好好之后，开始引入饿了么elementUI组件。

6：安装 elementUI

npm i element-ui -S

快捷键ctrl+c,终止批处理操 作吗(Y/N)，在输入命令npm i element-ui -S

注意：安装过程中出现这样的bug的时候，需要解决

解决办法：尝试 删除项目中的 package-lock.json 文件 和 node_modules 文件夹，然后再尝试 npm install.

成功安装组件显示如下

7：在components文件夹下面创建test.vue文件，复制一段elementUI官方文档的代码，进行测试

<template>
    <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
        <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">
            <a href="https://www.ele.me" target="_blank">订单管理</a>
        </el-menu-item>
    </el-menu>
</template>

<script>
    export default {
        data() {
            return {
                activeIndex: '1',
                activeIndex2: '1'
            };
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>

8：在App.vue中引入test.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <Test></Test>
  </div>
</template>

<script>
    import Test from './components/test.vue'
    
export default {
    components:{
  Test,
 },
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

9：打开main.js,加入element-ui的js和css

import ElementUI from 'element-ui' //element-ui的全部组件
import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
Vue.use(ElementUI) //使用elementUI

10：再次运行，组件中的效果如下：

输入命令：

npm run dev

时间选择器

打开test.vue文件，开始写代码

<template>
  <div>
  <el-time-picker
    is-range
    v-model="value"
    range-separator="-"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    placeholder="选择时间范围">
  </el-time-picker>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        value: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
      
      };
    }
  }
</script>

npm run dev 运行，浏览器显示如下,实现了一个简单的时间选择器

出现和隐藏动画

点击按钮的时候，元素会呈现一个出现和隐藏的动画功能。

<template>
  <div>
    <el-button @click="show = !show">点击按钮</el-button>
    <div style="display: flex; margin-top: 20px; height: 100px;">
      <transition name="el-fade-in-linear">
        <div v-show="show" class="transition-box">我会消失在人海之中</div>
      </transition>
    </div>
  </div>
</template>
<script>
    export default {
    data: () => ({
      show: true
    })
  }
</script>
<style>
  .transition-box {
    margin-bottom: 10px;
    width: 300px;
    height: 100px;
    border-radius: 4px;
    background-color: #42B983;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-left: 520px;
  }
</style>

左侧导航栏

在用Element UI框架的时候

<template>
  <div>
   <el-row class="tac">
   <el-col :span="4">   
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-s-platform"></i>
          <span>服务大厅</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="1-1">在场服务</el-menu-item>
          <el-menu-item index="1-2">历史服务</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
       <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-s-tools"></i>
          <span>系统设置</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="1-1">权限管理</el-menu-item>
          <el-menu-item index="1-2">角色管理</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-user-solid"></i>
          <span>人员数据</span>
        </template>
        <el-menu-item-group>        
          <el-menu-item index="1-1">人员数量</el-menu-item>
          <el-menu-item index="1-2">人员位置</el-menu-item>
        </el-menu-item-group>
      </el-submenu>      
      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-message-solid"></i>
          <span>健康报警</span>
        </template>
        <el-menu-item-group>       
          <el-menu-item index="1-1">心率报警</el-menu-item>
          <el-menu-item index="1-2">血压报警</el-menu-item>
        </el-menu-item-group>
      </el-submenu>     
    </el-menu>
  </el-col>
</el-row>
  </div>
</template>
<script>
  export default {
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

导航菜单效果如下所示

## 导航栏跳转路由

### 1：components 新建页面

### 2：打开app.vue写代码

<template>
  <div>
   <el-col :span="2">   
    <el-menu
      :default-active="this.$route.path" 
      router mode="horizontal"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
        <template slot="title">
          <i class="el-icon-s-platform"></i>
          <span> {{ item.navItem }}</span>
        </template>

      </el-menu-item>
       
        
    </el-menu>
  </el-col>
  
  <router-view     class="menu-right"/>

  </div>
</template>
<script>
  export default {
    data() { 
        return { 
            navList:[ 
            {name:'/components/ServiceHall',navItem:'服务大厅'}, 
            {name:'/components/Management',navItem:'权限管理'},
            {name:'/components/User',navItem:'用户管理'}, 
            {name:'/components/Personnel',navItem:'人员数据'}, 
            {name:'/components/Alarm',navItem:'报警中心'}, 
            ] } 
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<style>
    .menu-right{
        margin-left:200px;
    }
    
</style>

3：路由index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import ServiceHall from '@/components/ServiceHall'
import Management from '@/components/Management'
import User from '@/components/User'
import Personnel from '@/components/Personnel'
import Alarm from '@/components/Alarm'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
     {
      path: '/components/ServiceHall',
      name: 'ServiceHall',
      component: ServiceHall
    }, {
      path: '/components/Management',
      name: 'Management',
      component: Management
    },
     {
      path: '/components/User',
      name: 'User',
      component: User
    },{
      path: '/components/Personnel',
      name: 'Personnel',
      component: Personnel
    },{
      path: '/components/Alarm',
      name: 'Alarm',
      component: Alarm
    }
  ]
})

4：新页面的内容

<template>  
    <div>
    我是权限管理页面
    </div>  
</template>
<script>
</script>
<style>
</style>

5：效果就可以看了

axios请求数据

1：进入项目，npm安装

   npm install axios --save

2.在main.js下引用axios

  import axios from 'axios'

3:准备json数据

自己写了一个json数据，放在服务器上，现在要通过vue项目调用数据 http://www.intmote.com/test.json

4：跨域问题，设置代理，利用proxyTable属性实现跨域请求

在config/index.js 里面找到proxyTable ：{} ，然后在里面加入以下代码

   proxyTable: {
  '/api': {
    target: 'http://www.intmote.com',//设置你调用的接口域名和端口号 别忘了加http
    changeOrigin: true,//允许跨域
    pathRewrite: {
      '^/api': '' //这个是定义要访问的路径，名字随便写 
    }
  }
},

5:打开一个界面User.vue，开始写请求数据的方法

 methods: {
            getData() {
                axios.get('/api/test.json').then(response => {
                    console.log(response.data);
                }, response => {
                    console.log("error");
                });
            }
        }

User.vue参考代码：

<template>
    <div id="app">
    </div>
</template>
<script>
    import axios from "axios";
    export default {
        name: "app",
        data() {
            return {
                itemList: []
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData() {
                axios.get('/api/test.json').then(response => {
                    console.log(response.data);
                }, response => {
                    console.log("error");
                });
            }
        }
    }
</script>

6：再次运行npm run dev

这个时候，我们可以看见，请求的数据

Mock的使用

1：在项目里面新建一个mock文件夹，在mock文件夹里面新建一个test.json文件

test.json:

{
    "first":[

        {"name":"520","nick":"我爱你"},

        {"name":"521","nick":"我愿意"},

        {"name":"1314","nick":"一生一世"}
    ]

}

2：在build目录下找到webpack.

// mock code
const express = require('express')
const app = express()
const posts = require('../mock/test.json') 
const routes = express.Router()
app.use('/api', routes)

// 如果是post请求，那么将get改为post即可
devServer: {
 ...
 before(app){
 app.get('/api/test', (req, res) => {
  res.json(posts)
 })

 }
}

 

dev.conf.js文件，编写以下代码

3：浏览器输入http://localhost:8080/api/test

成功看到模拟数据

4：使用第三方http请求库axios进行ajax请求

 methods: {
            getData() {
                axios.get('http://localhost:8080/api/test').then(response => {
                    console.log(response.data);
                }, response => {
                    console.log("error");
                });
            }
        }

vue页面代码参考

<template>
    <div id="app">
    </div>
</template>
<script>
    import axios from "axios";
    export default {
        name: "app",
        data() {
            return {
                itemList: []
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData() {
                axios.get('http://localhost:8080/api/test').then(response => {
                    console.log(response.data);
                }, response => {
                    console.log("error");
                });
            }
        }
    }
</script>

5:在浏览器里面，我们可以看到，mock里面的数据请求成功显示如下

页面渲染

其实步骤很简单，代码如下

<template>
    <div id="app">
  <div v-for="item in itemList">
    <span>{{item.name}}</span>
    <span>{{item.nick}}</span>
  </div>
    </div>
</template>
<script>
    import axios from "axios";
    export default {
        name: "app",
        data() {
            return {
                itemList: []
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData() {
                axios.get('http://localhost:8080/api/test').then(response => {
                    console.log(response.data);
                   this.itemList =response.data.first;
                }, response => {
                    console.log("error");
                });
            }
        }
    }
</script>

打开界面，既可以看到，所需要的数据一家展示在前端的界面了

axios表格分页

接着之前的项目继续写，打开一个vue界面，在里面写如下代码：

<template>
    <div>
        <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
            <el-table-column prop="id" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="price" label="地址">
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination 
                @size-change="handleSizeChange" 
                @current-change="handleCurrentChange" 
                :current-page="currentPage" 
                :page-sizes="[5, 10, 20, 40]" 
                :page-size="pagesize" 
                layout="total, sizes,prev, pager, next" 
                :total="tableData.length" 
                prev-text="上一页" 
                next-text="下一页">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    import axios from "axios";
    export default {
        name: "app",
        data() {
            return {        
                currentPage: 1, //默认显示页面为1
                pagesize: 5, //    每页的数据条数
                tableData: [], //需要data定义一些，tableData定义一个空数组，请求的数据都是存放这里面
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData() {
                axios.get('http://localhost:8080/api/test').then(response => {
                    console.log(response.data);
                    this.tableData = response.data;
                }, response => {
                    console.log("error");
                });
            },
            //每页下拉显示数据
            handleSizeChange: function(size) {
                this.pagesize = size;
                /*console.log(this.pagesize) */
            },
            //点击第几页
            handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage;
                /*console.log(this.currentPage) */
            },

        }
    }
</script>

test.json

 [  
        {  
            "id": 0,  
            "name": "Item 0",  
            "price": "徐家汇"  
        },  
        {  
            "id": 1,  
            "name": "Item 1",  
            "price": "$1"  
        },  
        {  
            "id": 2,  
            "name": "Item 2",  
            "price": "$2"  
        },  
        {  
            "id": 3,  
            "name": "Item 3",  
            "price": "徐家汇"  
        },  
        {  
            "id": 4,  
            "name": "Item 4",  
            "price": "徐家汇"  
        },  
        {  
            "id": 5,  
            "name": "Item 5",  
            "price": "$5"  
        },  
        {  
            "id": 6,  
            "name": "Item 6",  
            "price": "$6"  
        },  
        {  
            "id": 7,  
            "name": "Item 7",  
            "price": "$7"  
        },  
        {  
            "id": 8,  
            "name": "Item 8",  
            "price": "徐家汇"  
        },  
        {  
            "id": 9,  
            "name": "Item 9",  
            "price": "$9"  
        },  
        {  
            "id": 10,  
            "name": "Item 10",  
            "price": "$10"  
        },  
        {  
            "id": 11,  
            "name": "Item 11",  
            "price": "$11"  
        },  
        {  
            "id": 12,  
            "name": "Item 12",  
            "price": "徐家汇"  
        },  
        {  
            "id": 13,  
            "name": "Item 13",  
            "price": "$13"  
        },  
        {  
            "id": 14,  
            "name": "Item 14",  
            "price": "$14"  
        },  
        {  
            "id": 15,  
            "name": "Item 15",  
            "price": "$15"  
        },  
        {  
            "id": 16,  
            "name": "Item 16",  
            "price": "徐家汇"  
        },  
        {  
            "id": 17,  
            "name": "Item 17",  
            "price": "$17"  
        },  
        {  
            "id": 18,  
            "name": "Item 18",  
            "price": "$18"  
        },  
        {  
            "id": 19,  
            "name": "Item 19",  
            "price": "徐家汇"  
        },
        
        {  
            "id": 20,  
            "name": "Item 20",  
            "price": "$20"  
        }  
    ]

效果如下 

到这里就成功的实现了一个表格和分页了，数据是用mock模拟的，实际中换成后端的接口就可以了 。

柚几哥哥
关注
专栏目录
elementUi 　
06-17
elementUi vue ui 前端
element-ui.rar element-ui核心库压缩包
12-20
Element UI 是一个基于 Vue.js 的开源 UI 组件库，它为开发者提供了丰富的界面组件，用于构建优雅的前端应用。这个“element-ui.rar”压缩包包含了 Element UI 的核心库，是开发人员快速搭建企业级 Web 应用的重要...
Element-UI入门
最新发布
与时俱进，一专多能。
06-09 3078
Element-UI 是一款功能强大、使用便捷的 Vue 组件库，通过其丰富的组件和优秀的文档支持，极大地提升了开发者的效率和代码质量。虽然有一些不足之处，但其强大的功能和广泛的应用场景使其成为众多开发者的首选工具。未来，随着不断的发展和优化，Element-UI 有望在更多领域中发挥重要作用。
Vue框架Element UI安装环境搭建
前端视听
09-10 1万+
Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，手机端有对应框架是Mint UI 。 中文文档：http://element-cn.eleme.io/#/zh-CN github地址：https://github.com/ElemeFE/element 1：安装node 端开发框架和环境都是需要 Node.js ，先安装node.js开发环境，vue的运行是要依赖于node的npm的管理工具
Element UI
qq_52469095的博客
02-01 1万+
VUE 框架中 Element-UI 组件入门
ElementUI-----UI框架
热门推荐
qq_40132294的博客
05-17 6万+
ElementUI是由饿了么团队开源的UI框架，并于Vue完美契合。
Element-UI
qq_50048558的博客
10-26 1万+
一、Element-UI介绍 element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库，方便程序员进行页面快速布局和构建 Element-UI官方站点：点击此处 https://element.eleme.cn/#/zh-CN 二、Element-UI使用 1.命令行方式安装 创建 一个新的项目 当前项目下打开终端, 安装依赖包 ,执行下面的命令 npm i element-ui -S 打开 main.js , 导入Element-UI 相关资源. main.js是工程的入口文件
element-ui资源包
08-03
Element UI 是一个基于 Vue.js 的开源 UI 组件库，它为开发者提供了丰富的组件，以便快速构建美观、响应式的用户界面。这个"element-ui资源包"包含了所有你需要在前端项目中使用 Element UI 的必要文件和资源。 ...
element-ui 2.15.9下载到本地资源最新版本压缩包（附element-ui本地引用方法）
06-04
本地引用示例： <!... <title>my ... <link rel="stylesheet" href="/my/html/element-ui/lib/theme-chalk/index.css"> <el-row> <el-col :span="24"><div class="myclass"></div></el-col> </el-row>
Element-ui 2.15.9版本
07-09
Element-ui 是一个基于 Vue.js 的开源 UI 组件库，它为开发者提供了丰富的组件，用于构建美观、可复用且响应式的用户界面。2.15.9 版本是 Element-ui 的一个稳定版本，可能包含了错误修复、性能优化以及新功能的添加...
element ui
04-09
饿了吗开发文档，还全面，很精细，
Element-UI升级后，el-table不显示 空白问题 备份包 资源备份
10-26
Element-UI是一款基于Vue.js的开源UI组件库，它提供了丰富的界面组件，如表格（el-table）、按钮、提示、下拉菜单等，极大地简化了Web前端开发过程。然而，在进行Element-UI版本升级时，可能会遇到一些兼容性或配置...
Element-UI-快速入门（极简教程）
qq_33820545的博客
09-11 3万+
文章目录4. ElementUI4.1 ElementUI介绍4.2 常用组件4.2.1 Container 布局容器4.2.2 Dropdown 下拉菜单4.2.3 NavMenu 导航菜单4.2.4 Table 表格4.2.5 Pagination 分页4.2.6 Message 消息提示4.2.7 Tabs 标签页4.2.8 Form 表单 4. ElementUI 4.1 ElementUI介绍 ElementUI是一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发人员快
Element-UI详解
科技追踪者的专栏
05-22 1万+
Element-UI 是一个功能强大、使用便捷的 Vue.js UI 组件库，它为开发者提供了一整套解决方案，大大提高了前端开发的效率和质量。通过本文的介绍，相信你已经对 Element-UI 有了深入的了解。无论是企业后台、内容管理系统还是在线教育平台，Element-UI 都能帮助你快速构建出高质量的应用。希望你在实际项目中能充分利用 Element-UI 的强大功能，开发出更多优秀的应用。
网站快速成型工具-Element UI
weixin_48143996的博客
12-06 6301
Element UIElement UI1 什么是Element UI？？？？2 搭建环境2.1 创建vue项目2.2 安装 element-ui组件2.3 Element UI 引入3 布局3.1 布局3.2 reset.css3.3 满屏填充4 导航条4.1 需求4.2 导航条4.3 路由4.4 页面刷新导航选中问题5 表格：查询列表5.1 测试页面5.2 基本表格5.3 表格修饰5.4 多选![在这里插入图片描述](https://img-blog.csdnimg.cn/87a16b32f4a447e
element -ui
03-20
Element-UI是一个基于Vue.js的组件库，用于构建Web界面的用户界面库。它提供了丰富的可重用组件，包括按钮、表单、弹窗、导航等等，可以帮助开发者快速构建现代化的Web应用程序。 要使用Element-UI，你需要引入...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柚几哥哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值