脚本宝典收集整理的这篇文章主要介绍了基于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）分享
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...

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ vue，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的基于vue-cli-simple、ElementUI的TODOS案例全部内容，希望文章能够帮你解决基于vue-cli-simple、ElementUI的TODOS案例所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。