什么是 vue-amazeui？
vue-amazeui 是一个基于 Vue.js 的 UI 组件库，它的设计灵感来源于 Google 的 Material Design 和饿了么的 ElementUI。该组件库可以快速帮助开发者搭建美观的前端页面。
如何使用 vue-amazeui？
首先，我们需要安装 vue-amazeui。在终端中输入：
npm install vue-amazeui --save
接着，在项目的 main.js 中进行如下配置：
import Vue from 'vue' import VueAmazeUI from 'vue-amazeui' Vue.use(VueAmazeUI)
这样就可以在你的项目中使用 vue-amazeui 了。
vue-amazeui 提供了哪些组件？
vue-amazeui 中提供了各种种类的 UI 组件。这里就列举一些比较常用的组件及其用法：
Icon 图标
<am-icon type="arrow"></am-icon>
Button 按钮
<am-button type="primary">确定</am-button>
Grid 栅格系统
<am-grid :cols="4"> <am-grid-item>1</am-grid-item> <am-grid-item>2</am-grid-item> <am-grid-item>3</am-grid-item> </am-grid>
Navbar 导航栏
<am-navbar title="标题"> <am-navbar-item slot="left">返回</am-navbar-item> <am-navbar-item slot="right">保存</am-navbar-item> </am-navbar>
Modal 对话框
-- -------------------- ---- -------
--------- ------------------------------
--- --------------------------
---- ------------------
---------------
------
---- --------------------
---------- ------------- --------------------- - ---------------------
---------- -------------- --------------------- - ---------------------
------
-----------怎么样使用 vue-amazeui 进行页面开发？
我们来看一个使用 vue-amazeui 开发页面的实例。假设我们需要开发一个登录页面，其中需要使用到 Icon、Button 和 Form 组件。
首先，我们在页面中引入这些组件，并使用 Grid 组件进行布局。
-- -------------------- ---- -------
----------
-----
-------- ----------
--------------
-------- ------------ ----------------------
---------------
--------------
-------------
---------------
--------------
-------- ---------- --------------------
------------- ------------
--------- ----------------------- --------------------------------
---------------
------------- -----------
--------- --------------- ----------------------- -------------------------------
---------------
--------------
---------- -------------- --------------------------------
---------------
----------
---------------
----------
------
-----------
--------
------ ------- -
------ -
------ -
----- -
--------- ---
--------- --
-
-
--
-------- -
---------- -
------------------------------ -- -
-- ------- -
-- ----
- ---- -
-------------------
-
--
-
-
-
---------在这个实例中，我们使用了 Icon、Button 和 Form 组件来构建登录页面，并使用了 validate() 方法进行表单验证。
相信通过这个实例，你已经理解了如何使用 vue-amazeui 进行页面开发了。感谢大家的阅读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559d981e8991b448d75ae