Ant Design Vue vite

Ant Design Vue vite

1、安装ant-design-vue插件

npm i --save ant-design-vue
npm i unplugin-vue-components -D

2、配置vite.config.js

// vite.config.js
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    ...
    Components({
      resolvers: [AntDesignVueResolver()]
    })
  ]
})

3.当组件的主题色不满足我们的需求时，可以自定义主题色

export default {
  plugins: [
     ... ...
    Components({
      resolvers: [
        AntDesignVueResolver({
        // 加上下面的内容
        importStyle: 'less',
        })
      ],
    }),
  ],
 
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
        // 在这里自定义主题色等样式
          'primary-color': '#1da57a',
          ......
        },
        javascriptEnabled: true,
      },
    },
  },
};
 

还可以新建一个样式文件，在里面放入如下代码：

@import "ant-design-vue/dist/antd.less";
@primary-color: #10d1de; // 全局主色
@link-color: #10d1de; // 链接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 错误色
@font-size-base: 14px; // 主字号
@heading-color: rgba(0, 0, 0, 0.85); // 标题色
@text-color: rgba(0, 0, 0, 0.65); // 主文本色
@text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
@disabled-color: rgba(0, 0, 0, 0.25); // 失效色
@border-radius-base: 4px; // 组件/浮层圆角
@border-color-base: #d9d9d9; // 边框色
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影

然后引入到main.ts中，需要修改vite.config.ts中的代码：

export default {
  plugins: [
     ... ...
    Components({
      resolvers: [
        AntDesignVueResolver({
        
 
        // 将importStyle的值修改为false
        importStyle: false,
        })
      ],
    }),
  ],
 
  css: {
    preprocessorOptions: {
      less: {
        // 不用在 modifyVars配置
        modifyVars: {},
        javascriptEnabled: true,
      },
    },
  },
};

4、unplugin-vue-components插件无法处理非组件模块，如 message、Modal、notification、Icon等，这种组件需要手动加载

import { createApp } from 'vue';
import App from './App';
const app = createApp(App);

import { Modal, message } from 'ant-design-vue';
import 'ant-design-vue/es/message/style/css';
import 'ant-design-vue/es/modal/style/css';

app.config.globalProperties.$Modal = Modal;
app.config.globalProperties.$message = message;

TS 等全局样式更改参考

5、引入 icon

无需安装插件

src/antd/icons.js

/**
 * @author wn
 * @description: 自定义组件 按需导入 icon
 * 引入的icon必须为大写 DashboardOutlined
 */

import { createVNode } from 'vue'
import * as $Icon from '@ant-design/icons-vue'

// 组件使用时 调用函数 传的值 { k:v } 下面 k 解构出  指定 k=icon
export const Icon = props => {
	const { icon } = props
	return createVNode($Icon[icon])
}

/*
 <template>
 <div>
   <Icon :icon="icon" />
 </div>
</template>
<script>
import { defineComponent,ref } from 'vue'
import { Icon } from './icon.js'
export default defineComponent({
    components:{
        Icon
    },
    setup(){
        const icon = ref('DashboardOutlined');
        return {
          icon
        }
    }
})
</script>

*/

// h 函数

/*
<script>
import {h} from 'vue'
import * as $icon from '@ant-design/icons-vue';
import config from '@/config'

// 自动引入antd icon图标

export default {
  props:['icon'],
  setup(props){
    // 判断是icon还是antd的图标
    if(props.icon.indexOf('icon-') != -1){
      return ()=>h(
          'i',
          {
            class:"iconfont "+props.icon,
            style:{fontSize:"18px"}
          });
    }else{
      return ()=>h(
          $icon[props.icon],
          {
            style:{fontSize:"18px"}
          });
    }
  }
}
</script>


*/