20-Vue实战项目：电商管理系统（Element-UI）总结

20-Vue实战项目：电商管理系统（Element-UI）总结

结果如下：

---

这算是我自己跟着视频做的第一个比较完整的可以看的项目了，用时18天，但这视频的总时间是20个小时，自己还是比较的低效率。不多说看看着里面到底是有一些啥东西吧

需要预备的知识：

1. html，css，javascript 只要看过几眼都可以，用的不多不复杂
2. vue2 基础知识 ，v-if v-for之类
3. 啥都不会也可以跟着视频做的去，不知道的百度一下就可以

在这里面用到的东西:

1. element UI 主要就是对于这个前端组件库的使用
2. icon-font 字体图标也会用到
3. ECharts

做完这个vue的东西，主要学到的内容：

• 学会了使用git的一些简单的操作，把自己的代码提交到了云端 https://github.com/Aoyia/vue-store

  git status
  git branch //查看分支
  git branch login //新建分支
  git checkout master //切换分支
  git merge login // 合并分支
  git push //推送本地的代码到云端中
  
  // 把本地的分支推送推送到云端进行保存
  git checkout login
  git push -u origin  login
  

• 熟悉了vue的简单的做界面的流程，
  

• 对element UI 的使用变得熟悉，里面的现成的东西非常之多，网页上看得到的东西里面基本有，各种属性用起来真的方便
  

• 初步的学会使用axios
  

• 学会了简单的组件调用函数的实现
  

• 过滤器的使用，Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化

  <template slot-scope="scope">
              {{ scope.row.add_time | dateFormat }}
  </template>
  

  Vue.filter('dateFormat', function(originVal) {
    const dt = new Date(originVal);
  
    const y = dt.getFullYear();
    const m = (dt.getMonth() + 1 + '').padStart(2, '0');
    const d = (dt.getDate() + '').padStart(2, '0');
  
    const hh = (dt.getHours() + '').padStart(2, '0');
    const mm = (dt.getMinutes() + '').padStart(2, '0');
    const ss = (dt.getSeconds() + '').padStart(2, '0');
  
    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
  });
  

• 路由的设置
  

---

基本上也就这样些东西，对于我这种新手来说。这感觉还是不错的，简单易上手，不用复杂的一些传递参数的操作，做完后感觉vue没那么不亲切了，别人的代码也可以看上几眼。不过这视频https://www.bilibili.com/video/BV1EE411B7SU?from=search&seid=238269181249223393 好像是说并没有vue的组件的运用，全程都是在调用element UI的组件，而且到了后面基本上都是一模一样的代码，复制粘贴改一下参数就用，弹幕说全是冗余代码。后面得去看看codewhy老师的vue视频。有兴趣的还是可以做一下的，视频的后面部分很多重复个人觉得没必要做一些已经做过的。有兴趣的同学私我发老师的资料给你