vite+vue3+TS项目引入antd-vue的问题记录

文章目录

1、vite创建的vue+TS项目引入antd-vue
2、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'

vite+vue3+TS项目引入antd-vue的问题记录相关推荐

vite+vue3+ts项目搭建之集成qiankun让其成为子应用模板(vite+vue3+ts+qiankun项目)—新增主应用在线地址可以进入vue2/vue3子应用
前言以下操作,是续接之前第四步 --即:vite+vue3+ts+pinia+element-plus项目已完成搭建好,可以直接业务开发了主应用技术栈:vue2+webpack+js 集成qia ...
vite+vue3+ts项目插件使用（提高开发效率vite+vue3插件使用）新增在线预览地址
在线预览 Link:https://wocwin.github.io/wocwin-admin/ 一.@vitejs/plugin-vue-jsx vite+vue3项目全面支持jsx语法 npm i ...
用vite创建 vue3 ts项目
先看看vite官网这都2022年了,你肯定玩过vite + vue3 + ts项目吧原先都是其他同事创建好项目,我直接上手这次我自己来创建一下,在这里做一下记录可以直接跟着官方教程走 http ...
使用Vite创建Vue3+TS项目并整合Element Plus框架等一条龙服务
记录一下使用Vite创建Vue3+TS项目以及整合Element Plus框架,还有Less.Pinia.Vue-router.monaco-editor等插件或组件. 一.使用Vite创建Vue3+ ...
vite+vue3+ts+element-plus项目搭建--超详细
vite+vue3+ts+element-plus项目搭建–超详细 vite 作用快速的冷启动:不需要等待打包操作: 即时的热模块更新:替换性能和模块数量的解耦让更新飞起: 真正的按需编译:不再等待 ...
vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用（2）
回顾上篇文章地址:vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用(1)_konsei的博客-CSDN博客上篇文章搭建了vue3项目,引入了ant ...
使用vue-cli创建vue3+ts项目
使用vue-cli创建vue3+ts项目提示:该文章为vue3+ts的!该文章是博主看的B站尚硅谷视频课来进行整理的!尚硅谷的课真的很不错! 文章目录使用vue-cli创建vue3+ts项目前言 ...
vite + vue3 + ts集成Cesium
vite + vue3 + ts集成Cesium 安装cesium:npm i cesium vite-plugin-cesium vite -D 在vite.config.ts中进行相应的cesiu ...
vite创建ts项目定义变量无法类型检测
最初我在公司使用vite创建ts项目,我以为是我缺少什么插件但是我volar都安装,也把vuter也禁止了还是没用.(执行命令 npm init vite@latest) 然后我回家又自己笔记本试了 ...

vite+vue3+TS项目引入antd-vue的问题记录

文章目录

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

2、antd-vue定制主题报错

vite+vue3+TS项目引入antd-vue的问题记录相关推荐

最新文章

热门文章