初识 vue（15）—— element-ui 的引入与使用

一、安装

npm i element-ui -S

二、完整引入

1、在 main.js 中写入以下内容：

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)
});

2、使用：

点击组件，找到你所需要的，然后点击显示代码，复制代码粘贴到页面即可

3、例如：

<template>
  <div>
    <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>

三、按需引入

1、先安装 babel-plugin-component

npm install babel-plugin-component -D

2、将 .babelrc 修改为

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

3、在 main.js 中引入所需组件

import { Button } from 'element-ui';

Vue.use(Button)

4、使用方法同完整引入