每天喵：定制一款简洁的首页

前面我写了两篇文章，本身搭建了vue项目的运行环境

徒手撸个vue项目框架（上）

徒手撸个vue项目框架（下）

这里继续使用以前搭建好的环境，实现一个简洁的首页：每天喵。

个人githup在这里: github.com/mmdctjj/meo…

1、原由

我写项目，老是由于两个浏览器（使用谷歌和百度两个搜索引擎）切换感受比较繁琐，索性本身写个页面，能够选择不一样的搜素引擎，这样就不用来回切换了

另外，由于天天都要给本身不少学习任务，习惯了敲键盘，就想着顺便将todolist也给加到首页去

因此，这样便有了每天喵

2、设计

1.预览

简洁是我最喜欢的风格了，不喜欢花里胡哨的，因此它看起来很素，十分简约

虽然已经部署了，但这也只是测试版本，还有不少优化的空间，想看实际效果的 点这里

2.UI选择

使用element-ui做为ui库，按需引入组件

element-ui按需引入须要官方插件支持：babel-plugin-compoent

cnpm i babel-plugin-compoent --save

// .babelrc文件
"plugins": [
    "@babel/transform-runtime",
    "syntax-dynamic-import",
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
]
复制代码

//在你须要组件的地方
import {
  Input,
  Select,
  Option,
  Button,
  Container,
  Dialog,
  Header,
  Form,
  FormItem,
  Notification
} from "element-ui";
Vue.use(Input);
Vue.use(Select);
Vue.use(Option);
Vue.use(Button);
Vue.use(Container);
Vue.use(Header);
Vue.use(Dialog);
Vue.use(Form);
Vue.use(FormItem);
复制代码

3.功能

a.登陆

进入页面会自动监测登陆信息，若是没有会弹出登陆框，建议使用手机号登陆，可是你随机使用一串数字也行，目前尚未验证，但为了之后方便仍是使用合法的手机号

b.搜索功能

你能够经过下拉框选择百度或者谷歌做为搜索引擎，默认是百度，之后它会是动态设置默认值的

自动打开新的标签页去搜索你想要搜素的内容

c.todoList

这是重头戏！！！ 有个头疼的事就是我好像已经习惯了键盘，每次要我拿笔记录今天的任务就以为很繁琐，因此很早就渴望一个简洁的todoList功能的首页了

虽然如今很简陋，只能记录当天的任务，可是不久就能够查看历史记录了

甚至还能够布置明天的任务

为了能够随时随地的安排本身，我还打算作个todoList的app，让本身随时紧绷起来

3、目标

总的来讲下之后还会有哪些功能

1.todoList历史记录功能

2.支持更多的搜索引擎

3.实现功能和样式的DIY功能

4.实现一款简洁版todoList的APP

生活老是苦的，可是苦只是相对的，我宁肯由于劳累而身体感受痛苦，也不要由于碌碌无为虚度光阴而心里痛苦

共勉