代码拉取完成，页面将自动刷新
登录账号+密码 ssjadmin/ssjadmin
基于 Ant Design Pro + vue2.7 + typescript + vite 搭建的项目
环境和依赖
请注意，我们强烈建议本项目使用 Yarn 包管理工具，这样可以与本项目演示站所加载完全相同的依赖版本 (yarn.lock) 。由于我们没有对依赖进行强制的版本控制，采用非 yarn 包管理进行引入时，可能由于 Pro 所依赖的库已经升级版本而引入了新版本所导致的问题。
yarn install
yarn run vite
yarn run vite-build
- 打包后请先访问是否有误项目向上地址
- api 目录对应 views 目录
- 原先就在的 api 如果有改动，请新增或是新建对应的目录，方式与原项目混杂太多
- 新增页面使用 xxx/Index.vue 的方式，如果存在其他的子页面，只需要在相同目录处理即可
- 新增一个模块/或页面，记得都 readme 更新状态和将文件名添加到模块前以及对应的地址跳转
- s-table 下面的插槽需要使用 template 使用其他标签会导致 在特定的浏览器显示有误的问题
- 组件目录使用 components 原来的 modules 遇到就该，没遇到先不动
- /deep/ 替换为 ::v-deep
- 页面装修 链接跳转Links
- 页面装修 左侧组件配置components.data
- 页面装修 组件相关文件Phone.vue
- 页面装修 组件相关文件Editor.vue
- 页面装修 模拟组件数据Create.vue Update.vue
- 页面缓存 keepAliveRouteView.vue 由于之前没有使用页面缓存，导致数据频繁刷新，目前加入了页面缓存，具体看router.config.js文件
- 1、不使用 keep-alive 的情况：beforeRouteEnter --> created --> mounted --> destroyed
- 2、使用 keep-alive 的情况：beforeRouteEnter --> created --> mounted --> activated --> deactivated
- 3、使用 keep-alive，并且再次进入了缓存页面的情况：beforeRouteEnter -->activated --> deactivated
- table 高度自适应处理utils,实现逻辑，通过计算 table header 到页面顶部的高度，来动态当前 table 的高度，STabel 中给 table 赋予 scroll 参数 目前还存在问题，后期修复 对于超出宽度的表格，需要为表格 column 添加 width
- 商品多规格处处理 defaultSkuItemData 记得在这个对象中做参数的新增和修改
- vue2 中如何使用组合式 API 和 vueuse 工具包文章参考
// tailwind.config.js
module.exports = {
purge: [],
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
corePlugins: {
preflight: false, // 禁用默认样式,防止样式与默认样式产生冲突
},
}
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
Modern native Git hooks made easy
Husky improves your commits and more 🐶 woof!
npm install husky --save-dev
Usage Edit package.json > prepare script and run it once:
npm set-script prepare "husky install"
npm run prepare
// 后面这两个一定要装，不然无效
npm install -D @commitlint/cli
npm install -D @commitlint/config-conventional
参考 vue 规范 (Angular)
在 .husky/commit-msg 内注释以下代码即可
git commit -m 'feat(home): add home page'
这里比较特殊，跟 vue3 有点区别，并且还需要对vue类型进行扩展
<script>
import { getCurrentInstance } from 'vue'
</script>
src\components\Icon src\hooks src\views\demo\Index.vue
src\views\demo\Index.vue 中引入 下面的文件 src\hooks\web\useMessage.tsx
依赖升级只能一个一个的升级，不能全部一次性升级，这会导致颠覆性的错误，并且无法排除bug！执行以下命令即可看到目前有哪些依赖需要更新，并不是所有依赖都需要更新
npx taze
由于本次的改动比较大，对于原来项目影响不到，主要在于加了很多新特性和移除冗余的依赖即更新依赖，方式旧依赖带来的深坑，特别是这个项目将来作为一个长期维护的项目必然要走的方向。优化后估计对项目的运行和性能会有所提升，开发体验跟vue3差不多，对于我们开发而言是比较好的过度和技术学习
// TODO 这一步需要引入，不然组件导入成功，样式导入会失败
import 'ant-design-vue/dist/antd.less'
// 这个函数是在antdv的内部函数，尽管项目中用到icon的地方都加了theme,但是还是会报错，可能是antdv内部组件自带的icon是没有 添加theme导致
function withThemeSuffix(type, theme = "outlined") {
var result = type;
if (theme === 'filled') {
result += '-fill';
} else if (theme === 'outlined') {
result += '-o';
} else if (theme === 'twoTone') {
result += '-twotone';
} else {
// TODO 这一行是有bug的
// (0, _warning2['default'])(false, 'Icon', 'This icon \'' + type + '\' has unknown theme \'' + theme + '\'');
}
return result;
}
// <!-- <script crossorigin src="./_app.config.js"></script> --> 这段代码是看了编译后的报错和编译后的代码发现的，然后引入后就能正常运行,很狗，如果是排查发现，还好发现的时间没有花费很长的时间，不然真不知道是个玩意的错
Cannot destructure property 'VITE_GLOB_APP_TITLE' of 'C' as it is undefined.
at getAppEnvConfig
function renderTitle() {
const textList = props.text;
if (isString(textList)) {
return <p>{textList}</p>;
}
if (isArray(textList)) {
// TODO 错误代码在于这一段
return textList.map((text, index) => {
return (
<p key={text}>
<>
{props.showIndex ? `${index + 1}. ` : ''}
{text}
</>
</p>
);
});
// 修改后
return (textList as any).map((text, index) => {
return (
<p class={'mb-0'} key={text}>
{props.showIndex ? `${index + 1}. ` : ''}
{text}
</p>
)
})
}
return null;
}
return () => {
const propsData = { ...unref(attrs), ...props, onCancel } as Recordable
// Todo 这中方式写并没有绑定 有bug 估计是antdv3 与 antdv1.7.8 导致的问题
// return <Modal {...propsData}>{extendSlots(slots)}</Modal>;
return (
<Modal
width={propsData.width}
visible={propsData.visible}
height={props.height}
afterClose={propsData.afterClose}
cancelText={propsData.cancelText}
centered={propsData.centered}
closable={propsData.closable}
closeIcon={propsData.closeIcon}
confirmLoading={propsData.confirmLoading}
destroyOnClose={propsData.destroyOnClose}
forceRender={propsData.forceRender}
mask={propsData.mask}
maskClosable={propsData.maskClosable}
maskStyle={propsData.maskStyle}
okText={propsData.okText}
okType={propsData.okType}
title={propsData.title}
wrapClassName={propsData.wrapClassName}
zIndex={propsData.zIndex}
dialogClass={propsData.dialogClass}
>
{extendSlots(slots)}
</Modal>
)
}
// Custom title component: get title
const getMergeProps = computed((): Recordable => {
return {
// 移除 draggable 属性
...omit(props, 'draggable'),
...(unref(propsRef) as any),
}
})
// 引入一个变量 来控制 watchEffect的的监听 不引入该变量的话，watchEffect无法监听
const dataChange = ref<any>({})
watchEffect(() => {
const data = dataTransfer[unref(uidRef)]
if (!dataChange.value) return
if (!data) return
if (!callbackFn || !isFunction(callbackFn)) return
nextTick(() => {
callbackFn(data)
})
})
// 之前
return () => {
const Tag = !props.group ? Transition : TransitionGroup;
return (
<Tag name={name} mode={props.mode} {...attrs} onBeforeEnter={onBeforeEnter}>
{() => getSlot(slots)}
</Tag>
);
};
// 处理后 () => getSlot(slots) 这种方式无法渲染
// vue 无法直接引入 这两个 组件Transition : TransitionGroup
return () => {
const TagName = !props.group ? 'transition' : 'transition-group'
return (
<TagName name={name} mode={props.mode} {...attrs} onBeforeEnter={onBeforeEnter}>
{getSlot(slots)}
</TagName>
)
}
// 这种方式结构无效，具体还不知道是是么原因
const { push, replace } = _router || useRouter();
// 优化后
const router = _router || useRouter()
// 之前写法
icon: getIcon(iconType)
// 之后写法
icon: () => getIcon(iconType)
export function useI18n(namespace?: string): {
t: I18nGlobalTranslation
} {
...
const tFn: I18nGlobalTranslation = (key: string, ...arg: any[]) => {
if (!key) return ''
if (!key.includes('.') && !namespace) return key
// 下面是之前的写法，这种方法无法调用，我估计是 this的执行发生了改变导致的bug
// return t(getKey(namespace, key), ...(arg as I18nTranslationRestParameters)) as any
// 解决方案
return i18n.t(getKey(namespace, key), ...(arg as I18nTranslationRestParameters)) as any
}
...
}
框架更新进度
组件迁移进度
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手