每天喵：定製一款簡潔的首頁

時間 2019-12-05

標籤每天定製一款簡潔首頁简体版

原文原文鏈接

前面我寫了兩篇文章，本身搭建了vue項目的運行環境vue

徒手擼個vue項目框架（上）

徒手擼個vue項目框架（下）

這裏繼續使用以前搭建好的環境，實現一個簡潔的首頁：每天喵。git

個人githup在這裏: github.com/mmdctjj/meo…github

1、原由

我寫項目，老是由於兩個瀏覽器（使用谷歌和百度兩個搜索引擎）切換感受比較繁瑣，索性本身寫個頁面，能夠選擇不一樣的搜素引擎，這樣就不用來回切換了npm

另外，由於天天都要給本身不少學習任務，習慣了敲鍵盤，就想着順便將todolist也給加到首頁去element-ui

因此，這樣便有了每天喵瀏覽器

2、設計

1.預覽

簡潔是我最喜歡的風格了，不喜歡花裏胡哨的，因此它看起來很素，十分簡約bash

雖然已經部署了，但這也只是測試版本，還有不少優化的空間，想看實際效果的點這裏

2.UI選擇

使用element-ui做爲ui庫，按需引入組件babel

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

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);
複製代碼