Element UI（一）

最新推荐文章于 2024-04-28 13:42:19 发布

紫幻_purple

最新推荐文章于 2024-04-28 13:42:19 发布

阅读量1.3k

点赞数

分类专栏： Vue 前端文章标签： Element UI

本文链接：https://blog.csdn.net/qq_41479052/article/details/100821802

版权

一、指南

设计原则

一致性 Consistency

与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。

反馈 Feedback

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

效率 Efficiency

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

可控 Controllability

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

二、开发指南

安装

npm 安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

CDN

目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

<!-- 引入样式 -->
<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>

我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看 unpkg.com。

Hello world

通过 CDN 的方式我们可以很容易地使用 Element 写出一个 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>
  <!-- imp

最低0.47元/天解锁文章

紫幻_purple

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Element UI（一）

目录一、指南设计原则导航选择合适的导航侧栏导航顶部导航二、开发指南安装npm 安装CDNHello world快速上手¶使用 vue-cli@3¶使用 Starter Kit¶引入 Element¶全局配置¶开始使用¶使用 Nuxt.js自定义主题仅替换主题色在项目中改变 SCSS 变量命令行主题工具内置过...
复制链接

扫一扫