同时按需引入vant和element库

2 篇文章 0 订阅
1 篇文章 0 订阅

一、 Vant

官方地址

1. 通过 npm 安装

Vue 2 项目,安装 Vant 2:
npm i vant -S

Vue 3 项目,安装 Vant 3:
npm i vant@next -S

2.按需引入组件
  1. 安装插件 npm i babel-plugin-import -D
  2. babel.config.js中配置如下
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

之前:
在这里插入图片描述
之后:
在这里插入图片描述

3.使用
<template>
	<div>
		<van-button type="primary">主要按钮</van-button>
		<van-button type="info">信息按钮</van-button>
	</div>
</template>

<script>
	import Vue from 'vue';
	import { Button, Cell, CellGroup, Icon } from 'vant';
	Vue.use(Button).use(Cell).use(CellGroup).use(Icon)
</script>

二、 Element

1. npm 安装

官方地址

npm i element-ui -S

2.按需引入组件
  1. 安装插件 npm install babel-plugin-component -D
  2. babel.config.js中配置如下
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

之前:
在这里插入图片描述
之后:
在这里插入图片描述

3. 使用
<template>
	<div>
		<el-row>
    		<el-button>默认按钮</el-button>
    		<el-button type="primary">主要按钮</el-button>
    		<el-button type="success">成功按钮</el-button>
    		<el-button type="info">信息按钮</el-button>
    		<el-button type="warning">警告按钮</el-button>
    		<el-button type="danger">危险按钮</el-button>
  		</el-row>
	</div>
</template>

<script>
	import Vue from 'vue';
	import { Button, row } from 'element-ui';
	Vue.use(Button).use(row);
</script>

三、 两者通过引入

1. 通过npm安装各自按照各自的来
2.按需引入
  1. 各自按照各自的插件安装
    vant: npm i babel-plugin-import -D
    element: npm install babel-plugin-component -D
  2. babel.config.js中配置如下
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant'],
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

之前:
在这里插入图片描述
之后
在这里插入图片描述

3.使用

注意: 同一个页面按需引入有可能会遇到element用于vant组件重名的问题,此时需要进行别名的设置,如下

<template>
	<div>
		<el-row>
			<el-button plain>朴素按钮</el-button>
			<el-button type="primary" plain>主要按钮</el-button>
			<el-button type="success" plain>成功按钮</el-button>
			<el-button type="info" plain>信息按钮</el-button>
			<el-button type="warning" plain>警告按钮</el-button>
			<el-button type="danger" plain>危险按钮</el-button>
		</el-row>
		<div style="margin-top: 50px;">
			<van-button type="primary">主要按钮</van-button>
			<van-button type="info">信息按钮</van-button>
			<van-button type="default">默认按钮</van-button>
			<van-button type="warning">警告按钮</van-button>
			<van-button type="danger">危险按钮</van-button>
		</div>
	</div>
</template>
<script>
	import store from '../../store/index'
	import Vue from 'vue';
	import { Button as VButton, Cell, CellGroup, Icon } from 'vant'; // 因vant与element组件重名,设置引入是设置别名即可
	import { Button, row } from 'element-ui';
	Vue.use(VButton).use(Cell).use(CellGroup).use(Icon).use(Button).use(row);
</script>
  • 4
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值