《前端开发框架》课件-第6章 常用UI组件库

6.1.2

Element

Plus中的常用组件ElementPlus组件库中的组件主要包括基础组件、配置组件、表单组件、数据展示组件、导航和反馈组件以及其他组件。每个组件类别又进行了细

分

，

例

如

，

基

础

组

件

包

含Button组件、Border组件、Container组件等；表单组件包含Form组件、Input组件等。下面对Element

Plus中常用的Button组件、Table组件、Form组件和Menu组件进行讲解。6.1.2

Element

Plus中的常用组件先定一个小目标！掌握Element

Plus中Button组件的使用方法，能够实现按钮效果6.1.2

Element

Plus中的常用组件1.Button组件Button组件使用<el-button>标签定义，<el-button>标签的常用属性如下表所示。属性名属性值primary描述主要按钮success成功按钮typeinfo一般提示信息按钮warningdanger警告按钮危险按钮plainrounddisabledlinktrue或falsetrue或falsetrue或falsetrue或falsetrue或false是否为朴素按钮，默认值为false是否为圆角按钮，默认值为false是否为禁用按钮，默认值为false是否为链接按钮，默认值为false是否为圆形按钮，默认值为falsecircle6.1.2

Element

Plus中的常用组件如果需要设置plain、round或circle的属性值为true，可以写成“:属性名="true"”或“属性名”的形式。以round为例，示例代码如下。<!--方式1--><el-buttontype="primary":round="true">Primary</el-button><!--方式2--><el-buttontype="primary"round>Primary</el-button>注意6.1.2

Element

Plus中的常用组件演示基础的按钮效果创建src\components\Button.vue文件。步骤1步骤2<template><el-rowclass="mb-4"><el-button>Default</el-button><el-buttontype="primary">Primary</el-button><el-buttontype="success">Success</el-button><el-buttontype="info">Info</el-button><el-buttontype="warning">Warning</el-button><el-buttontype="danger">Danger</el-button></el-row><!--此处省略了两个<el-row></el-row>--></template>6.1.2

Element

Plus中的常用组件演示基础的按钮效果修改src\main.js文件，切换页面中显示的组件，具体代码如下。步骤1步骤2importAppfrom

'./components/B'组件的文件名6.1.2

Element

Plus中的常用组件在浏览器中查看ElementPlus的按钮效果如下图所示。6.1.2

Element

Plus中的常用组件演示链接按钮和禁用按钮的使用创建src\components\Button2.vue文件。步骤1步骤2<template><el-rowclass="mb-4"><el-buttonlink>Round</el-button><el-buttontype="primary"link:disabled="false">Primary</el-button><el-buttontype="success"link:disabled="true">Success</el-button><el-buttontype="info"

link>Info</el-button><el-buttontype="warning"link>Warning</el-button><el-buttontype="danger"link>Danger</el-button></el-row></template>6.1.2

Element

Plus中的常用组件演示链接按钮和禁用按钮的使用修改src\main.js文件，切换页面中显示的组件。步骤1步骤2importAppfrom

'./components/组件的文件名6.1.2

Element

Plus中的常用组件在浏览器中查看ElementPlus的链接按钮和禁用按钮效果如下图所示。6.1.2

Element

Plus中的常用组件先定一个小目标！掌握ElementPlus中Table组件的使用方法，能够实现表格效果6.1.2

Element

Plus中的常用组件2.Table组件Element

Plus组件库提供了Table组件，用于展示多条结构类似的数据，例如工资表、课程表和计划表等，可以对数据进行排序、筛选、对比或其他自定义操作。6.1.2

Element

Plus中的常用组件Table组件使用<el-table>标签定义，在该标签中绑定data对象数组后，在<el-table-column>中使用prop属性对应对象中的键名，即可将数据添加到表格中；使用label属性可以定义表格的列名，使用width属性可以定义表格的宽高。<el-table>标签的常用属性如下表所示。属性名data描述显示的数据stripeborder是否加斑马线，默认值为false是否带有纵向边框，默认值为false6.1.2

Element

Plus中的常用组件演示基础的表格效果创建src\components\Table.vue文件。步骤1步骤2<template><el-table:data="tableData"stripeborderstyle="width:100%"><el-table-columnprop="date"

label="日期"width="180"/><el-table-columnprop="name"

