VUE生态常用的UI组件库02

最新推荐文章于 2022-10-12 13:50:38 发布

「已注销」

最新推荐文章于 2022-10-12 13:50:38 发布

阅读量173

点赞数

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45799003/article/details/114919317

版权

VUE 专栏收录该内容

43 篇文章 1 订阅

订阅专栏

2.Element UI
1)Mint UI（属于Element UI）
网址http://mint-ui.github.io/#!/zh-cn，饿了么开源的基于vue的移动端UI组件库。
2)Ant Design Vue
社区主导，蚂蚁金服技术支持，网址https://github.com/VueComponent/ant-design-vue。百度搜AntDesign。https://ant.design/index-cn，生态里面有Vue，react中后台管理系统适用。https://vue.ant.design/docs/vue/introduce-cn，有配好的插件，后端图表。
3)Elment
网址https://element.eleme.cn/#/zh-CN。github是一只猫猫。维护很频繁，推荐中后台。
案例：
安装：https://element.eleme.cn/#/zh-CN/component/installation，按照网址提示，输入命令（在终端打开）：npm i element-ui -S或者npm install element-ui -s。（其他的方式还有CDN， 使用 vue-cli@3，新版的 vue-cli 准备了相应的 Element 插件，你可以用它们快速地搭建一个基于 Element 的项目。）
安装结束后：当前终端输入命令：vue add element，就是项目文件夹下面。
因为github网址打不开，ε=(´ο｀*)))唉！只放一个网址出来吧！https://github.com/ElementUI/vue-cli-plugin-element，这个是说明。
之后：（按照个人需求选择配置）–>Fully import，N，zh-CN。
执行命令：vue ui，可以打开GUI界面，在端口为:8000的网址上。http://localhost:8000/project/select（不知道为什么会出来这个东西？？）。
下面是不用项目管理器，进行练习的案例。
比如：https://element.eleme.cn/#/zh-CN/component/date-picker寻找代码进行实例练习。（下面的代码都是现成的，如果想要继续学习，只要看着网址上的说明即可！）

//App.vue里面的.
<template>
  <div class="block">
    <span class="demonstration">默认</span>
    <el-date-picker
      v-model="value1"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">带快捷选项</span>
    <el-date-picker
      v-model="value2"
      align="right"
      type="date"
      placeholder="选择日期"
      :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        value2: '',
      };
    }
  };
</script>