导入element ui
npm安装element插件
npm i element-ui -S
配置element
两种配置方法
方法一：完整引入，但样式文件需单独引入
// main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
方法二：按需引入
1.安装babel-plugin-component插件
npm install babel-plugin-component -D
2.配置到babel.config
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
引入组件
// main.js
import { Button, Select } from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
* Vue.use(Button)
* Vue.use(Select)
*/
使用
// app.vue
<el-button>默认按钮</el-button>
导入vant
安装vant插件（不要学官方使用vue ui安装有时会装不上）
npm i vant -S
配置vant
还是有两种配置方法
方法一：按需引入（不要误解了官方的自动按需引入，还是要手动写的）
1.安装babel-plugin-import插件
npm i babel-plugin-import -D
2.配置到babel.config
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
3.导入到vue中
// main.js
import { Button } from 'vant';
Vue.use(Button);
方法二：全部导入
// main.js
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
// 或是引入组件的方式
// Vue.component(Button.name, Button);
需要注意的是，vant配置了按需引入后就不能再使用全部导入，会失效的
使用
// app.js
<van-button type="primary">主要按钮</van-button>
个人建议：
element和vant不适合一起使用，element更适合用在pc端而vant适合用在移动端，根据项目不同选择使用不同的UI框架