label="姓名"width="180"/><el-table-columnprop="address"label="住址"width="300"/></el-table></template><scriptsetup>consttableData=[{date:'2023-02-03',name:'王五',address:'北京市海淀区'},//此处省略了3行数据]</script>6.1.2

Element

Plus中的常用组件演示基础的表格效果修改src\main.js文件，切换页面中显示的组件。步骤1步骤2importAppfrom

'./components/'组件的文件名6.1.2

Element

Plus中的常用组件在浏览器中查看ElementPlus的表格效果如下图所示。6.1.2

Element

Plus中的常用组件先定一个小目标！掌握ElementPlus中Form组件的使用方法，能够实现表单效果6.1.2

Element

Plus中的常用组件3.Form组件大多数的网站中都涉及表单的应用，例如登录和注册页面。Element

Plus组件库提供了Form组件，该组件采用Flex布局，用于收集、验证和提交数据。基础的表单包含输入框、单选框、下拉选择、多选框等组件。6.1.2

Element

Plus中的常用组件Form组件使用<el-form>标签定义，在该标签中使用<el-form-item>作为输入项的容器，用于获取值和验证值。<el-form>标签的常用属性如下表所示。属性名描述inline行内表单模式，默认值为false，表示垂直表单表单域标签的位置，默认值为right（标签右对齐），left表示标签左对齐，top表示标签位于表单域的顶部label-positionmodel表单数据对象注意6.1.2

Element

Plus中的常用组件演示基础的表单效果创建src\components\Form.vue文件，在ElementPlus官方文档中找到Form组件的相关代码，复制部分核心代码到当前文件中。步骤1步骤2<template><el-form:model="form"label-width="80px"label-position="left"><el-form-itemlabel="用户名："><el-inputv-model=""/></el-form-item><!--此处省略了两个<el-form-item></el-form-item>--></template><scriptsetup>import{reactive

}from

'vue'constform=reactive({pass:'',name:''})</script>6.1.2

Element

Plus中的常用组件演示基础的表单效果修改src\main.js文件，切换页面中显示的组件。步骤1步骤2importAppfrom

'./components/'组件的文件名6.1.2

Element

Plus中的常用组件在浏览器中查看ElementPlus的表单效果如下图所示。6.1.2

Element

Plus中的常用组件表单默认为垂直表单，若想实现行内表单，可以修改步骤①的代码，为<el-from>标签添加inline属性，使表单元素并列显示。<el-form:model="form"label-width="80px"label-position="left">属性在浏览器中查看表单内容横向排列效果如下图所示。6.1.2

Element

Plus中的常用组件先定一个小目标！掌握ElementPlus中Menu组件的使用方法，能够实现菜单效果6.1.2

Element

Plus中的常用组件4.Menu组件导航栏是网页设计中不可或缺的一部分，通常应用于页面的顶部，可以帮助用户快速找到他们想要访问的内容。例如，导航栏可以实现页面之间的跳转。Element

Plus组件库提供了Menu组件，用于为网站提供导航功能。6.1.2

Element

Plus中的常用组件Menu组件使用<el-menu>标签定义，在该标签中包含<el-menu-item>和<sub-menu>标签。菜单默认为垂直模式，通过将mode属性值设为horizontal，可以将导航菜单变更为水平模式。<el-menu>标签的常用属性如下表所示。属性名mode描述菜单展示模式，默认值为vertical（垂直模式），horizontal表示菜单为水平模式是否水平折叠并收起菜单，默认值为false菜单的背景色collapsebackground-colortext-color菜单的文字颜色，默认值为#303133active-text-colordefault-active当前激活菜单的文字颜色，默认值为#409EFF页面加载时默认激活菜单的index属性6.1.2

Element

Plus中的常用组件演示顶部菜单栏效果创建src\components\Menu.vue文件。步骤1<template><el-menuclass="el-menu-demo"mode="horizontal"><el-menu-itemindex="1">首页</el-menu-item><el-sub-menuindex="2"><!--此处省略了部分代码--></el-sub-menu><el-menu-itemindex="3"disabled>信息</el-menu-item><el-menu-itemindex="4">联系</el-menu-item></el-menu>步骤2步骤3</template><scriptsetup>import{ref

}from

'vue'constactiveIndex=ref('1')</script>6.1.2

Element

Plus中的常用组件演示顶部菜单栏效果修改src\main.js文件，切换页面中显示的组件。步骤1importAppfrom

'./components/e'步骤2步骤3组件的文件名6.1.2

Element

Plus中的常用组件演示顶部菜单栏效果修改src\main.js文件，将导入style.css的代码进行注释，以免其影响Menu组件的样式效果。步骤1//import'./style.css'步骤2步骤36.1.2

Element

Plus中的常用组件在浏览器中查看ElementPlus顶部菜单栏效果如下图所示。6.1.2

Element

Plus中的常用组件若想实现垂直菜单栏效果，可以修改上述代码，将<el-menu>标签中class的值改为el-menu-vertical-demo，将mode的值改为vertical。单击“我的”菜单项，会显示折叠的子菜单信息，如下图所示。6.2Vant组件库6.2.1

安装Vant先定一个小目标！掌握Vant组件库的安装方法，能够独立安装、配置Vant6.2.1

安装Vant什么是Vant？6.2.1

安装VantVant是一个轻量级的、可靠的移动端组件库，于2017年开源。目前Vant官方提供了对Vue2、Vue

3和微信小程序的支持。6.2.1

安装Vant使用npm或yarn包管理工具安装Vant。#使用npm包管理工具安装npminstallvant

--save#使用yarn包管理工具安装yarnaddvant

--save6.2.1

安装Vant在Vue

3项目中使用yarn安装Vant打开命令提示符，切换到D:\vue\chapter06目录，使用yarn创建一个名称为vant-component的项目。步骤1步骤2步骤3步骤4yarncreatevite--templatevue项目名称6.2.1

安装Vant在Vue

3项目中使用yarn安装Vant在命令提示符中，切换到vant-component目录，为项目安装所有依赖。步骤1步骤2步骤3步骤4cdvant-componentyarn6.2.1

安装Vant在Vue

3项目中使用yarn安装Vant在vant-component目录下使用yarn安装Vant。步骤1步骤2步骤3步骤4yarnadd--项目运行时依赖@4.0.0表示安装vant的版本号6.2.1

安装Vant在Vue

3项目中使用yarn安装Vant使用VSCode编辑器打开vant-component目录，在src\main.js文件中，导入并挂载Vant模块。步骤1步骤2步骤3步骤4import{createApp}from

'vue'import'./style.css'importVant

from

'vant'import'vant/lib/index.css'importAppfrom

'./App.vue'constapp=createApp(App)app.use(Vant)app.mount('#app')6.2.1

安装Vant在Vue

3项目中使用yarn安装Vant执行命令启动服务。步骤1步骤2步骤3yarndev项目启动后，会默认开启一个本地服务，地址为:5173/。步骤46.2.2

Vant中的常用组件Vant组件库中包含很多组件，由于篇幅有限，仅对Vant组件库中Button组件、Swipe组件、Tab组件、Form组件、Grid组件和Tabbar组件进行讲解。6.2.2

Vant中的常用组件先定一个小目标！掌握Vant中Button组件的使用方法，能够实现按钮效果6.2.2

Vant中的常用组件1.Button组件Button组件使用<van-button>标签定义，<van-button>标签的常用属性如下表所示。属性名属性值primary描述主要按钮，蓝色success成功按钮，绿色typedefault（默认值）warning默认按钮，白的警告按钮，黄色danger危险按钮，红色plainhairlinedisabledloadingroundtrue或falsetrue或falsetrue或falsetrue或falsetrue或falsetrue或falsetrue或false是否为朴素按钮，默认值为false是否为细边框，默认值为false是否禁用按钮，默认值为false是否显示为加载状态，默认值为false是否为圆角按钮，默认值为false是否为方形按钮，默认值为false是否为块级元素，默认值为falsesquareblock6.2.2

Vant中的常用组件演示基础的按钮效果创建src\components\Button.vue文件。步骤1步骤2<template><van-buttontype="primary">主要按钮</van-button><van-buttontype="success"round>成功按钮</van-button><van-buttontype="default"disabled>默认按钮</van-button><van-buttontype="warning"block>警告按钮</van-button><van-buttontype="danger"plainhairline>危险按钮</van-button><van-buttontype="danger"loadingloading-type="spinner"loading-text="加载中..."/></template><stylescoped>button{margin:3px;

}</style>6.2.2

Vant中的常用组件演示基础的按钮效果修改src\main.js文件，切换页面中显示的组件。步骤1步骤2importAppfrom

'./components/B'组件的文件名6.2.2

Vant中的常用组件在浏览器中查看Vant的按钮效果如下图所示。6.2.2

Vant中的常用组件演示图标按钮的使用创建src\components\Button2.vue文件。步骤1步骤2<template><van-buttonicon="circle"

type="primary">基础图标</van-button><van-buttonicon="like"

type="primary">实底风格</van-button><van-buttonicon="phone-o"

type="primary">线框风格</van-button><van-button:icon="icon">按钮</van-button></template><scriptsetup>importiconfrom

'../assets/user-active.png'</script><style>.van-button{margin:5px

1px

!important;}</style>6.2.2

Vant中的常用组件演示图标按钮的使用修改src\main.js文件，切换页面中显示的组件。步骤1步骤2importAppfrom

'./components/组件的文件名6.2.2

Vant中的常用组件在浏览器中打开开发者工具，测试在移动设备模拟环境下Vant的图标按钮效果如下图所示。6.2.2

Vant中的常用组件多学一招：按钮尺寸和页面导航使用<van-button>的size属性可以设置按钮的尺寸。size取值分别为large（大型按钮）、normal（普通按钮）、small（小型按钮）和mini（迷你按钮），默认为normal。使用<van-button>的url属性和to属性可以实现页面导航，其中，url属性可以进行URL跳转，to属性可以进行路由跳转。6.2.2

Vant中的常用组件演示按钮尺寸和页面导航效果创建src\components\Button3.vue文件。步骤1步骤2<template><van-buttontype="primary"size="large">大型按钮</van-button><van-buttontype="primary"size="normal">普通按钮</van-button><van-buttontype="primary"size="small">小型按钮</van-button><van-buttontype="primary"size="mini">迷你按钮</van-button><van-buttontype="primary"url="/test.html">URL跳转</van-button><van-buttontype="primary"to="目标地址">路由跳转</van-button></template><style>.van-button{margin:5px

1px

!important;}</style>6.2.2

Vant中的常用组件演示按钮尺寸和页面导航效果修改src\main.js文件，切换页面中显示的组件。步骤1步骤2importAppfrom

'./components/组件的文件名6.2.2

Vant中的常用组件在浏览器中查看Vant按钮尺寸和页面导航效果如下图所示。6.2.2

Vant中的常用组件先定一个小目标！掌握Vant中Swipe组件的使用方法，能够实现轮播效果6.2.2

Vant中的常用组件2.Swipe组件Vant组件库提供了Swipe组件，用于实现图片轮播效果。轮播图是页面结构中重要的组成部分，常用于网站的首页，主要用于展示页面中的活动信息，让用户不用滚动屏幕就能看到更多内容，可以最大化信息密度。6.2.2

Vant中的常用组件Swipe组件使用<van-swipe>标签定义，在该标签中使用<van-swipe-item>定义每一张轮播的图片。在<van-swipe>中可以使用autoplay属性设置自动轮播的间隔；当轮播中含有图片时，可以通过lazy-render属性来开启懒加载模式，从而优化网页性能。<van-swipe>标签的常用属性如下表所示。属性名autoplaylazy-rendervertical描述自动轮播间隔，单位为ms是否延迟渲染未展示的轮播，默认值为false是否为纵向滚动，默认值为false指示器颜色，默认值为#1989fa动画时长，单位为ms，默认值为500是否开启循环播放，默认值为trueindicator-colordurationloop6.2.2

Vant中的常用组件演示一种简单的图片轮播效果创建src\components\Swipe.vue文件，在Vant官方文档中找到Swipe组件相关代码，复制部分核心代码到当前文件中。步骤1步骤2<template><van-swipe:autoplay="3000"lazy-renderstyle="width:300px;"><van-swipe-itemv-for="imageinimages":key="image"><img:src="image"

/></van-swipe-item></van-swipe></template><scriptsetup>constimages=['/images/01.jpg','/images/02.jpg','/images/03.jpg','/images/04.jpg']</script>6.2.2

Vant中的常用组件演示一种简单的图片轮播效果修改src\main.js文件，切换页面中显示的组件。步骤1步骤2importAppfrom

'./components/'组件的文件名6.2.2

Vant中的常用组件在浏览器中查看图片的横向滚动如下图所示。6.2.2

Vant中的常用组件若想要图片纵向滚动，可以为<van-swipe>标签添加vertical属性，并设置滑块容器的高度，使轮播图片纵向排列。在浏览器中查看图片的纵向滚动如下图所示。6.2.2

Vant中的常用组件先定一个小目标！掌握Vant中Tab组件的使用方法，能够实现标签页效果6.2.2

Vant中的常用组件3.Tab组件Vant组件库提供了Tab组件，用于实现标签页效果。标签页一般出现在页面的顶部或者页面中，用于在不同的内容区域之间进行切换。6.2.2

Vant中的常用组件Tab组件使用<van-tabs>标签定义，在该标签中使用<van-tab>定义每一个标签项。在<van-tabs>标签中可以使用v-model:active绑定当前激活标签的对应的索引值，默认情况下启用第一个标签，其索引值为0；如果<van-tab>标签中指定了name属性，则v-model:active的值为<van-tab>标签的name，此时无法通过索引值来匹配标签。<van-tabs>标签的常用属性如下表所示。属性名type描述样式风格类型，默认值为line（线性），card表示卡片标签主题色，默认值为#1989facolorbackgroundellipsis标签栏背景色，默认值为white是否省略过长的标题文字，默认值为true是否开启手势左右滑动来切换，默认值为falseswipeable6.2.2

Vant中的常用组件演示一种简单的标签页效果创建src\components\Tab.vue文件。步骤1步骤2<template><divstyle="width:350x;text-align:

center;"><van-tabsv-model:active="active"swipeabletype="card"><van-tabtitle="我是标签1的内容">内容1</van-tab><!--此处省略3个<van-tab></<van-tab>标签--></div></template><scriptsetup>import{ref

}from

