Vue高效前端开发-Ant Design of Vue框架

最新推荐文章于 2026-05-21 07:39:48 发布

原创最新推荐文章于 2026-05-21 07:39:48 发布 · 2.8k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #js #html

h5 专栏收录该内容

6 篇文章

订阅专栏

本文介绍AntDesign设计体系及其Vue组件库的应用，通过多个实例展示如何快速美化页面元素，包括按钮、布局、输入框等，适合希望提升前端界面设计水平的开发者。

该文章已生成可运行项目，

Ant Design介绍

简单来说，就是蚂蚁金服技术部经过大量的项目实践和总结，做出的一个服务于企业级产品的设计体系Ant Design。

特性

提炼自企业级中后台产品的交互语言和视觉风格。
开箱即用的高质量 Vue 组件。
共享Ant Design of React设计工具体系。

支持环境

现代浏览器和 IE9 及以上（需要 polyfills）。
支持服务端渲染。
Electron

官网

Ant Design官网

其官网有各种用法和介绍，可以根据其上的介绍进行美化自己的页面。

使用

Vue学习所需文件

需要先引用css

< link rel=“stylesheet” href=“css/antd.min.css” >

以及js，注意顺序，不然会报错

< script src=“js/Vue.js”>
< script src=“js/antd.min.js”>

案例

例：美化按钮

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/antd.min.css">
</head>

<body>
    <div id="app">
        <a-button disabled>禁用</a-button>
        <a-button ghost="false">幽灵</a-button>
        <br />
        <a-button icon="qq">qq</a-button>
        <a-button icon="eye-invisible">qq</a-button>
        <br />
        <a-button loading="false">加载</a-button>
        <a-button shape="round">加载</a-button>>
    </div>
    <script src="js/Vue.js"></script>
    <script src="js/antd.min.js"></script>
    <script>
        new Vue({
            el: "#app"
        })
    </script>
</body>

</html>

以及栅格化布局，面包屑，导航按钮

<body>
    <div id="app">
        <!--面包屑-->
        <div>
            <a-breadcrumb separator=">">
                <a-breadcrumb-item>Home</a-breadcrumb-item>
                <a-breadcrumb-item href="">
                    Application Center
                </a-breadcrumb-item>
                <a-breadcrumb-item href="">
                    Application List
                </a-breadcrumb-item>
                <a-breadcrumb-item>An Application</a-breadcrumb-item>
            </a-breadcrumb>
        </div>
        <!--栅格化-->
        <div>
            <a-row>
                <a-col :span="12" style="background-color: cornflowerblue;height: 10vh;">
                    col-12
                </a-col>
                <a-col :span="12" style="background-color: cornflowerblue;height: 10vh;">
                    col-12
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="8" style="background-color:cornsilk;height: 10vh;">
                    col-8
                </a-col>
                <a-col :span="8" style="background-color: cornsilk;height: 10vh;">
                    col-8
                </a-col>
                <a-col :span="8" style="background-color: cornsilk;height: 10vh;">
                    col-8
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="6">
                    <!--导航菜单-->
                    <a-menu>
                        <a-sub-menu title="123">
                            <a-menu-item>1</a-menu-item>
                            <a-menu-item>2</a-menu-item>
                            <a-menu-item>3</a-menu-item>
                        </a-sub-menu>
                    </a-menu>
                </a-col>
                <a-col :span="18">

                </a-col>
            </a-row>
            <a-row>
                <a-col :span="6" style="background-color:darkcyan;height: 10vh;">
                    col-6
                </a-col>
                <a-col :span="6" style="background-color: darkcyan;height: 10vh;">
                    col-6
                </a-col>
                <a-col :span="6" style="background-color: darkcyan;height: 10vh;">
                    col-6
                </a-col>
                <a-col :span="6" style="background-color: darkcyan;height: 10vh;">
                    col-6
                </a-col>
            </a-row>
        </div>
    </div>
    <script src="js/Vue.js"></script>
    <script src="js/antd.min.js"></script>
    <script>
        new Vue({
            el: "#app"
        })
    </script>
</body>

输入框案例：

<body>
    <div id="app">
        <h1>用户登录</h1>
        <a-input placeholder="请输入用户名" v-model="username"></a-input>
        <a-input placeholder="请输入密码" type="password" v-model="userpass"></a-input>
        <a-button type="primary" @click="test()">提交</a-button>
    </div>
    <script src="js/Vue.js"></script>
    <script src="js/antd.min.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                username: "",
                userpass: ""
            },
            methods: {
                test: function() {
                    this.$message.info(this.username + "欢迎登录！");
                }
            }
        })
    </script>
</body>

以及一个小实践，用户信息登录

<body>
    <div id="app">
        <p>人力资源管理员工信息</p>
        <p>
            姓名：
            <a-input placeholder="请输入姓名" v-model="name"></a-input>
        </p>

        <p>
            性别：
            <a-radio-group name="radioGroup" default-value="0" v-model="sex">
                <a-radio value="1">
                    男
                </a-radio>
                <a-radio value="0">
                    女
                </a-radio>
            </a-radio-group>
        </p>

        <p>
            学历：
            <a-select default-value="daxue" style="width: 120px" v-model="school">
                <a-select-option value="大学">
                    大学
                </a-select-option>
                <a-select-option value="中学">
                    中学
                </a-select-option>
            </a-select>
        </p>

        <p>
            <a-input ref="userNameInput" v-model="email" placeholder="请输入邮箱" suffix="@qq.com">
                <a-icon slot="prefix" type="mail" />
            </a-input>
        </p>

        <p>
            备注：
            <a-textarea placeholder="请输入留言" allow-clear v-model="ps" />
        </p>

        <p>
            <a-button type="primary" @click="test()">
                提交
            </a-button>
        </p>
    </div>
    <script src="js/Vue.js"></script>
    <script src="js/antd.min.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                name: "",
                sex: "1",
                school: "大学",
                email: "",
                ps: ""
            },
            methods: {
                test: function() {
                    this.$message.info(this.name + this.sex + this.school + this.email + this.ps);
                }
            }
        })
    </script>
</body>