angular使用ngx-vant组件库

安装

首先去官网找到安装命令

yarn add ngx-vant or npm i ngx-vant

使用

单独创建一个ts文件，把ngx-vant的标签放到里面，这样就可以全局导入了

import { NgModule } from '@angular/core';

import { ButtonModule } from 'ngx-vant/button';
import { CellModule } from 'ngx-vant/cell';
import { CellGroupModule } from 'ngx-vant/cell-group';
import { IconModule } from 'ngx-vant/icon';
import { ImageModule } from 'ngx-vant/image';
import { RowModule } from 'ngx-vant/row';
import { ColModule } from 'ngx-vant/col';
import { FieldModule } from 'ngx-vant/field';
import { PickerModule } from 'ngx-vant/picker';
import { LoadingModule } from 'ngx-vant/loading';
import { PopupModule } from 'ngx-vant/popup';
import { ToastModule } from 'ngx-vant/toast';
import { NotifyModule } from 'ngx-vant/notify';
import { OverlayModule } from 'ngx-vant/overlay';
import { ProgressModule } from 'ngx-vant/progress';
import { StickyModule } from 'ngx-vant/sticky';
import { TagModule } from 'ngx-vant/tag';
import { NavBarModule } from 'ngx-vant/nav-bar';
import { TabsModule } from 'ngx-vant/tabs';
import { TabModule } from 'ngx-vant/tab';
@NgModule({
    declarations: [],
    imports: [
        ButtonModule,
        CellModule,
        CellGroupModule,
        IconModule,
        ImageModule,
        RowModule,
        ColModule,
        FieldModule,
        PickerModule,
        NotifyModule,
        LoadingModule,
        PopupModule,
        ToastModule,
        OverlayModule,
        ProgressModule,
        StickyModule,
        TagModule,
        NavBarModule,
        TabsModule,
        TabModule
    ],
    exports: [
        ButtonModule,
        CellModule,
        CellGroupModule,
        IconModule,
        ImageModule,
        RowModule,
        ColModule,
        FieldModule,
        PickerModule,
        NotifyModule,
        LoadingModule,
        PopupModule,
        ToastModule,
        OverlayModule,
        ProgressModule,
        StickyModule,
        TagModule,
        NavBarModule,
        TabsModule,
        TabModule
    ]
})
export class VantModule { }

挂载

在app.module.ts中挂在刚才创建的ts文件

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { VantModule } from './ui/vant.module';
@NgModule({
    declarations: [
        AppComponent,

    ],
    imports: [
        BrowserModule,
        FormsModule,
        BrowserAnimationsModule,
        VantModule
    ],
    providers: [
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }