网址: 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/

基于vue 的 UI框架 -- Mint UI的更多相关文章

  1. HTML5 UI框架Kendo UI Web中如何创建自定义组件(二)

    在前面的文章<HTML5 UI框架Kendo UI Web自定义组件(一)>中,对在Kendo UI Web中如何创建自定义组件作出了一些基础讲解,下面将继续前面的内容. 使用一个数据源 ...

  2. 基于vue的nuxt框架cnode社区服务端渲染

    nuxt-cnode 基于vue的nuxt框架仿的cnode社区服务端渲染,主要是为了seo优化以及首屏加载速度 线上地址 http://nuxt-cnode.foreversnsd.cngithub ...

  3. 基于VUE.JS的移动端框架Mint UI

    Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint ...

  4. 基于vue和svg的树形UI

      vue-svg-tree 基于vue和svg的动态树形UI 截图 应用 npm install vue-svg-tree 示例 <template> <div> <v ...

  5. Vue移动组件库Mint UI的安装与使用

    一.什么是 Mint UI 1.Mint UI 包含丰富的 CSS 和 JS 组件,可以提升移动端开发效率 2.Mint UI 按需加载组件 3.Mint UI 轻量化 二.Mint UI 的安装 1 ...

  6. 创新高性能移动 UI 框架-Canvas UI 框架

    WebView 里无法获得的能力虽然是「体验增强」与「端基本能力」,但现都基本上有成熟解决方法.但后期的 UI 和 Layout 的性能反而是目前 Web 技术欠缺的.所以,无论是 Titanium ...

  7. 很好的开源UI框架Chico UI

    介绍一个很好的开源的UI框架,依赖于jquery 官网:http://www.chico-ui.com.ar/ 以下是相关截图: 消息提示 自动完成 分页,列表 Chico UI是什么? Chico ...

  8. HTML5 UI框架Kendo UI Web教程:创建自定义组件(三)

    Kendo UI Web包 含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等.在前面的2篇文章<HTML5 Web app开发工具Ke ...

  9. HTML5 UI框架Kendo UI Web自定义组件(一)

    Kendo UI Web包含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等.在Kendo UI Web中如何创建自定义组件呢,在下面的文章中 ...

随机推荐

  1. lamp经典安装

    一.网络方面的知识 2 ①-网络常见的命令 2 ②-网卡相关 2 ③-防火墙相关 2 ④-selinux相关 3 二.上传amp源代码包 5 三.linux下软件安装-vsftpd安装 6 ①-rpm ...

  2. ARM FPGA Extended Memory Interface

    Connect a ARM Microcontroller to a FPGA using its Extended Memory Interface (EMI) http://elinux.org/ ...

  3. 使用Device IO Control 讀寫 USB Mass Storage

    http://www.ezblog.idv.tw/Download/USBStorage.rar 這是一個不透過檔案系統,去讀寫USB Mass Storage 任何位置(包含FAT)的方式 首先需安 ...

  4. 安装oracle 11gr2 rac on solaris

    http://candon123.blog.51cto.com/704299/389470

  5. 模拟登陆CSDN——就是这么简单

    工具介绍 本篇文章主要是解说怎样模拟登陆CSDN.使用的工具是HttpClient+Jsoup 当中HttpClient主要是负责发送请求,而Jsoup主要是解析HTML 你可能对HttpClient ...

  6. 【从零学习openCV】IOS7人脸识别实战

    前言 接着上篇<IOS7下的人脸检測>,我们顺藤摸瓜的学习怎样在IOS7下用openCV的进行人脸识别,实际上非常easy,因为人脸检測部分已经完毕,剩下的无非调用openCV的方法对採集 ...

  7. putty如何退出全屏模式

    putty有全屏模式,有单击标题栏,在弹出餐单中有fullscreen选项. 全屏模式看起来挺不错. 退出全屏模式的方式有点特别.Esc不起作用.Alt+Enter也不起作用. 要退出的时候需要把鼠标 ...

  8. 在windows上搭建C语言开发环境——借助eclipse和MinGW

    0. 前言     [本文目的]     近期在电脑上又一次安装了MinGW,发现MinGW的安装方法和之前的方法稍有差别,全部再写了一篇博文记录一下具体的安装方法.     [本文主要内容]     ...

  9. Android图片加载框架最全解析(五),Glide强大的图片变换功能

    大家好,又到了学习Glide的时间了.前段时间由于项目开发紧张,再加上后来又生病了,所以停更了一个月,不过现在终于又可以恢复正常更新了.今天是这个系列的第五篇文章,在前面四篇文章的当中,我们已经学习了 ...

  10. 错误: 找不到或无法加载主类 Files\red5-server ,原因与解决办法

    因为你把 red5放到了 Program Files 下,而Program Files 中间有个空格,启动路径不允许有空格,换个没空格的路径就OK啦