基於vue 的 UI框架 -- Mint UI

網址： http://mint-ui.github.io/docs/#!/zh-cn

官網： http://mint-ui.github.io/#!/zh-cn

vue2.0實例： http://blog.marryto.me/vuejs-eyepetizer/

項目構建

首先全局安裝vue-cli，幾個簡單的步驟就可以幫助你快速構建一個vue項目。

npm install -g vue-cli

然后，利用vue-cli構建一個vue項目，並安裝項目依賴

vue init webpack eyepetizer
cd eyepetizer & npm install

生成修改后的項目文件如下

├── build //webpack基本配置文件
├── config //配置文件相關
├── dist //build生成后的文件相關
│
├── src
│   ├── assets //項目使用scss資源
│   │   └── scss
│   ├── components //組件相關
│   ├── lib //api或其他需要引用的lib
│   ├── router //router相關
│   └── store //vuex store相關
│
├── static //項目靜態文件
└── test //測試文件

項目配置與開發

項目中使用了sass vue-router vuex querystring等庫，先安裝相關依賴包

npm install sass-loader vuex style-loader node-sass moment css-loader axios file-loader querystring vue-router --save-dev

然后在基本頁面實現並配置相關路由：

import Vue from 'vue';
import Router from 'vue-router';
 
import Hello from 'components/Hello';
import Detail from 'components/Detail';
 
Vue.use(Router);
 
export default new Router({
  scrollBehavior: () => ({ y: 0 }),
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello,
    },
    {
      path: '/detail/:vid',
      name: 'Detail',
      component: Detail,
    },
  ],
});

其中hello為頁面首頁，最終會實現為視頻列表頁面，目前先說視頻詳情頁面：

API：

# 獲取視頻詳情
http://baobab.wandoujia.com/api/v1/video/14416
 
# 獲取關聯視頻
http://baobab.wandoujia.com/api/v1/video/related/14416?num=5
 
# 獲取當前視頻評論
http://baobab.wandoujia.com/api/v1/replies/video?id=14416&num=5

Store：

主要包含：state、action、getters、mutations
在組件method中通過觸發dispatch來修改state

fetchData() {
  const VID = this.$route.params.vid;
  if (!VID) {
    this.$router.go('/');
  }
  this.$store.dispatch('getVideoInfo', { VID });
  this.$store.dispatch('getRelateVideoList', { VID });
  this.$store.dispatch('getRepliesVideoList', { VID });
}

將state中的對象通過mapGetters映射給自定義變量：

computed:{
  ...mapGetters({
    video: 'videoInfo',
    videoList: 'relateList',
    replyList: 'repliesList',
  }),
  v() {
    /* eslint-disable */
    const _v = this.video;
    return {
      title: _v.title,
      desc: _v.description,
      cat: _v.category,
      tags: _v.tags,
      url: _v.playUrl,
      time: _v.time,
      cover: {
        backgroundImage: `url(${_v.coverForDetail})`,
      },
    };
  },
}

然后在組件中調用：

<div class="vue-meta-positioner">
  <div class="video-meta">
    <h1>{{v.title}}</h1>
    <div class="divider divider-short"></div>
    <p>{{v.cat}} / {{v.time}}</p>
    <p class="desciption">
      {{v.desc}}
    </p>
  </div>
</div>

最終效果：

部署項目

執行命令

npm run build

然后會生成一個dist文件夾，該文件夾中就是我們可以用來發布的代碼

我將生成的項目部署到了GitHub pages和coding pages，其中國內解析走coding，而國外解析會解析到GitHub

具體項目演示地址：http://douni.one/eyepetizer

項目源碼地址：
Github源碼: https://github.com/virgoone/eyepetizer/
Coding源碼: https://coding.net/u/koyasite/p/eyepetizer/