前端框架-AntD

        在校期间学习前端框架的时候经常会用到 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 构建项目，它可能更适合你