文章目录
1、vite创建的vue+TS项目引入antd-vue2、antd-vue定制主题报错记录博，用于记录Vue3项目中遇到的问题
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.jscss: {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'
