element-ui组件库快速学习

原创已于 2022-09-12 11:19:31 修改 · 470 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ui #vue.js

于 2022-09-11 23:59:53 首次发布

Vue.js 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了element-ui，一个用于快速构建网站的组件库，强调一致性、控制反馈、效率和可控性的设计原则。内容包括如何通过npm安装和cdn引用，以及逐步实践造轮子的过程。

element-ui 快速学习

简介：element-ui是一个快速构建网站的组件库，其特点是（具有所有组件库的优缺点）：
一致性 Consistency

控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。

反馈 Feedback

控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。

效率 Efficiency

简化流程：设计简洁直观的操作流程；
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。

可控 Controllability

用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

一、安装

1.npm 安装（这里用的是vue2的版本）

npm install element-ui -s

Hello world 实例：

//入口文件main.js
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import { Button } from 'element-ui';
import router from './router'


Vue.config.productionTip = false
//调用element-ui
Vue.use(ElementUI,{size: 'small',zIndex: 3000});
//调用单个组件
Vue.use(Button)
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

2.cdn

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

Hello world 实例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
      <p>Try Element</p>
    </el-dialog>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      }
    })
  </script>
</html>

二、造轮子

一个组件一个组件的写一遍,不止这么几个

data() {
    return {
      activeComponent: "Container", //激活的组件
      //基础组件名
      basicComponents: ["Layout", "Container", "Color", "Border", "ElButton"],
      formComponents: [
        "FormComponent",
        "SuggessInput",
        "InputNumber",
        "Select",
        "Cascader",
        "SwitchComponent",
        "SliderComponent",
        "TimePickerComponent",
        "DatePicker",
        "UploadFile",
        "Rate",
        "ColorPicker",
        "Transfer",
        "TransferDefine"
      ],
      dataComponents: ["Table", "Tag", "Progress", "Pagination", "Avatar"],
      noticeComponents: ["Loading", "Message", "MessageBox"],
      navigationComponents: ["NavMenu"],
      othersComponents: ["Tooltip", "Carousel", "Images", "InfiniteScroll",
      'BackTop'
      ]
    };
  },

-完-