'vue'constactive=ref(0)</script>6.2.2

Vant中的常用组件演示一种简单的标签页效果修改src\main.js文件，切换页面中显示的组件。步骤1步骤2importAppfrom

'./components/组件的文件名6.2.2

Vant中的常用组件在浏览器中查看Vant的标签页效果如下图所示。6.2.2

Vant中的常用组件先定一个小目标！掌握Vant中Form组件的使用方法，能够实现表单效果6.2.2

Vant中的常用组件4.Form组件Vant组件库提供了Form组件，用于数据输入、校验，支持输入框、单选框、复选框等类型。6.2.2

Vant中的常用组件Form组件使用<van-form>标签定义，该标签需要与<van-field>标签搭配使用，用户可以在输入框内输入或编辑文字。<van-field>标签内可以通过rules属性定义校验规则，通过@submit触发单击事件。6.2.2

Vant中的常用组件演示一种简单的表单效果创建src\components\Form.vue文件，在Vant官方文档中找到Form组件相关代码，复制部分核心代码到当前组件中。步骤1<template><van-nav-bartitle="登录组件"/><van-form@submit="onSubmit"><van-cell-groupinset>步骤2步骤3<van-fieldv-model="username":rules="[{

}]"/><van-fieldv-model="password":rules="[{

}]"/></van-cell-group><van-buttonblocktype="primary"native-type="submit">提交</van-button></van-form></template>6.2.2

