同步操作将从 绝望的小韭菜/ant-design-pro-vue3 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
基于 Vite4 Vue3 Ant-Design-of-Vue2 TS 实现的 Ant Design Pro Vue
码云地址: https://gitee.com/Onces/ant-design-pro-vue3
个人中心
可点击右下角锁头按钮进行解锁
#拉取项目代码
git clone https://github.com/bailihuiyue/ant-design-pro-vue3.git
cd ant-design-pro-vue3
#安装依赖
yarn install
#开发模式运行
yarn dev 不带开发球
yarn dev-ui 带开发球
#编译项目
yarn build
图标除了 Ant Design Vue 自带的图标以外还使用了 vite-plugin-svg-icons 插件缓存svg,所有图标都放在src/assets/icons中
想使用antv自带的图标请拷贝node_modules@ant-design\icons-svg\inline-svg到图标文件夹,会自动引入,名称为 文件夹名-文件名 例如a下的b.svg,SvgIcon组件传入name="a-b"即可:
想获取所有已添加的icon:
import ids from 'virtual:svg-icons-names';
// => ['icon-icon1','icon-icon2','icon-icon3']
这个插件是自动导入的,然后写到body上,如果图标过多觉得影响效率可以使用vite-plugin-vue-svg,手动引入一个个图标,demo在SvgIcon/manual中
注意:svg文件的 标签上必须有 fill="currentColor" 字段,这样才能从外部的span等标签修改颜色,否则颜色不可变
优点
1. 可以任意在生产环境下选择主题颜色;
2. 没有上一中法案的问题3,主题更改比较全面
- 缺点:
1. 由于是动态生成主题颜色,会有性能损耗
2. 必须先找到antv主颜色的色号,否则替换主题功能失效,所以当antv主色更改时,需要代码中跟着一起更改,建议锁定antv版本,避免该问题;
- 猜测原理,根据该插件说明和代码运行现象猜测,是以主颜色生成几个临近颜色然后对应找到整个项目中包含这些颜色的css样式然后对比替换比如原来是[a,b,c,d],现在是[1,2,3,4],那么a变成1,b变成2这样对应着替换,然后把提换完成的css写入到body底部,完成主题切换,不需要根据@primary-color这种定义去查找,这样靠颜色替换比较完整
黑夜模式目前使用了antv官网的黑夜css,采用动态添加link完成,不能适配所有页面,因此在darkModePatch.less写下一些兼容样式
3.本项目使用了第三种方案: 使用官方antv V3版本的css变量进行主题修改,达到了性能和体积的最优解
用于自动生成一套模板,包括国际化,vue文件,service等文件
项目为了保持了ant vue pro样式一致,部分代码引用自ant vue pro,如global.less,部分插件和原理借鉴vben,感谢两位大大
当前 <script setup lang="ts"></script>有bug,会导致.ts文件无法引入,报错 The requested module '/src/views/user/ty.ts' does not provide an export named 'FormState'
文档里有一些注释,搭配vscode插件better-comments食用,风味更佳: 注释TODO: 待完成 bug:todo: bug info:todo: 发现的一些情况 warn:todo: 可能有bug ques:todo: 疑问 只有大写的'TODO'才表示未完成的功能,小写的todo只是为了方便搜索而已
Edge Chrome 等现代浏览器,目前只测试过Chrome,没有Mac所以Safari没有测试
1.如果想要更换ant3的前缀prefixCls,不需要像官方示例中那样编译less文件成css,因为如果编译之后,就变成css了,没有办法再动态改变主题了,一个做法是:
//1.在main.ts中(最重要的一步是,不再引入css,直接引入可定制的less)
import 'ant-design-vue/dist/antd.variable.less';
//2.App.vue中(如果不改变主题,这步可以省略)
import { ConfigProvider } from 'ant-design-vue';
ConfigProvider.config({
prefixCls: 'coseffect',
theme: {
primaryColor: '#25b864',
},
});
//3.vite.config.ts中
export default defineConfig({
css: {
preprocessorOptions: {
less: {
// modifyVars: generateModifyVars(),
javascriptEnabled: true,
// 添加这一句(// ant-design-vue 4.x版本不需要了)
modifyVars: {
'@ant-prefix': 'coseffect',
}
},
},
},
})
2.volar似乎不能像vetur一样调用各种格式化插件,目前只能用prettier插件凑合
//1.项目根目录找到.eslintrc.cjs
rules: {
'prettier/prettier': [
'warn' //这里设置warn,其他的不要
]
}
//2.prettierrc.json文件
{
"printWidth": 200, //加这行
}
3.根目录 index.html 文件标题添加.colorfulTitle 类名,可以实现刷新页面等待时有彩色文字效果
4.解决使用 vloar 之后 vscode 格式化变慢问题(不一定管用)
// 方法一
// 1.将 Volar 更新到最新版本
// 2.禁用内置 TypeScript 扩展 设置为禁用(工作区)
// 到插件部分搜索框内输入@builtin Typescript
// 将“JavaScript 和 TypeScript 的语言功能“禁用掉(第一个)
// 然后另外一个basic的我们保留
// 方法二
// 1.打开vscode之后,点击文件==>首选项==>设置
// 搜索设置
// search.followSymlinks
// 然后在右侧用户自定义设置中将这个值改为 false
// search.followSymlinks = false,
// 2.谷歌浏览器的硬件加速更改
// 解决步骤:打开Chorme -> 设置 -> 高级 -> 【系统】 -> 将【启用硬件加速模式】取消勾选即可
// 参考资料:
// 1.https://blog.csdn.net/dangbai01_/article/details/128186524
// 2.https://blog.csdn.net/yw00yw/article/details/87861261
// 3.https://www.cnblogs.com/hongzhending/p/17336133.html
下次一定?给个Star也行啊
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。