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