结合使用ui组件库(element-ui)

41_src_element-ui组件库/App.vue

@@ -0,0 +1,41 @@
+<template>
+   <div>
+     <button>原生的button</button>
+     <input type="text">
+     <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 class="block">
+       <span class="demonstration">默认</span>
+       <el-date-picker
+           type="date"
+           placeholder="选择日期">
+       </el-date-picker>
+     </div>
+     <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>
+<style lang="css" scoped>
+
+</style>
+
+
+

41_src_element-ui组件库/main.js

@@ -0,0 +1,32 @@
+//引入Vue
+import Vue from "vue";
+//引入App
+import App from './App';
+//完整引入
+//引入element-ui组件库
+// import ElementUI from 'element-ui';
+//引入element全部样式
+// import 'element-ui/lib/theme-chalk/index.css';
+
+//使用element ui插件库
+// Vue.use(ElementUI);
+
+//按需引入
+import { Button, Input, Row, DatePicker } from 'element-ui';
+Vue.use(Button);
+Vue.use(Input);
+Vue.use(Row);
+Vue.use(DatePicker);
+
+
+
+//关闭Vue的生产提示
+Vue.config.productionTip = false;
+
+new Vue({
+    el: '#app',
+    render: h => h(App),
+});
+
+
+