Vue UI 组件库记录 常见

Vue UI 组件库

（一）移动端常用 UI 组件库

1. Vant https://youzan.github.io/vant
2. Cube UI https://didi.github.io/cube-ui
3. Mint UI http://mint-ui.github.io

（二）7.2 PC 端常用 UI 组件库
4. Element UI https://element.eleme.cn
5. IView UI https://www.iviewui.co

ElementUI组件的全部引入和局部引入方式

1. main.js

//引入vue
import Vue from 'vue';

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

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


//ElementUI组件库中的按需引入
import { Button, Row } from 'element-ui';

//停止生产提示
Vue.config.productionTip = false;

//使用ElementUI
// Vue.use(ElementUI);

//部分使用ElementUI
//比如Button.name就是Banner组件中的 el-button ；后面的Button表示 我们上面按需引入的Button
Vue.component(Button.name, Button)
Vue.component(Row.name, Row)
/* 或写为
 * Vue.use(Button)
 * Vue.use(Row)
 */

//创建一个vm
new Vue({
    render: h => h(App),
}).$mount('#app');

2. 组件

<template>
  <div>
    原始按钮<input type="text" />
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Banner",
};
</script>

<style>
</style>