Vant中的常用组件演示一种简单的表单效果修改src\main.js文件，切换页面中显示的组件。步骤1importAppfrom

'./components/'步骤2步骤3组件的文件名6.2.2

Vant中的常用组件演示一种简单的表单效果修改src\main.js文件，对导入style.css文件的代码进行注释。步骤1//import'./style.css'步骤2步骤36.2.2

Vant中的常用组件在浏览器中查看Vant的表单效果如下图所示。6.2.2

Vant中的常用组件单击“提交”按钮后，会进行规则校验，如下图所示。6.2.2

Vant中的常用组件先定一个小目标！掌握Vant中Grid组件的使用方法，能够实现网格效果6.2.2

Vant中的常用组件5.Grid组件Vant组件库提供了Grid组件，用于实现网格效果，网格可以在水平方向上把页面分隔成等宽度的区块，一般用于同时展示多个同类项目的场景，例如微信支付页面。6.2.2

Vant中的常用组件Grid组件使用<van-grid>标签定义，在该标签中使用<van-grid-item>作为每一个网格元素的容器。<van-grid-item>标签的常用属性如下表所示。属性名icontextto描述图标名称或图片链接，等同于Icon组件的name属性图标的文字内容单击后跳转的目标路由对象，等同于vue-router的to属性单击后跳转的链接地址urldot是否显示图标右上角小红点，默认为false图标右上角徽标的内容badge6.2.2

