美文网首页
Vue-cli 项目中使用 Element-UI 组件库

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

作者: Jeex | 来源:发表于2020-08-14 14:36 被阅读0次

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

相关文章

网友评论

      本文标题:Vue-cli 项目中使用 Element-UI 组件库

      本文链接:https://www.haomeiwen.com/subject/pdmgdktx.html