Vue-cli 项目中使用 Element-UI 组件库

第一步 ：在项目中安装 element-ui 组件

npm i element-ui -S

第二步：在main.js 中 引入 element-ui

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

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

第三步：在页面中使用

<template>
  <div class="hello">
    <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>

第四步：运行到浏览器中查看效果

image.png

提示：若组件想按需引入，参考https://element.eleme.cn/#/zh-CN/component/quickstart