1. PC 端常用 UI 组件库
Element UI:https://element.eleme.cn IView UI:https://www.iviewui.com
2. 移动端常用 UI 组件库
Vant:https://youzan.github.io/vant Cube UI:https://didi.github.io/cube-ui Mint UI:http://mint-ui.github.io
3. 组件的使用
按照官方文档,用命令安装 引入组件库 应用组件
4. 使用 Element UI 组件库 案例
4.1 main.js
import Vue from 'vue'
import App from './App.vue'
import { Button, Row, DatePicker } from 'element-ui' ;
Vue. config. productionTip = false
Vue. component ( 'atguigu-button' , Button) ;
Vue. component ( 'atguigu-row' , Row) ;
Vue. component ( 'atguigu-date-picker' , DatePicker) ;
new Vue ( {
el: '#app' ,
render : h => h ( App) ,
} )
4.2 App.vue
< template>
< div>
< button> 原生的按钮</ button>
< input type = " text" >
< atguigu-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>
</ atguigu-row>
< atguigu-date-picker
type = " date"
placeholder = " 选择日期" >
</ atguigu-date-picker>
< atguigu-row>
< el-button icon = " el-icon-search" circle > </ el-button>
< el-button type = " primary" icon = " el-icon-s-check" 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>
</ atguigu-row>
</ div>
</ template>
< script>
export default {
name: 'App' ,
}
</ script>