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

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

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

项目构建

首先全局安装，几个简单的步骤就可以帮助你快速构建一个vue项目。

npm install -g vue-cli

然后，利用vue-cli构建一个vue项目，并安装项目依赖

vue init webpack eyepetizercd 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})`,      },    };  },}

然后在组件中调用：

     
  
      
    
       
{
    {v.title}}
    
       
    
       
{
    {v.cat}} / {
    {v.time}}
    
       
      {
    {v.desc}}    
  
      
     

最终效果：

部署项目

执行命令

npm run build

然后会生成一个dist文件夹，该文件夹中就是我们可以用来发布的代码

我将生成的项目部署到了GitHub pages和coding pages，其中国内解析走coding，而国外解析会解析到GitHub

具体项目演示地址：

项目源码地址：

Github源码: 

Coding源码: