案例以教程的一个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的区别。

基于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...

本文固定链接: http://www.js-code.com/vue-js/vue-js_25351.html