基於vue-cli-simple、ElementUI的TODOS案例

案例以教程的一個vue項目做爲基礎進行改造，包括經過使用ElementUI進行頁面佈局改造，使用了其中的tab、按鈕、table、提示等組件。
另外調整使用了vue-moment，能夠不用本身寫日期的轉換過濾器。
（1）安裝配置
1.安裝vuecli後，cd到程序目錄初始化simple模版
npm install -g vue-cli
vue init simple vue-simple-todos
2.工程目錄下安裝ElementUI
npm i element-ui -S
3.安裝vue-moment日期時間轉換js
npm install vue-moment
4.安裝url-loader（simple好像默認沒這個加載器，可是elui又必須）
webpack.config.js的 rules部分增長以下（）

,
      {
        test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 10000
          }
        }]
      }

---

（2）實現效果以下

UL-CSS效果，其中使用了不少css效果，css由scss編寫的。checkbox、刪除按鈕使用的是svg圖標，算是個特點

ElementUI效果，整個app.vue的div使用其進行佈局，行是flex佈局，能夠自動居中，而且是響應式，設置md sg的區別。

程序，這裏使用工具是vscode，特別好的工具。
（3）分享
一、created()鉤子函數，進行了data數據的初始化，若是有本地數據取本地數據，沒有默認push了幾條數據。
二、ElementUI的el-table-column百分比寬度寫法如 min-width ="50%"
三、獲取ISO時間

let myDate = new Date();
  this.rowdate = myDate.toISOString();

四、刪除數組型的json的單條數據。
傳入的單條記錄，使用json查詢結果再賦值實現
delItem (todo) {

this.todos = this.todos.filter((x) => x !== todo)
            }

傳入的index.使用splice直接刪除指定index的數據
handleDelete(index, row) {

this.todos.splice(index,1);
    }

---

1. github地址

https://github.com/skylfx/vue...