首頁手記 Ant-design-vue課程：新手入門詳解

Ant-design-vue課程：新手入門詳解

標簽：

前端工具設計 Vue.js

概述

本文详细介绍了ant-design-vue课程的相关内容，包括安装与配置、基础组件使用、表单与表格操作、路由管理以及常见问题排查和调试技巧。通过学习本教程，可以掌握Ant-design-vue的基本使用方法。

Ant-design-vue简介

Ant-design-vue 是一套专为企业级中后台产品设计的 Vue 设计语言实现。它不仅基于 Ant Design 的设计规范，还结合了 Vue.js 的特性进行实现，为开发者提供了一套完整的前端解决方案。该框架集成了各种常用的组件，如按钮、输入框、布局、表单、表格等，并且支持丰富的配置和扩展功能。此外，Ant-design-vue 还支持动态加载和自定义主题，适用于各类企业级应用开发场景。

安装与配置

Ant-design-vue 通过 npm 安装。首先，确保已经安装了 Node.js 和 npm。然后可以通过以下命令安装 Ant-design-vue：

npm install ant-design-vue

安装完成后，在 Vue 项目中引入该库。如果使用 Vue CLI 创建的项目，可以在 main.js 文件中进行如下引入：

import { createApp } from 'vue';
import App from './App.vue';
import antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

const app = createApp(App);
app.use(antd);
app.mount('#app');

通过以上步骤，Ant-design-vue 将会被正确安装在 Vue 项目中，并自动注册所有组件。

基础组件使用

Button按钮组件

Button 是最常用的组件之一，用于触发特定操作，如提交表单、提交查询等。

示例代码

<template>
  <a-button type="primary">主要按钮</a-button>
  <a-button type="secondary">次要按钮</a-button>
  <a-button type="link">链接按钮</a-button>
</template>

<script setup>
import { Button as AButton } from 'ant-design-vue';
</script>

参数说明

type：按钮类型，可选值包括 primary（主要按钮）、secondary（次要按钮）、link（链接按钮）等。
shape：按钮形状，可选值包括 circle（圆形按钮）、round（圆角按钮）等。
size：按钮大小，可选值包括 large（大号）、default（默认）、small（小号）。
disabled：是否禁用按钮。

Input输入框组件

Input 组件用于获取用户的输入值。它可以是一个简单的文本输入框，也可以是密码输入框、搜索框等。

示例代码

<template>
  <a-input placeholder="请输入内容" v-model:value="inputValue" />
  <a-input-password placeholder="请输入密码" v-model:value="passwordValue" />
  <a-input-search placeholder="搜索..." enter-button="搜索" @search="onSearch" />
</template>

<script setup>
import { Input as AInput, InputPassword as AInputPassword, InputSearch as AInputSearch } from 'ant-design-vue';
import { ref } from 'vue';

const inputValue = ref('');
const passwordValue = ref('');
const onSearch = (value) => {
  console.log(value);
};
</script>

参数说明

placeholder：输入框的提示文字。
v-model:value：双向绑定的值。
type：输入框类型，可选值包括 text（文本）、password（密码）等。
prefix 和 suffix：输入框前缀和后缀。
size：输入框大小，可选值包括 large（大号）、default（默认）、small（小号）。
disabled：是否禁用输入框。

Layout布局组件

Layout 组件用于创建页面的布局结构。它能够帮助开发者快速搭建标准的企业级应用页面布局。例如，可以通过设置宽度和折叠功能来创建灵活的侧边栏。

示例代码

<template>
  <a-layout>
    <a-layout-header style="background: #fff; padding: 16px 24px; border-bottom: 1px solid #eee">头部</a-layout-header>
    <a-layout-content style="padding: 24px; background: #fff; min-height: 280px;">
      内容区
    </a-layout-content>
    <a-layout-footer style="text-align: center; background: #fff; padding: 16px 24px; border-top: 1px solid #eee">
      底部
    </a-layout-footer>
  </a-layout>
</template>

<script setup>
import { Layout as ALayout, Header as AHeader, Content as AContent, Footer as AFooter } from 'ant-design-vue';
</script>

参数说明