Vant中的常用组件演示一种基础的网格效果创建src\components\Grid.vue文件，在Vant官方文档中找到Grid组件相关代码，复制部分核心代码到当前文件中。步骤1步骤2<template><van-grid><van-grid-itemicon="wap-home-o"text="首页"dot/><van-grid-itemicon="chat-o"

text="聊天"badge="99+"/><van-grid-itemicon="phone-o"

text="电话"/><van-grid-itemicon="user-o"

text="我的"/></van-grid><!--

见下一页--></template>6.2.2

Vant中的常用组件演示一种基础的网格效果实现一行中平均显示3列图片，图片素材从配套源代码中获取。步骤1步骤2<van-grid:column-num="3"square:gutter="5"><van-grid-itemicon="more-o"

text="文字"><van-imagesrc="/images/01.jpg"/></van-grid-item><van-grid-itemicon="more-o"

text="文字"><van-imagesrc="/images/02.jpg"/></van-grid-item><van-grid-itemicon="more-o"

text="文字"><van-imagesrc="/images/03.jpg"/></van-grid-item></van-grid>6.2.2

Vant中的常用组件演示一种基础的网格效果修改src\main.js文件，切换页面中显示的组件。步骤1步骤2importAppfrom

'./components/组件的文件名6.2.2

Vant中的常用组件在浏览器中查看Vant的网格效果如下图所示。6.2.2

