2021-03-16-vue项目整合网页端框架element-ui，整合手机端框架vant操作步骤

最新推荐文章于 2025-06-22 10:38:53 发布

热爱Java的程序猿

最新推荐文章于 2025-06-22 10:38:53 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：后端前端文章标签： vue web

本文链接：https://blog.csdn.net/qq_41270550/article/details/114009911

后端同时被 2 个专栏收录

105 篇文章

订阅专栏

前端

5 篇文章

订阅专栏

本文介绍了如何将流行的Vue前端框架与Element-UI和Vant组件库结合使用。首先，通过npm安装这两个组件库，然后在main.js中引入并注册。对于Element-UI，以表格组件为例展示使用方法；对于Vant，以搜索框组件为例。这些组件库为Vue项目提供了丰富的UI元素，简化了开发流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

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>