配置vue3.0 + Ant Design Vue

前言：上篇文章记录了如何搭建vue3.0版本的项目，今天来对vue3.0来记录一下如何开配置UI框架Ant Design Vue以及配置的时候所遇到的一些问题首先，先把之前用vue-cli搭建好的vue3.0的项目启动起来（找到文件夹，右键打开命令行窗口，执行命令：npm run serve）出现以上提示就说明项目启动成功，复制网址在浏览器里边打开一、配置UI框架Ant Design Vue（1）

_我爱搬砖

4921人浏览 · 2021-01-06 10:54:10

_我爱搬砖 · 2021-01-06 10:54:10 发布

前言：上篇文章记录了如何搭建vue3.0版本的项目，今天来对vue3.0来记录一下如何开配置UI框架Ant Design Vue
一、配置UI框架Ant Design Vue
（1）首先control c停掉项目运行，然后运行以下指令安装依赖（建议使用cnpm来安装），package.json里边出现下图内容说明安装成功。
安装命令：cnpm i --save ant-design-vue@next -S
在这里插入图片描述

（2）安装之后，需要在main.js中全局引入（需要局部引入组件的请参考官网：https://www.antdv.com/docs/vue/getting-started-cn/）
import Antd from ‘ant-design-vue’;
import ‘ant-design-vue/dist/antd.css’;
在这里插入图片描述

（3）然后拉一个ant-design-vue的组件进行测试一下：
在这里插入图片描述
这里看一下页面，已经引入成功，然后就可以用ant-design-vue里边的任何一个ui组件来进行开发啦！
为了方便童鞋们的审阅，vue3.0的环境配置和接口封装的配置将在下一篇文章中讲到，感兴趣的童鞋持续关注一下吧～

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^