Element-UI-应用与静态网页部署

Element-UI

安装

# 在 vue 项目中启动终端执行
vue add element
# 安装过程中可以选择按需加载

• 按需加载

  按需加载

基础使用

• 引入

<!-- Button.vue -->
<template>
  <div>
    <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>
    <router-view />
  </div>
</template>

• 渲染

  Button使用

• 属性介绍: 使用type、plain、round和circle属性来定义 Button 的样式。

• 灵活使用属性即可获得想要的结果

Layout 布局

• 通过基础的 24 分栏，迅速简便地创建布局。

• offset属性使用

  offset

RadioButton

• 使用

<template>
    <div class="radio-button">
        <template>
            <el-radio v-model="label" label="男">男</el-radio>
            <el-radio v-model="label" label="女">女</el-radio>
        </template>
        <router-view />
    </div>
</template>

<script>

export default ({
   data(){
       return{
           label:'男'
       }
   }
})
</script>

<style scoped>
.radio-button{
    margin: 50px;
}
</style>

• 渲染

  radio-button使用需要与v-model共同配合

Input

input

• 在使用组件的方法时需要在对应的组件中加入ref="组件别名"
• 在调用方法时直接使用this.$refs.组件别名.方法名()
• 在element-ui中所有组件标签上,使用方式属性名=属性值方式
  • 属性: 直接写在对应的组件标签上,使用方式属性名=属性值方式
  • 事件: 直接使用vue绑定事件方式写在对应的组件标签上,使用方式@事件名=vue中事件的处理函数

Select

<template>
    <div class="select">
        <template>
            <el-select v-model="value" placeholder="请选择">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
        </template>
        <router-view></router-view>
    </div>

</template>

<script>
export default {
    name: "Select",
    data() {
        return {
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            value: ''
        }
    }
}
</script>

<style scoped>
.select {
    margin: 50px;
}
</style>

Switch 开关组件

• 使用

<template>
    <div class="div">
        <el-switch
            v-model="value"
            <!-- name 数据库操作 -->
            name="switch"
            active-color="#13ce66"
            inactive-color="#ff4949">
        </el-switch>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value: true
        }
    }
};
</script>

DatePicker 组件使用

<template>
    <div class="date-picker">
        <div class="block">
            <span class="demonstration">多个日期</span>
            <el-date-picker
                type="dates"
                v-model="value4"
                placeholder="选择一个或多个日期">
            </el-date-picker>
            <hr>
            <div class="block">
                <span class="demonstration">带快捷选项</span>
                <el-date-picker
                    v-model="value2"
                    type="monthrange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始月份"
                    end-placeholder="结束月份"
                    :picker-options="pickerOptions">
                </el-date-picker>
            </div>

        </div>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name: "DatePickerVue",
    data() {
        return {


            pickerOptions: {
                shortcuts: [{
                    text: '本月',
                    onClick(picker) {
                        picker.$emit('pick', [new Date(), new Date()]);
                    }
                }, {
                    text: '今年至今',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date(new Date().getFullYear(), 0);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近六个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setMonth(start.getMonth() - 6);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            value1: '',
            value2: '',
            value3: '',
            value4: ''
        };
    }
}
</script>

<style scoped>
.block {
    margin: 50px;
}
</style>

• 渲染

  渲染

Message

• 使用一

<template>
    <div class="message-view">
        <el-button :plain="true" @click="getMessage" type="success">打开消息提示</el-button>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name: "MessageView",
    methods: {
        getMessage() {
            this.$message({
                showClose: true,
                message: '恭喜你，这是一条成功消息',
                type: 'success',
                offset: 50,
                duration: 1000
            });
        }
    }
}
</script>

<style scoped>
.message-view {
    margin: 50px;
}
</style>

• 渲染

  渲染

• 使用二

//  Message 需要全局挂载 plugin/element.js
Vue.prototype.$message = Message

this.$message.success('成功获取点击后的提示信息!');

GiteePages 部署测试

• 路由模式不能是history

• 配置vue.config.js

const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    publicPath: process.env.NODE_ENV === 'production'
        ? '/element-ui/'
        : '/'
})

// 修改为需要部署到的仓库 Eg: element-ui,部署时选择对应打包的静态文件分支部署即可
// 部署后的地址会添加上仓库地址 https://coder-itl.gitee.io/element-ui/#/index
// 如果不进行配置,是无法进行访问的

仓库信息

• Element-UI 部署查看

  部署测试