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

2020-08-14  本文已影响0人  Putrid

第一步 :在项目中安装 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

上一篇 下一篇

猜你喜欢

热点阅读