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

2019年9月14日 200次阅读 来源: 晕晕大作战

案例以教程的一个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）实现效果如下
《基于vue-cli-simple、ElementUI的TODOS案例》

UL-CSS效果，其中使用了很多css效果，css由scss编写的。checkbox、删除按钮使用的是svg图标，算是个特色

《基于vue-cli-simple、ElementUI的TODOS案例》

ElementUI效果，整个app.vue的div使用其进行布局，行是flex布局，可以自动居中，并且是响应式，设置md sg的区别。

《基于vue-cli-simple、ElementUI的TODOS案例》
程序，这里使用工具是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);
    }

1. github地址

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

    原文作者：晕晕大作战
    原文地址: https://segmentfault.com/a/1190000014707278
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