VUE中使用Element-UI

• Element-UI官網

• 首先根據官網給的安裝命令安裝Element-UI：npm i element-ui -S

• 安裝完畢後引入 Element

  • 在 main.js 中添加/修改以下內容：

    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    
    Vue.use(ElementUI);
    
    new Vue({
      el: '#app',
      router,
      components: { App },
      render: h => h(App),
      template: '<App/>'
    })
    
    

• 然後就可以在官網找相關組件使用就可以了

  <template>
  <div>
      <el-row>
        <el-button>默認按鈕</el-button>
        <el-button type="primary" v-on:click="search">主要按鈕</el-button>
        <el-button type="success" v-on:click="search">成功按鈕</el-button>
        <el-button type="info">信息按鈕</el-button>
        <el-button type="warning">警告按鈕</el-button>
        <el-button type="danger">危險按鈕</el-button>
      </el-row>
    </div>
  </template>
  

• 效果