由于 vant-ui 与 element-ui 部分组件存在冲突,导致在 vue-typescript 中 出现错误:
Subsequent property declarations must have the same type. Property '$notify' must be of type 'ElNotification', but here has type 'Notify'.
方案: 一个全局导入, 一个按需导入, 避免冲突的组件同时使用,如Notify;全局导入的直接引入即可。
- 情形一: 按需引入 vant。(适合引入vant 组件较少时)
重定义types: 需要 在src/文件下 新建 @types 或 type文件,并在@types/vant.d.ts中定义type
vant.d.ts
/* eslint-disable max-classes-per-file */
declare module 'vant/lib' {
import Vue from 'vue';
import { VanComponent } from 'vant/types/component';
import { Dialog } from 'vant/types/dialog';
import { List } from 'vant/types/list';
import { Toast } from 'vant/types/toast';
import { Field } from 'vant/types/field';
import { SwipeCell } from 'vant/types/swipe-cell';
import { Tabs } from 'vant/types/tabs';
// import {
// AddressEdit,
// Area,
// Calendar,
// Checkbox,
// CheckboxGroup,
// CountDown,
// DatetimePicker,
// Dialog,
// DropdownItem,
// Field,
// Form,
// ImagePreview,
// Lazyload,
// List,
// Locale,
// Picker,
// Sku,
// Swipe,
// SwipeCell,
// Tabs,
// Toast,
// Uploader,
// } from "vant/types";
export const version: string;
export function install(vue: typeof Vue): void;
export class ActionSheet extends VanComponent {}
export class AddressList extends VanComponent {}
export class Button extends VanComponent {}
export class Card extends VanComponent {}
export class Cell extends VanComponent {}
export class CellGroup extends VanComponent {}
export class Circle extends VanComponent {}
export class Col extends VanComponent {}
export class Collapse extends VanComponent {}
export class CollapseItem extends VanComponent {}
export class ContactCard extends VanComponent {}
export class ContactEdit extends VanComponent {}
export class ContactList extends VanComponent {}
export class CouponCell extends VanComponent {}
export class CouponList extends VanComponent {}
export class Divider extends VanComponent {}
export class DropdownMenu extends VanComponent {}
export class Empty extends VanComponent {}
export class Grid extends VanComponent {}
export class GridItem extends VanComponent {}
export class GoodsAction extends VanComponent {}
export class GoodsActionButton extends VanComponent {}
export class GoodsActionIcon extends VanComponent {}
export class Icon extends VanComponent {}
export class Image extends VanComponent {}
export class IndexAnchor extends VanComponent {}
export class IndexBar extends VanComponent {}
export class Info extends VanComponent {}
export class Loading extends VanComponent {}
export class NavBar extends VanComponent {}
export class NoticeBar extends VanComponent {}
export class NumberKeyboard extends VanComponent {}
export class Overlay extends VanComponent {}
export class Pagination extends VanComponent {}
export class Panel extends VanComponent {}
export class PasswordInput extends VanComponent {}
export class Popup extends VanComponent {}
export class Progress extends VanComponent {}
export class PullRefresh extends VanComponent {}
export class Radio extends VanComponent {}
export class RadioGroup extends VanComponent {}
export class Rate extends VanComponent {}
export class Row extends VanComponent {}
export class Search extends VanComponent {}
export class ShareSheet extends VanComponent {}
export class Sidebar extends VanComponent {}
export class SidebarItem extends VanComponent {}
export class Skeleton extends VanComponent {}
export class Slider extends VanComponent {}
export class Step extends VanComponent {}
export class Stepper extends VanComponent {}
export class Steps extends VanComponent {}
export class Sticky extends VanComponent {}
export class SubmitBar extends VanComponent {}
export class SwipeItem extends VanComponent {}
export class Switch extends VanComponent {}
export class SwitchCell extends VanComponent {}
export class Tab extends VanComponent {}
export class Tabbar extends VanComponent {}
export class TabbarItem extends VanComponent {}
export class Tag extends VanComponent {}
export class TreeSelect extends VanComponent {}
export {
// AddressEdit,
// Area,
// Calendar,
// Checkbox,
// CheckboxGroup,
// CountDown,
// DatetimePicker,
Dialog,
// DropdownItem,
// Form,
Field,
// ImagePreview,
// Lazyload,
List,
// Locale,
// Picker,
// Sku,
// Swipe,
SwipeCell,
Tabs,
Toast,
// Uploader,
};
}
定义plugins/vant.ts 按需引入(需要啥引入即可)
import Vue from 'vue';
import {
Dialog,
Toast,
NavBar,
Button,
Cell,
CellGroup,
Popup,
Field,
PullRefresh,
SwipeCell,
Collapse,
CollapseItem,
Step,
Steps,
Tab,
Tabs,
List,
Search,
} from 'vant/lib';
import 'vant/lib/index.css';
Vue.use(Dialog);
Vue.use(Toast);
Vue.use(NavBar);
Vue.use(Button);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Popup);
Vue.use(Field);
Vue.use(PullRefresh);
Vue.use(SwipeCell);
Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(Step);
Vue.use(Steps);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(List);
Vue.use(Search);
src/main.ts 中
import '@/plugins/vant';
- 情形二: 按需引入 element。
src/main.ts
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
// 按需引入你用到的组件, 而不是安装整个组件库
import ElButton from 'element-ui/lib/button';
import 'element-ui/lib/theme-chalk/button.css';
Vue.component('el-button', ElButton);
// 并且在tsconfig.json中添加配置规则
{
"compilerOptions": {
"paths": {
// 指向正确的声明映射
"element-ui/lib/button": ["node_modules/element-ui/types/button"]
}
}
}

本文探讨了在项目中同时使用Vant和Element-TS时可能遇到的问题及其解决方案。通过分别介绍按需引入和全局导入的方法,避免组件冲突,特别是对于Notify等组件的使用。在按需引入Vant时,需要自定义types并在@types/vant.d.ts定义类型,同时在plugins/vant.ts按需引入组件。而在src/main.ts中进行配置。
795

被折叠的 条评论
为什么被折叠?



