基于vue cli simple与ElementUI的TODOS案例 - skylfx/vue-simple-todos GitHub Wiki

案例以教程的一个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）分享 1、created()钩子函数，进行了data数据的初始化，如果有本地数据取本地数据，没有默认push了几条数据。
2、ElementUI的el-table-column百分比宽度写法如 min-width ="50%"
3、获取ISO时间 let myDate = new Date();
this.rowdate = myDate.toISOString();
4、删除数组型的json的单条数据。
传入的单条记录，使用json查询结果再赋值实现
delItem (todo) {
this.todos = this.todos.filter((x) => x !== todo)
}
传入的index.使用splice直接删除指定index的数据 handleDelete(index, row) { this.todos.splice(index,1); }