Vue学习系列（二十一）：Element-ui的初体验

Vue学习系列：
上一篇：Vue学习系列（二十）：vue-cli脚手架快速搭建Vue项目

第一步：搭建vue-cli项目

vue create element-ui-demo

第二步：安装element-ui的依赖

cnpm i element-ui -S

第三步：引入依赖

我们安装好element-ui的依赖之后，我们必须在main.js入口文件中引入element-ui的依赖。

• 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.config.productionTip = false
Vue.use(ElementUI);

new Vue({
  render: h => h(App),
}).$mount('#app')

第四步：初步体验

我们替换HelloWorld.vue文件中的内容

• HelloWorld.vue

<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>
    
    <el-row>
      <el-button plain>朴素按钮el-button>
      <el-button type="primary" plain>主要按钮el-button>
      <el-button type="success" plain>成功按钮el-button>
      <el-button type="info" plain>信息按钮el-button>
      <el-button type="warning" plain>警告按钮el-button>
      <el-button type="danger" plain>危险按钮el-button>
    el-row>
    
    <el-row>
      <el-button round>圆角按钮el-button>
      <el-button type="primary" round>主要按钮el-button>
      <el-button type="success" round>成功按钮el-button>
      <el-button type="info" round>信息按钮el-button>
      <el-button type="warning" round>警告按钮el-button>
      <el-button type="danger" round>危险按钮el-button>
    el-row>
    
    <el-row>
      <el-button icon="el-icon-search" circle>el-button>
      <el-button type="primary" icon="el-icon-edit" circle>el-button>
      <el-button type="success" icon="el-icon-check" circle>el-button>
      <el-button type="info" icon="el-icon-message" circle>el-button>
      <el-button type="warning" icon="el-icon-star-off" circle>el-button>
      <el-button type="danger" icon="el-icon-delete" circle>el-button>
    el-row>
 div>
template>

<script>
export default {
  name: 'HelloWorld',
}
script>


<style scoped>
style>

第五步：启动项目

npm run serve

我们可以看到如下的页面效果，就说明我们引入element-ui已经成功了：