用ant-design-vue快速入门vue3项目开发

2023-11-29 22:57:07

在 Vue 3 项目中集成 Ant Design Vue

引言

随着 Vue 3 的发布，前端开发社区正在兴起，开发者们渴望使用它来构建新的项目。为了提升用户界面 (UI) 的开发体验，选择合适的 UI 框架至关重要。在众多可用的选择中，Ant Design Vue 脱颖而出，成为 Vue 3 项目的热门选择。

安装 Ant Design Vue

集成 Ant Design Vue 的第一步是安装它。您可以使用 npm 或 yarn 包管理器：

npm install ant-design-vue

yarn add ant-design-vue

导入 Ant Design Vue 样式

安装完成后，需要导入 Ant Design Vue 样式表，以便在项目中应用其样式：

import 'ant-design-vue/dist/antd.css';

使用 Ant Design Vue 组件

Ant Design Vue 提供了一个丰富的组件库，包括按钮、表格、表单和图表。要使用这些组件，您需要首先将它们导入您的项目：

import { Button } from 'ant-design-vue';

然后，您就可以在模板中使用组件：

<Button type="primary">按钮</Button>

项目配置

在使用 Ant Design Vue 之前，需要对项目进行一些配置。首先，您需要安装 vue-router，它是一个路由库，用于管理页面的路由。

npm install vue-router

yarn add vue-router

接下来，创建一个名为 router.js 的路由文件，并定义您的路由规则：

// router.js
import VueRouter from 'vue-router';
import HelloWorld from './HelloWorld.vue';

export default new VueRouter({
  routes: [
    {
      path: '/',
      component: HelloWorld,
    },
  ],
});

最后，创建一个 main.js 文件，并使用 Vue、VueRouter 和 Ant Design Vue 创建一个新的 Vue 实例：

// main.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Antd from 'ant-design-vue';
import App from './App.vue';

Vue.use(VueRouter);
Vue.use(Antd);

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: App,
    },
  ],
});

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');