AHeader：头部组件。
AContent：内容区组件。
AFooter：底部组件。
AAside：侧边栏组件。
ASider：侧边栏组件，可以设置宽度和是否折叠等属性。

表单与表单验证

创建表单

表单是Web应用中最常用的功能之一，Ant-design-vue 提供了强大的表单组件来创建和管理表单。

示例代码

<template>
  <a-form :model="formState" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
    <a-form-item label="用户名" name="username">
      <a-input v-model:value="formState.username" />
    </a-form-item>
    <a-form-item label="密码" name="password">
      <a-input-password v-model:value="formState.password" />
    </a-form-item>
    <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
      <a-button type="primary" @click="onSubmit">提交</a-button>
    </a-form-item>
  </a-form>
</template>

<script setup>
import { Form as AForm, Input as AInput, InputPassword as AInputPassword, Button as AButton } from 'ant-design-vue';
import { reactive } from 'vue';

const formState = reactive({
  username: '',
  password: '',
});

const onSubmit = () => {
  console.log('提交数据', formState);
};
</script>

参数说明

:model：绑定数据模型。
:label-col 和 :wrapper-col：设置表单的布局属性。
form-item：每个表单项。
:name：表单项的名称，主要用于验证和提交数据。
:wrapper-col：设置表单项的布局属性。
@click：按钮点击事件。

添加表单验证

表单验证是保证数据有效性的关键步骤，通过设置验证规则，可以在提交表单之前确保用户输入的数据符合要求。

示例代码

<template>
  <a-form :model="formState" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" :rules="rules" @submit="onSubmit">
    <a-form-item label="用户名" name="username" :rules="rules.username">
      <a-input v-model:value="formState.username" />
    </a-form-item>
    <a-form-item label="密码" name="password" :rules="rules.password">
      <a-input-password v-model:value="formState.password" />
    </a-form-item>
    <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
      <a-button type="primary" html-type="submit">提交</a-button>
    </a-form-item>
  </a-form>
</template>

<script setup>
import { Form as AForm, Input as AInput, InputPassword as AInputPassword, Button as AButton } from 'ant-design-vue';
import { reactive, ref } from 'vue';

const formState = reactive({
  username: '',
  password: '',
});

const rules = {
  username: [
    {
      required: true,
      message: '请输入用户名',
      trigger: 'blur',
    },
    {
      min: 3,
      max: 15,
      message: '用户名长度在 3 到 15 个字符',
      trigger: 'blur',
    },
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur',
    },
    {
      min: 5,
      max: 15,
      message: '密码长度在 5 到 15 个字符',
      trigger: 'blur',
    },
  ],
};

const onSubmit = (values) => {
  console.log('提交数据', values);
};
</script>

参数说明

:rules：设置验证规则。
@submit：表单提交事件。
required：是否必填。
message：错误提示信息。
min 和 max：最小和最大值约束。
trigger：触发验证的时机。

表格组件应用

Table表格组件

Table 组件用于展示表格数据，支持数据排序、筛选、分页等高级功能。

示例代码

<template>
  <a-table :columns="columns" :data-source="data" bordered="true" />
</template>

<script setup>
import { Table as ATable } from 'ant-design-vue';

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
];
</script>

参数说明

:columns：定义表格列信息。
:data-source：绑定数据源。
bordered：是否显示边框。

表格数据绑定与操作

表格数据可以通过 v-model 绑定，同时支持分页、排序、筛选等功能。

示例代码

<template>
  <a-table :columns="columns" :data-source="data" bordered="true" :pagination="pagination" :scroll="{ y: 240 }" />
</template>

<script setup>
import { Table as ATable } from 'ant-design-vue';
import { ref } from 'vue';

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    sorter: true, // 开启排序
    sortDirections: ['ascend', 'descend'], // 排序方向
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
];

const pagination = ref({
  total: data.length,
  pageSize: 5,
  onChange: (page) => {
    console.log(page);
  },
});
</script>

参数说明

:pagination：分页配置。
total：总数据量。
pageSize：每页显示数量。
onChange：分页改变事件。
:scroll：设置表格滚动区域。
sorter：开启排序。
sortDirections：排序方向。

