element-ui网站模板（ELEMENT UI）
本文目录一览：
element-ui展示
展示了 element-ui 的相应组件的功能及UI，以便快速浏览查询。
transition 。内置了几种过渡动画。
el-row el-col 。通过基础的 24 分栏，迅速简便地创建布局。
el-container 。用于布局的容器组件，方便快速搭建页面的基本结构。
i 。提供了一套常用的图标集合。
el-button 。常用的操作按钮。
el-link 。文字超链接。
el-radio 。在一组备选项中进行单选。
el-checkbox 。一组备选项中进行多选。
el-input 。通过鼠标或键盘输入字符。
el-input-number 。仅允许输入标准的数字值，可定义范围。
el-select 。当选项过多时，使用下拉菜单展示并选择内容。
el-cascader 。当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。
el-switch 。表示两种相互对立的状态间的切换，多用于触发「开/关」。
el-slider 。通过拖动滑块在一个固定区间内进行选择。
el-time-picker 。用于选择或输入日期。
el-date-picker 。用于选择或输入日期。
el-upload 。通过点击或者拖拽上传文件。
el-rate 。评分组件。
el-color-picker 。用于颜色选择，支持多种格式。
el-transfer 。用于多次选择，统一确定的组件。
el-form .由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据.
el-table 。用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
el-tag 。用于标记和选择。
el-progress 。用于展示操作进度，告知用户当前状态和预期。
el-tree 。用清晰的层级结构展示信息，可展开或折叠。
el-pagination 。当数据量过多时，使用分页分解数据。
el-badge 。出现在按钮、图标旁的数字或状态标记。
el-avatar 。用图标、图片或者字符的形式展示用户或事物信息。
el-alert 。用于页面中展示重要的提示信息。
$loading 。加载数据时显示动效。
$notify 。悬浮出现在页面角落，显示全局的通知提醒消息。
$message 。常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。
$msgbox 。模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。
el-menu 。为网站提供导航功能的菜单。
el-tabs 。分隔内容上有关联但属于不同类别的数据集合。
el-breadcrumb 。显示当前页面的路径，快速返回之前的任意页面。
el-page-header 。如果页面的路径比较简单，推荐使用页头组件而非面包屑组件。
el-dropdown 。将动作或菜单折叠到下拉菜单中。
el-steps 。引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。
el-dialog 。在保留当前页面状态的情况下，告知用户并承载相关操作。
el-tooltip 。常用于展示鼠标 hover 时的提示信息。
el-popover 。Popover与Tooltip很类似，相当于能自定义的Tooltip。
el-popconfirm 。点击元素，弹出气泡确认框。相当于一个已自定义的Popover。
el-card 。将信息聚合在卡片容器中展示。
el-carousel 。在有限空间内，循环播放同一类型的图片、文字等内容。
el-collapse 。通过折叠面板收纳内容区域。
el-timeline 。可视化地呈现时间流信息。
el-divider 。区隔内容的分割线。
el-calendar 。显示日期。
el-image 。图片容器，在保留原生img的特性下，支持懒加载，自定义占位、加载失败等。
el-backtop 。返回页面顶部的操作按钮。
ul 。滚动至底部时，加载更多数据。
el-drawer 。有些时候, Dialog 组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, Drawer 拥有和 Dialog 几乎相同的 API, 在 UI 上带来不一样的体验。
web前端主流框架主要有哪些
1、Bootstrap
Twitter出品的Bootstrap在业界是非常受欢迎的，以至于有很多前端框架都在其基础上开发，如我们熟悉的WeX5就是在Bootstrap源码基础上优化而来的。我相信大多数接触过前端开发的同学多少都了解过这个优秀的前端框架。Bootstrap是基于HTML、CSS和Javascript的，它简洁灵活，可以使得Web开发更加敏捷。
它提供优雅的HTML和CSS规范，在jQuery的基础上进行更加个性化和人性化的完善。兼容大部分jQuery插件，并包含了丰富的Web组件，如下拉菜单、按钮式下拉菜单、导航条、按钮组、分页、缩略图、进度条和媒体对象等。自带了13个jQuery插件，其中有模式对话框、标签页、滚动条和弹出框等。
2、Foundation框架
Foundation框架总体来看要比Bootstrap略显高大上一点，但他们俩的设计理念都是非常清楚的，Bootstrap有引导的意思，它尝试处理你项目中的一切所需。Foundation有基础、地基及支柱的意思，给你项目中强有力的创造与支持。相对于Bootstrap丰富的组件及插件，Foundation仅提供了有限的几种元素，其目标是，即使你使用预定义的UI元素，也不应该与大家的网站长得太像。
而Bootstrap则致力于提供所有定义好的元素，这样使得看起来许多网站都差不多。Foundation默认不带图标集，它推荐使用开源字体图标。与Bootstrap一样，Foundation使用网格流式布局将网页划分为12列，针对不同的设备显示不同的列数，实现响应式布局。但Foundation不支持旧版本浏览器。其他特性如有兴趣可进一步了解。
3、Curl
Curl 是一个命令行工具，用于通过 HTTP(s)、FTP 和数十种其它协议进行请求。使用Curl可以进行文件下载、检查响应标题和自由访问远程数据。
在 Web 开发中，Curl 经常和 RESTful API 一起使用，用于测试连接。
# Fetch the headers of a URL.curl -I 302 FoundCache-Control: privateContent-Type: text/html; charset=UTF-8Referrer-Policy: no-referrerLocation: ;ei=0fCKWe6HCZTd8AfCoIWYBQContent-Length: 258Date: Wed, 09 Aug 2017 11:24:01 GMT# Make a GET request to a remote API.curl is the number of days it takes Saturn to orbit the Sun.
Curl 命令可能比上述代码更复杂。有许多选项用于控制 headers、Cookie、身份验证等。了解更多，请阅读Everything curl。
4、Tree
Tree 是一个小型的命令行实用程序，它将目录中的文件以可视化的方式进行显示。它采用递归运行的方式，遍历每个级别的嵌套并绘制所有内容的格式树。这样就能快速的浏览并查找需要的文件。
tree.├── css│ ├── bootstrap.css│ ├── bootstrap.min.css├── fonts│ ├── glyphicons-halflings-regular.eot│ ├── glyphicons-halflings-regular.svg│ ├── glyphicons-halflings-regular.ttf│ ├── glyphicons-halflings-regular.woff│ └── glyphicons-halflings-regular.woff2└── js ├── bootstrap.js └── bootstrap.min.js
还可以使用简单的 regEx 模式来过滤结果：
tree -P '*.min.*'.├── css│ ├── bootstrap.min.css├── fonts└── js └── bootstrap.min.js
5、Tmux
根据维基的解释，Tmux 是一个终端复用器。通俗的说，它是一个能将多个终端连接到单个终端会话的工具。
Tmux允许用户在终端中的程序之间切换，添加屏幕窗格，并将多个终端连接到同一个会话，使其保持同步。在远程服务器上工作时，Tmux 特别有用，因为它允许用户创建新的选项卡，而无需再次登录。
6、du
du命令用于生成关于文件和目录的空间使用情况的报告。du很容易使用，可以递归地运行，遍历每个子目录并返回每个文件的大小。
du 的常见用例是：当某个驱动器的空间不足，用户不清楚每个存储器的大小。使用此命令可以快速查看每个文件夹所占用的存储空间，从而找到占用最大空间的存储器。
7、AUI
AUI是最近流行起来的，作者声称是专为APIClound设计的一套框架，解决了许多移动端开发实际中遇到的许多问题，是一个纯CSS框架。使用容器+布局+模块的构建方式，JS辅助，更自由更灵活更易于扩展使用。遵循Google Material设计规范，完美适配各个机型。面向HTML5，使用CSS3实现动画交互，轻量级高性能。AUI是使用MIT License授权，你可以复制、出售。目前最新版本2.0。
8、Amaze UI
这是称为妹子UI的开源框架，据称是中国首个开源HTML5跨屏前端框架。妹子UI以移动优先为理念，从小屏逐渐到大屏，实现响应式网页。Amaze UI包含20+个CSS组件、20+个JS组件，更有多个包含不同主题的Web组件。相比国外框架，妹子UI关注中文排版提供本地化支持。面向HTML5开发，使用CSS3来实现动画交互，轻量级高性能。
9、Frozen UI
Frozen UI是一款开源，简单易用，轻量敏捷的移动端框架。基于手Q样式规范，目前全面应用于企鹅手Q增值业务中。基础样式效果简单色调清爽，社区活跃，组件自然不少。包括按钮、列表、表单、通知、提示条、弹出框、选项卡等等常用组件。还包括一个FrozenJs的JS组件库。可以在主流的Android和IOS上应用。基本样式使用离线包的方式减少请求提供快速接入方案。当然，根据网友反映，也存在大大小小的bug。不过总体来说，还是值得一用的。奇怪的是，Github上显示的最后更新时间是一年前，难道已经没人维护了吗？
# Running this will show the space usage of each folder in the current directory.# The -h option makes the report easier to read.# -s prevents recursiveness and shows the total size of a folder.# The star wildcard (*) will run du on each file/folder in current directory.du -sh *1.2G Desktop4.0K Documents40G Downloads4.0K Music4.9M Pictures844K Public4.0K Templates6.9M Videos
还有一个相似的命令 df（Disk Free），使用df会返回有关可用磁盘空间的各种信息。
element-ui引入方式、自定义主题
在 main.js 中写入以下内容：
借助 babel-plugin-component ，我们可以只引入需要的组件，以达到减小项目体积的目的。
首先，安装 babel-plugin-component：
然后，将 .babelrc 修改为：
接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：
新建一个样式文件，例如 element-variables.scss ，写入以下内容：
之后，在项目的入口文件中，直接引入以上样式文件即可（无需引入 Element 编译好的 CSS 文件）：
如上是全局安装可以在命令行里通过 et 调用工具，如果安装在当前目录下，需要通过 node_modules/.bin/et 访问到命令。执行 -i 初始化变量文件。默认输出到 element-variables.scss ，当然你可以传参数指定文件输出目录。
直接编辑 element-variables.scss 文件，例如修改主题色为红色。
ps: 注意不要手动修改 ./theme 下的 *.css 文件样式，因为et命令编译输出会覆盖
可以再package.json script字段增加命令： "build_theme": "node_modules/.bin/et -o ./themes"
运行: npm run build_theme
如果以上工具全局安装了，运行:
element-ui网站模板的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于ELEMENT UI、element-ui网站模板的信息别忘了在云尚网络www.ysfad.net进行查找喔。
相关文章
发表评论
暂时没有评论，来抢沙发吧~