Ant Design of Vue后台管理系统框架学习笔记

框架开发文档地址：http://vue.ant-design.cn/docs/vue/introduce-cn/
框架源码地址：https://gitee.com/sendya/ant-design-pro-vue/

1、vue安装命令

$ npm install -g @vue/cli

或

$ yarn global add @vue/cli

2、创建项目

$ vue create antd-demo

3、安装组件

npm i --save ant-design-vue

4、在main.js中全局引入ant-design-vue

import Vue from 'vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css' //引入样式
Vue.use(Antd)

5、表单提交验证示例

<template>
    <div class="hello">
        <a-form :form="form" @submit="handleSubmit">
            <a-form-item label="名称" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                <a-input v-decorator="['note', {initialValue:'zhxg',rules: [{ required: true, message: '请填写名称!' }]} ]"/>
            </a-form-item>
            <a-form-item label="Gender" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                <a-select v-decorator="['gender',{rules: [{ required: true, message: 'Please select your gender!' }]}]"
                          placeholder="请选择性别"
                          @change="handleSelectChange">
                    <a-select-option value="男">男</a-select-option>
                    <a-select-option value="女">女</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
                <a-button type="primary" html-type="submit">
                    提交
                </a-button>
            </a-form-item>
        </a-form>
    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        data() {
            return {
                formLayout: 'horizontal',
                form: this.$form.createForm(this),
            };
        },
        methods: {
            handleSubmit(e) {
                e.preventDefault(); //阻止事件的默认行为
                this.form.validateFields((err, values) => {//对表单数据进行验证
                    if (!err) {//验证通过
                        window.console.log('Received values of form: ', values);
                    }
                });
            },
            handleSelectChange(value) {
                window.console.log(value);
                //给表单字段设置默认值
                this.form.setFieldsValue({
                    note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
                });
            },
        },
    }
</script>

<style scoped>
   
</style>

6、运行命令

npm run serve