Vue UI组件库

Vue UI组件库

常用UI组件库

移动端常用UI组件库

1. Vant 4
2. Cube UI
3. Mint UI
4. NutUI

PC端常用UI组件库

1. Element UI
2. iView UI

element-ui基本使用

1. 安装element-ui：npm i element-ui -S

2. 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';
   
   
   //关闭Vue的生产提示
   Vue.config.productionTip = false
   
   //应用ElementUI
   Vue.use(ElementUI);
   
   
   //创建vm
   new Vue({
   	el:'#app',
   	render: h => h(App),
   })
   

3. src/App.vue

   <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>
   	export default {
   		name:'App',
   	}
   </script>
   

element-ui按需引入

1. 安装babel-plugin-component npm i babel-plugin-component -D

2. 修改 babel-config-js

   module.exports = {
     presets: [
       '@vue/cli-plugin-babel/preset',
   		["@babel/preset-env", { "modules": false }],
     ],
   	plugins:[
       [
         "component",
         {
           "libraryName": "element-ui",
           "styleLibraryName": "theme-chalk"
         }
       ]
     ]
   }
   

3. src/main.js

   //引入Vue
   import Vue from 'vue'
   //引入App
   import App from './App.vue'
   
   
   //按需引入
   import { Button,Row,DatePicker } from 'element-ui';
   
   //关闭Vue的生产提示
   Vue.config.productionTip = false
   
   //应用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),
   })
   

4. src/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>