一、 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>
Logo

前往低代码交流专区

更多推荐