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

萌萌哒草头将军
677 阅读2分钟

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

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

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

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

我的githup在这里: github.com/mmdctjj/meo…

一、起因

我写项目，总是因为两个浏览器（使用谷歌和百度两个搜索引擎）切换感觉比较繁琐，索性自己写个页面，可以选择不同的搜素引擎，这样就不用来回切换了

另外，因为每天都要给自己很多学习任务，习惯了敲键盘，就想着顺便将todolist也给加到首页去

所以，这样便有了天天喵

二、设计

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，让自己随时紧绷起来

三、目标

总的来说下以后还会有哪些功能

1.todoList历史记录功能
2.支持更多的搜索引擎
3.实现功能和样式的DIY功能
4.实现一款简洁版todoList的APP

生活总是苦的，但是苦只是相对的，我宁可因为劳累而身体感觉痛苦，也不要因为碌碌无为虚度光阴而内心痛苦

共勉

avatar
文章
阅读
粉丝