首页使用ant design vue

使用ant design vue

时间: 2025-02-19 22:32:53 浏览: 42

### 使用 Ant Design Vue 进行 UI 开发 #### 安装依赖库为了使用 Ant Design Vue，在项目中安装必要的 npm 包是第一步。通过命令行工具执行如下指令来完成安装： ```bash npm install ant-design-vue --save ``` 或者如果偏好使用 `yarn`，则可以运行: ```bash yarn add ant-design-vue ``` #### 初始化配置在项目的入口文件（通常是 main.js 或 app.js），引入并注册 Ant Design Vue 组件。 ```javascript import { createApp } from 'vue'; import App from './App.vue'; // 导入整个 ant design vue 库 import Antd from 'ant-design-vue'; // 导入样式表 import 'ant-design-vue/dist/antd.css'; const app = createApp(App); app.use(Antd).mount('#app'); ``` 这样就完成了全局组件的加载和样式的应用[^1]。 #### 创建页面布局下面是一个简单的例子展示如何创建一个包含按钮(Button) 和输入框(Input) 的基本登录界面。 ```html <template> <a-layout> <a-layout-content style="text-align:center;">  <a-form :form="form" @submit="handleSubmit"> <a-form-item> <a-input v-decorator="['username', { rules: [{ required: true, message: '请输入用户名!' }] }]" placeholder="Username"/> </a-form-item> <a-form-item> <a-button type="primary" html-type="submit">Login</a-button> </a-form-item> </a-form> </a-layout-content> </a-layout> </template> <script> export default { data() { return { form: this.$form.createForm(this), }; }, methods: { handleSubmit(e) { e.preventDefault(); this.form.validateFields((err, values) => { if (!err) { console.log('Received values of form: ', values); } }); }, }, }; </script> ``` 这段代码展示了怎样利用 Ant Design Vue 提供的各种组件构建响应式且美观的应用程序界面[^2]。

阅读全文