30-Vue UI 组件库

常用UI组件库

移动端常用UI组件库

1. Vant
2. Cube UI
3. Mint UI
4. https://nutui.jd.com/#/

PC端常用UI组件库

1. Element UI
2. IView UI

element-ui基本使用

1. 安装 element-ui：npm i element-ui -S2
2. src/main.js

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'; // 引入ElementUI组件库
import 'element-ui/lib/theme-chalk/index.css'; // 引入ElementUI全部样式

Vue.config.productionTip = false
Vue.use(ElementUI) // 使用ElementUI

new Vue({
  el:"#app",
  render: h => h(App),
})

3. src/App.vue

<template>
<div>
<br>
<el-row>
  <el-button icon="el-icon-search" circle></el-button>
  <el-button type="primary" icon="el-icon-edit" circle></el-button>
  <el-button type="success" icon="el-icon-check" circle></el-button>
  <el-button type="info" icon="el-icon-message" circle></el-button>
  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
  <el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>
</div>
</template>

<script>
  export default {
  name:'App',
}
</script>

element-ui按需引入

1. 安装 babel-plugin-componentnpm i babel-plugin-component -D
2. 修改 babel-config-js
3. src/main.js:

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'

//完整引入
//引入ElementUI组件库
// import ElementUI from 'element-ui';
//引入ElementUI全部样式
// import 'element-ui/lib/theme-chalk/index.css';

//按需引入
import { Button,Row,DatePicker } from 'element-ui';

//关闭Vue的生产提示
Vue.config.productionTip = false

//应用ElementUI
// Vue.use(ElementUI);
Vue.component('atguigu-button', Button);
Vue.component('atguigu-row', Row);
Vue.component('atguigu-date-picker', DatePicker);

//创建vm
new Vue({
  el:'#app',
  render: h => h(App),
})