vue中使用element(菜鳥教程)

前言：

      在我們的vue項目中可供引入的框架是很多的，這裏分享下在vue中使用element-ui的框架

element-ui官網入口

實現步驟：

一、引入element-ui

   方法1：安裝node包

cnpm i element-ui --save

  方法2：cdn引入

<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入組件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

二、main.js中註冊（如果上面使用的是cdn引入則沒有這一步）

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

Vue.use(ElementUI);

三、到這一步element-ui應該配置的文件我們都引入成功了，下來該使用了

1、打開官網地址，參照下面的4個小步驟可以拿到想要的效果和代碼

2、實際練習，以 el-button 按鈕作案例，找到Button，然後找到基礎用法，點擊粉色圈，打開源代碼

3、拿到源代碼以後在頁面上試一試

在 a.vue（案例文件）中引入 element的button

<template>
  <div>


    內容區域

   <el-button type="danger" plain>危險按鈕</el-button>




  </div>
</template>

4、到這一步，就可以到頁面上看你寫的效果了，教程到此結束了！