Vant中的常用组件若想网格的内容呈横向排列，则可以为<van-grid>标签添加direction属性，将属性值设置为horizontal，网格内容横向排列效果如下图所示。6.2.2

Vant中的常用组件先定一个小目标！掌握Vant中Tabbar组件的使用方法，能够实现标签栏效果6.2.2

Vant中的常用组件6.Tabbar组件Vant组件提供了Tabbar组件，用于在不同页面之间进行切换，常放置在页面的底部。6.2.2

Vant中的常用组件Tabbar组件使用<van-tabbar>标签定义，在该标签中使用<van-tabbar-item>定义每一个标签项。<van-tabbar>标签的常用属性如下表所示。属性名fixed描述是否固定在底部，默认值为true是否显示外边框，默认值为true选中标签的颜色，默认值为#1989fa未选中标签的颜色，默认值为#7d7e80borderactive-colorinactive-colorplaceholder

固定在底部时是否在标签位置生成一个等高的占位元素，默认值为false6.2.2

Vant中的常用组件演示一种基础的标签栏效果创建src\components\Tabbar.vue文件，在Vant官方文档中找到Tabbar组件相关代码，复制部分核心代码到当前文件中。步骤1步骤2<template><van-tabbarv-model="active"fixedactive-color="red"inactive-color="blue":placeholder="true"><van-tabbar-itemicon="home-o">标签</van-tabbar-item><!--此处省略了3个<van-tabbar-item>标签--></van-tabbar></template><scriptsetup>import{ref

}from

'vue'constactive=ref(2)</script>6.2.2

Vant中的常用组件演示一种基础的标签栏效果修改src\main.js文件，切换页面中显示的组件。步骤1步骤2importAppfrom

'./components/组件的文件名6.2.2

Vant中的常用组件在浏览器中查看Vant的标签栏效果如下图所示。6.3Ant

Design

Vue组件库6.3.1

安装Ant

Design

Vue先定一个小目标！掌握Ant

Design

Vue组件库的安装方法，能够独立安装、配置Ant

DesignVue6.3.1

安装Ant

Design

Vue什么是AntDesignVue？6.3.1

安装Ant

Design

VueAntDesign

Vue是一个优秀的前端UI组件库，由蚂蚁金服体验技术部推出，于2018年3月正式开源，受到众多前端开发者及企业的喜爱。Ant

Design

Vue基于Vue实现，专门服务于企业级后台产品，支持主流浏览器和服务器端渲染。6.3.1

安装Ant

Design

Vue使用npm或yarn包管理工具安装AntDesignVue。#使用npm包管理工具安装npminstallant-design-vue--save#使用yarn包管理工具安装yarnaddant-design-vue--save6.3.1

安装Ant

Design

Vue在Vue

3项目中使用yarn安装Ant

Design

Vue打开命令提示符，切换到D:\vue\chapter06目录，使用yarn创建一个名称为ant-component的项目。步骤1步骤2步骤3步骤4yarncreatevite--templatevue项目名称6.3.1

安装Ant

Design

Vue在Vue

3项目中使用yarn安装Ant

Design

Vue在命令提示符中，切换到ant-component目录，为项目安装所有依赖。步骤1步骤2步骤3步骤4cdant-componentyarn6.3.1

安装Ant

Design

Vue在Vue

3项目中使用yarn安装Ant

Design

Vue在ant-component目录下使用yarn安装AntDesignVue。步