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

最新推荐文章于 2025-03-27 14:21:53 发布

2501_90193768

最新推荐文章于 2025-03-27 14:21:53 发布

阅读量378

点赞数 8

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/2501_90193768/article/details/145150121

版权

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>