在校期间学习前端框架的时候经常会用到 Element ui 或者 Element-plus 这两个前端框架,在后续的开发中,我也接触了图表Echarts框架,最近又接触到一个新的框架:Ant Design
Ant Design of Vue | Ant Design of React
一个是Ant Design 的 Vue 实现,一个是Ant Design 的 React实现,看想要哪个就去不同的框架查询API就好,我这里主要是关于Vue方面的
使用 vue-cli@3 #
我们为新版的 vue-cli 准备了相应的 Ant Design Vue 插件,你可以用它们快速地搭建一个基于 Ant Design Vue 的项目。
引入 ant-design-vue #
建议使用 node 18.0.0 版本以上
1. 安装脚手架工具 # vite
注意:我在vscode文件的集成终端打开的,也可以在cmd里面运行安装
npm create vite@latest
2. 创建一个项目 #
使用命令行进行初始化 选择自己想要的就行
√ Project name: ... antd-demo
√ Select a framework: » Vue
√ Select a variant: » JavaScript
3. 运行项目 #
使用它提供的代码逐行运行就行
cd antd-demo
npm install
npm run dev
4. 在vite中引入组件 #
npm install antd --save
或者使用官方提供的 yarn add antd 安装 (我在用yarn安装时有报错,还是老老实实用npm吧)
安装完成后,继续安装 ant-design-vue
npm add ant-design-vue
点击目录的package.json文件就可以看见 antd 和 ant-design-vue 的版本信息
引入 -> Antd的第一个组件 #
修改 src/main.js ,引入 antd 的按钮组件以及全部样式文件
修改前:
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
createApp(App).mount('#app')
修改后:
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import Antd from 'ant-design-vue'
createApp(App).use(Antd).mount('#app')
修改 src/App.vue 的 template 内容
<div id="app">
<img src="./assets/vue.svg">
<a-button type="primary">Button></a-button>
</div>
修改完成后的效果:
你的第一个 Antd 框架的 Button 组件就写好了 <a-button></a-button>
引入 -> Antd的第二个组件 #
在引入 Button 按钮后尝试引入第二个组件 Layout布局 吧
修改 src/App.vue 的 template 内容
<Layout>
<Header>头部</Header>
<Layout>
<Sider>左边</Sider>
<Content>中间</Content>
<Sider>右边</Sider>
</Layout>
<Footer>尾部</Footer>
</Layout>
修改完成后的效果:
已经默认布局好了,中间部分重复引用了 Layout 布局容器
分为了左中右三个部分:
总结
其实Antd的这个框架组件其实和 Element-Plus 和 Element Ui 有异曲同工妙,其中原理都是相同的,Antd 明示可以支持 React
Ant Design 是一个专门为 React 开发的组件库,因此如果你的项目使用 React,它可能更适合你
Element UI 是一个专门为 Vue.js 开发的组件库,因此如果你正在使用 Vue.js 构建项目,它可能更适合你