网址: 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. hdu 4647 Another Graph Game,想到了就是水题了。。

    题目是给一个无向图,其中每个节点都有点权,边也有边权,然后就有2个小朋友开始做游戏了ALICE &BOB 游戏规定ALICE 先行动然后是BOB,然后依次轮流行动,行动时可以任意选取一个节点并 ...

  2. JavaScript 新手的踩坑日记

    引语 在1995年5月,Eich 大神在10天内就写出了第一个脚本语言的版本,JavaScript 的第一个代号是 Mocha,Marc Andreesen 起的这个名字.由于商标问题以及很多产品已经 ...

  3. [cocos2dx笔记003] Vs2013添加静态库project

    (基于2.2.2版本号.用vs2013编辑代码)(cppblog版本号:http://www.cppblog.com/zdhsoft/archive/2014/05/11/206890.html) 在 ...

  4. JAVA常见算法题(三十四)---计算加密之后的电话号码

    某个公司采用公用电话传递数据,数据是四位的整数,在传递过程中是加密的, 加密规则如下: 每位数字都加上5,然后用和除以10的余数代替该数字, 再将第一位和第四位交换,第二位和第三位交换. 求加密之后的 ...

  5. 成为Java高手的25个学习目标

    本文将告诉你学习Java需要达到的25个目标,希望能够对你的学习及找工作有所帮助.对比一下自己,你已经掌握了这25条中的多少 条了呢? 1.你需要精通面向对象分析与设计(OOA/OOD).涉及模式(G ...

  6. UTF-8,Unicode,GBK,希腊字母读法,ASCII码表,HTTP错误码,URL编码表,HTML特殊字符,汉字编码简明对照表

    UNICODE,GBK,UTF-8区别 UNICODE,GBK,UTF-8区别    简单来说,unicode,gbk和大五码就是编码的值,而utf-8,uft-16之类就是这个值的表现形式.而前面那 ...

  7. 深度学习研究组Deep Learning Research Groups

    Deep Learning Research Groups Some labs and research groups that are actively working on deep learni ...

  8. 利用c#+jquery+echarts生成统计报表(附源代码)

    背景: 因为最近项目要生成报表,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.百度echarts简介请参考 http://echarts.baidu.com/ 虽然echarts功能强 ...

  9. Cocos2d-x3.3RC0通过JNI调用Android的Java层URI代码发送短信

    1.Jni不在赘述.翻看前面博客 2.直接上代码 1)Java层,直接加在AppActivity.java中 public class AppActivity extends Cocos2dxActi ...

  10. Mysql数据库事务及隔离级别学习测试

    参考了这篇文章的一些内容: http://xm-king.iteye.com/blog/770721 记住以下这张表: 我在springdemo库里面建了一个表: CREATE TABLE `tx` ...