在Vue项目中使用Element组件

绝地灬酷狼 2024-03-26 15:47 97阅读 0赞

## 0 写在前面 ##

使用组件可以快速进行开发，使用Element UI轻松制作出网页，为前端开发人员大大减轻了代码负担，即使是后端程序员也可以快速上手做出比较精美的界面。  
本文记录如何在Vue项目中使用Element。

## 1 安装 ##

推荐使用`npm i element-ui -S`命令直接下载。  
图文演示：(本文是在WebStream下演示，一下与软件无关，使用任何地方的终端结果都是一样的）  
在创建好的Vue目录下直接输入命令`npm i element-ui -S`  
![在这里插入图片描述][ca3a340d626f4179ba1b644be9bb0e8c.png]

![在这里插入图片描述][bdc0c6ef296745f699be4aace9eff207.png]  
出现element -ui@版本号就代表安装成功了。

## 2 配置 ##

在根目录下的main.js中作以下配置

import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    
    Vue.use(ElementUI);
    
    new Vue({
        
        store,
        mainPage,
        render: function (h) {
        
            return h(App)
        }
    }).$mount('#app')

重点就是引用并使用

import ElementUI from 'element-ui';
    Vue.use(ElementUI);

![在这里插入图片描述][20b37608a56c45b2b00febe19a7fc21f.png]

## 3 使用组件 ##

打开[Element-网站快速成型工具][Element-]选择组件  
![在这里插入图片描述][543629ba83bd40619428605cf0061efa.png]  
选择自己需要的组件  
![在这里插入图片描述][70a27e5220ab4b26b9d6b111b044c823.png]  
这里以按钮为例  
![在这里插入图片描述][b99c3ae5302e45d595ed2cd7dba61019.png]  
它们所对应的代码为：

<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>
    
    <el-row>
      <el-button plain>朴素按钮</el-button>
      <el-button type="primary" plain>主要按钮</el-button>
      <el-button type="success" plain>成功按钮</el-button>
      <el-button type="info" plain>信息按钮</el-button>
      <el-button type="warning" plain>警告按钮</el-button>
      <el-button type="danger" plain>危险按钮</el-button>
    </el-row>
    
    <el-row>
      <el-button round>圆角按钮</el-button>
      <el-button type="primary" round>主要按钮</el-button>
      <el-button type="success" round>成功按钮</el-button>
      <el-button type="info" round>信息按钮</el-button>
      <el-button type="warning" round>警告按钮</el-button>
      <el-button type="danger" round>危险按钮</el-button>
    </el-row>
    
    <el-row>
      <el-button icon="el-icon-search" circle></el-button>
      <el-button type="primary" icon="el-icon-edit" circle></el-button>
      <el-button type="success" icon="el-icon-check" circle></el-button>
      <el-button type="info" icon="el-icon-message" circle></el-button>
      <el-button type="warning" icon="el-icon-star-off" circle></el-button>
      <el-button type="danger" icon="el-icon-delete" circle></el-button>
    </el-row>

举例：

<template>
      <el-row>
        <el-button>我是默认按钮</el-button>
        <el-button type="primary">蓝色的按钮</el-button>
        <el-button type="success" plain>plain代表朴素</el-button>
        <el-button type="info" round>round能改变为圆角</el-button>
        <el-button type="warning"round plain>警告按钮</el-button>
        <el-button type="danger">危险危险危险</el-button>
      </el-row>
    </template>

启动后：  
![在这里插入图片描述][08ecf3013e934bf681e940dad262c903.png]

## 4 写在最后 ##

以上为安装，配置，使用的方法，在此简单记录一下。

[ca3a340d626f4179ba1b644be9bb0e8c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/0295ba0b08254ebeb42ee9be3ed0ee81.png
[bdc0c6ef296745f699be4aace9eff207.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f5ee03967f1e45639b788f77896b9823.png
[20b37608a56c45b2b00febe19a7fc21f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/63a9d64552e74ce29c62ad3e0e2de893.png
[Element-]: https://element.eleme.cn/#/zh-CN
[543629ba83bd40619428605cf0061efa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/17aa6a1bd8ca47fd9b66fdd118570193.png
[70a27e5220ab4b26b9d6b111b044c823.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/c00f590223c14e3486d683342be7c981.png
[b99c3ae5302e45d595ed2cd7dba61019.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/733e000d11fd4e57bbb687b9227e93eb.png
[08ecf3013e934bf681e940dad262c903.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f60877968095410c830b60c01d26cd0b.png