[JavaScript知识库]vite+vue3+TS项目引入antd-vue的问题记录

1、vite创建的vue+TS项目引入antd-vue

由于不想直接在main.ts里写一大堆按需引入atnd组件的内容，所以采用单独的ts文件来操作

• 新建antd-custom.ts

// 这里用于规定传入installAntd的类型
import { App } from '@vue/runtime-dom';
import { 
    Button,
     message ,
     Form ,
     Input
    } from 'ant-design-vue';

// 按需引入
export default function installAntd(app:App<Element>):void{
    app.use(Button)
    app.use(Form)
    app.use(Input)
    app.config.globalProperties.$message = message;
}

• main.js 中调用installAntd

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import { createPinia } from 'pinia'
import installAntd from './assets/js/antd-custom'

const app = createApp(App)

// 路由管理
app.use(router)
// 状态管理
app.use(createPinia())
// antd组件
installAntd(app)
app.mount('#app')

2、antd-vue定制主题报错

报错内容：[vite] Internal server error: Inline JavaScript is not enabled. Is it set in your options?
处理：由于antd定义主题是通过less来的，所以在vite.config.js中对less开启js

// vite.config.js
  css: {
    preprocessorOptions: {
    // 预加载公共文件
      scss: {
        additionalData: '@import "@/assets/style/main.scss";',
      },
      // 处理vite报错Internal server error: Inline JavaScript is not enabled. Is it set in your options?
      less: {
        javascriptEnabled: true
      }
    },
  },

• antd-custom.less 【用于自定义主题样式】

@import 'ant-design-vue/dist/antd.less'; // 引入官方提供的 less 样式入口文件

@primary-color: #0067E1; // 全局主色
@link-color: #0067E1; // 链接色
@success-color: #00D1B3; // 成功色
@warning-color: #FFB92F; // 警告色
@error-color: #E00065; // 错误色
@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); // 浮层阴影

• antd-custom.ts

import '@/assets/style/antd-custom.less'

开发者涨薪指南

48位大咖的思考法则、工作方式、逻辑体系