前言

• vue是现在流行的前端框架，对应的也诞生了许多vue对应的皮肤组件库，手机端和网页端都出现很多可以供vue使用的组件库
• 下面抽两个组件库讲一下和vue的整合步骤

element-ui

• element-ui官方文档
• 安装

npm i element-ui -S

• main.js加入下面代码

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

• 使用(举例)，直接去element-ui官方复制组件代码放到你项目里新建的vue文件即可使用

<template>
  <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        v-if="false"
        width="120"
        prop="id"
      >
      </el-table-column>
 </el-table>
</template>

vant

• vant官方文档
• 安装

# Vue 2 项目，安装 Vant 2：
npm i vant -S

# Vue 3 项目，安装 Vant 3：
npm i vant@next -S

• main.js加入下面代码

import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

• 使用(举例)，直接去vant官方复制组件代码放到你项目里新建的vue文件即可使用

<template>
      <van-search
        v-model="value"
        shape="round"
        background="#4fc08d"
        placeholder="请输入备件编码"
        @search="onSearch"
        @cancel="onCancel"
      />
</template>