配置AntdVue

antd vue 官方地址

时间: 2024-07-31

概览

基本配置步骤:

1. 使用 npm create vue@latest 来创建项目(会自动安装依赖于需要的组件).
2. 安装 antdVue, scss, dayjs 等库.
3. 安装按需加载的插件, 配置 vite.config.ts (推荐使用 ts).
4. 配置国际化.

详细步骤

创建项目

使用下面命令创建项目

npm create vue@latest

DevTools 挺好用.

安装一些依赖

npm i dayjs debug
npm i --save-dev @types/debug
npm i sass -D

dayjs 配置国际化会使用到, sass 是样式预处理工具. debug 方便在控制台显示调试信息.

安装 AntdVue

npm install ant-design-vue@4.x --save

安装按需加载需要的插件

npm install unplugin-vue-components -D

配置 vite.config.ts

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'

import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    vueDevTools(),
    Components({
      resolvers: [
        AntDesignVueResolver({
          importStyle: false,
        })
      ]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

配置国际化

1. 在 App.vue 文件中, 导入 ConfigProvider 组件, 包裹全局组件.
2. 导入 zhCN, 设置语言.
3. 导入 dayjs 来配置时间的语言.

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import { ConfigProvider } from 'ant-design-vue'
import zhCN from 'ant-design-vue/es/locale/zh_CN'

import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');
</script>

<template>
  <ConfigProvider :locale="zhCN">  
    <RouterView />
  </ConfigProvider>
</template>

<style scoped>
</style>

注意: 如果在导入 .vue 文件, 提示缺少类型描述时, 可以安装 @types/vue

npm install --save-dev @types/vue

在 main.ts 文件中, 添加 localStorage, 在其中添加 debug 项.

window.localStorage.setItem('debug', '*')

在需要的组件中调用 debug

<template>
  <component :is="TestComponent"></component>
</template>

<script setup lang="tsx">
import {
  TypographyTitle,
  Button,
  Space,
} from  'ant-design-vue'
import debug from 'debug'
import { onMounted } from 'vue';
const log = debug('debug:@/views/Test/Test1/Test1.vue')

const clickHandler = () => {
  log('单击事件')
}
onMounted(() => {
  log('生命周期事件 onMounted')
})

const TestComponent = () => <div>
  <TypographyTitle level={3}>测试页面</TypographyTitle>
  <Space>
    <Button onClick={clickHandler}>测试按钮</Button>
  </Space>
</div>
</script>