路由与导航

安装与配置路由

路由是现代Web应用的核心部分，Ant-design-vue 集成了 Vue Router 来实现页面的导航和管理。

安装 Vue Router

首先安装 Vue Router：

npm install vue-router

然后在项目中引入 Vue Router，并配置路由。

示例代码

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
    {
      path: '/about',
      name: 'About',
      component: About,
    },
  ],
});

export default router;

参数说明

history：路由模式，createWebHistory 创建了 HTML5 History 模式。
routes：路由配置数组，每个路由对象包含 path、name 和 component。

路由跳转与参数传递

使用 router-link 组件进行路由跳转，同时可以传递参数。

示例代码

<template>
  <div>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-link :to="{ name: 'About', params: { id: 1 } }">关于详情</router-link>
    <router-view></router-view>
  </div>
</template>

参数说明

to：目标路由的路径或名称，可以传递参数。
router-view：渲染当前路由组件的占位符。

常见问题与调试技巧

常见错误排查

在使用 Ant-design-vue 时，可能会遇到一些常见的错误。例如，组件未正确注册，可能导致未知组件报错。

示例代码

import { createApp } from 'vue';
import App from './App.vue';
import antd from 'ant-design-vue';

const app = createApp(App);
app.use(antd);  // 确保正确引入了 Ant-design-vue

app.mount('#app');

问题排查

组件未正确注册：确保在全局引入 Ant-design-vue 或者单独引入组件。
样式未加载：检查是否引入了 Ant-design-vue 的样式文件。

调试工具介绍

调试工具是开发过程中不可或缺的工具，可以帮助开发者快速定位和解决问题。

Vue Devtools

Vue Devtools 是一个强大的开发工具，可以帮助开发者调试 Vue 项目。通过 Chrome 浏览器的扩展程序进行安装。

示例代码

import { createApp } from 'vue';
import App from './App.vue';
import antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

const app = createApp(App);
app.use(antd);
app.mount('#app');

// 使用 Vue Devtools 进行调试

参数说明

Vue Devtools：安装后可以查看组件树、响应式数据等信息。
console.log：直接在控制台输出日志信息，便于调试。

點擊查看更多內容

為 TA 點贊

若覺得本文不錯，就分享一下吧！

評論

評論

共同學習，寫下你的評論

評論加載中...

展開查看更多評論

作者其他優質文章

正在加載中

墨色風雨

手記
篇

粉絲

75

獲贊與收藏

351

關注作者，訂閱最新文章

閱讀免費教程

設計模式入門教程

10個小節 22668 427

Dreamweaver 教程

25個小節 5219 102

后端通用面試教程

41個小節 32074 358

推薦

評論

收藏

共同學習，寫下你的評論



感謝您的支持，我會繼續努力的～

掃碼打賞，你說多少就多少

贊賞金額會直接到老師賬戶

支付方式

打開微信掃一掃，即可進行掃碼打賞哦

今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與放棄機會

點擊
抽獎

慕課手記新用戶專享福利

恭喜你，你的運氣太好了，居然抽中了 100個積分！

恭喜你，抽中了價值元的專欄！

太棒了，直接落到你賬戶里！

積分商城里的羅技鼠標、機械鍵盤、
Kindle 閱讀器、小米平衡車
Apple iPad （10.2英寸）、大額優惠券
在等著你去兌換了噢

作者：

免費贈送

兌換碼：1111222211 復制

優惠券可用于購買實戰課、體系課
無門檻使用

先去看看，有什么好東西馬上兌換我愛學習，選課去


亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Ant-design-vue課程：新手入門詳解

Button按钮组件

示例代码

参数说明

Input输入框组件

示例代码

参数说明

Layout布局组件

示例代码

参数说明

创建表单

示例代码

参数说明

添加表单验证

示例代码

参数说明

Table表格组件

示例代码

参数说明

表格数据绑定与操作

示例代码

参数说明

安装与配置路由

安装 Vue Router

示例代码

参数说明

路由跳转与参数传递

示例代码

参数说明

常见错误排查

示例代码

问题排查

调试工具介绍

Vue Devtools

示例代码

参数说明

閱讀免費教程