vue配套ui框架 element ui（餓了麼開源專案）

• 進入專案先安裝element ui

npm i element-ui -S

• 也可以直接引入檔案

<!-- 引入樣式 -->
<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中引入ui庫

import Vue from 'vue'
import ElementUI from 'element-ui'; //引入element ui
import 'element-ui/lib/theme-chalk/index.css';//樣式需要單獨引入
import App from './App'


Vue.use(ElementUI);

// 在你的模組中呼叫
//這裡舉例對話方塊的呼叫
methods: {
cancel: function (item) {
    var _that = this; //記錄this
    this.$confirm('確認是否停止', '停止', {
      confirmButtonText: '確定',
      cancelButtonText: '取消',
      type: 'warning',
      center: true
    }).then(() => { //確定回撥
      //停止請求
      var param = item.id + '/cancel';
      this.$axios({
        url: this.api_url + 'stream/' + param,
        method: 'PUT'
      }).then(function () {//請求中的this需要在外邊記錄
        _that.$message({
          type: 'success',
          message: '停止成功!'
        });
      });
    }).catch(() => {  //取消回撥
      _that.$message({
        type: 'cancel',
        message: '取消!'
      });
    })
  }
}
 

其他部分可以參考文件進行使用。 element ui