VueCLI中使用Element-UI

Element-UI

一个与vue配合的UI框架

官网:https://element.eleme.cn/#/zh-CN

安装

可以命令行安装,也可以UI界面安装

命令行安装

npm i element-ui -S

使用

在入口文件main.js中加入

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'   //样式表
Vue.use(ElementUI);//使用element-ui

此处示例带状态的table组件

vue

<template>
  <div class="about">
    <h1>Element-UI带状态表格</h1>
    <el-table
    :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
  </div>
</template>
<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
<script>
export default{
  methods:{
     tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }
  },
  data(){   //组件的data是函数且须返回一个对象
    return {
       tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
    }
  }
}
</script>

效果图

UI界面安装

步骤:

插件----添加插件----搜索vue-cli-plugin-element  
配置插件 按需要导入,能减少打包体积

然后会自动生成plugins文件夹并且包含element.js

使用

此处示例测试button组件

views/xx.vue
vue文件:

<template>
    <div>
        <h1>Hello Vue!</h1>
        <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>
    </div>
</template>

element.js需要引入button组件

import Vue from 'vue'
import { Button} from 'element-ui'
Vue.use(Button)

运行项目查看效果:

效果图

vue.config的配置

关闭eslint语法检查,修改端口

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false,//关闭eslint用法检查,
  devServer:{ //修改端口
    port:9090 
  }
})

简单的使用大功告成~