基于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/
基于vue 的 UI框架 -- Mint UI的更多相关文章
- HTML5 UI框架Kendo UI Web中如何创建自定义组件(二)
在前面的文章<HTML5 UI框架Kendo UI Web自定义组件(一)>中,对在Kendo UI Web中如何创建自定义组件作出了一些基础讲解,下面将继续前面的内容. 使用一个数据源 ...
- 基于vue的nuxt框架cnode社区服务端渲染
nuxt-cnode 基于vue的nuxt框架仿的cnode社区服务端渲染,主要是为了seo优化以及首屏加载速度 线上地址 http://nuxt-cnode.foreversnsd.cngithub ...
- 基于VUE.JS的移动端框架Mint UI
Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint ...
- 基于vue和svg的树形UI
vue-svg-tree 基于vue和svg的动态树形UI 截图 应用 npm install vue-svg-tree 示例 <template> <div> <v ...
- Vue移动组件库Mint UI的安装与使用
一.什么是 Mint UI 1.Mint UI 包含丰富的 CSS 和 JS 组件,可以提升移动端开发效率 2.Mint UI 按需加载组件 3.Mint UI 轻量化 二.Mint UI 的安装 1 ...
- 创新高性能移动 UI 框架-Canvas UI 框架
WebView 里无法获得的能力虽然是「体验增强」与「端基本能力」,但现都基本上有成熟解决方法.但后期的 UI 和 Layout 的性能反而是目前 Web 技术欠缺的.所以,无论是 Titanium ...
- 很好的开源UI框架Chico UI
介绍一个很好的开源的UI框架,依赖于jquery 官网:http://www.chico-ui.com.ar/ 以下是相关截图: 消息提示 自动完成 分页,列表 Chico UI是什么? Chico ...
- HTML5 UI框架Kendo UI Web教程:创建自定义组件(三)
Kendo UI Web包 含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等.在前面的2篇文章<HTML5 Web app开发工具Ke ...
- HTML5 UI框架Kendo UI Web自定义组件(一)
Kendo UI Web包含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等.在Kendo UI Web中如何创建自定义组件呢,在下面的文章中 ...
随机推荐
- hdu 4647 Another Graph Game,想到了就是水题了。。
题目是给一个无向图,其中每个节点都有点权,边也有边权,然后就有2个小朋友开始做游戏了ALICE &BOB 游戏规定ALICE 先行动然后是BOB,然后依次轮流行动,行动时可以任意选取一个节点并 ...
- JavaScript 新手的踩坑日记
引语 在1995年5月,Eich 大神在10天内就写出了第一个脚本语言的版本,JavaScript 的第一个代号是 Mocha,Marc Andreesen 起的这个名字.由于商标问题以及很多产品已经 ...
- [cocos2dx笔记003] Vs2013添加静态库project
(基于2.2.2版本号.用vs2013编辑代码)(cppblog版本号:http://www.cppblog.com/zdhsoft/archive/2014/05/11/206890.html) 在 ...
- JAVA常见算法题(三十四)---计算加密之后的电话号码
某个公司采用公用电话传递数据,数据是四位的整数,在传递过程中是加密的, 加密规则如下: 每位数字都加上5,然后用和除以10的余数代替该数字, 再将第一位和第四位交换,第二位和第三位交换. 求加密之后的 ...
- 成为Java高手的25个学习目标
本文将告诉你学习Java需要达到的25个目标,希望能够对你的学习及找工作有所帮助.对比一下自己,你已经掌握了这25条中的多少 条了呢? 1.你需要精通面向对象分析与设计(OOA/OOD).涉及模式(G ...
- UTF-8,Unicode,GBK,希腊字母读法,ASCII码表,HTTP错误码,URL编码表,HTML特殊字符,汉字编码简明对照表
UNICODE,GBK,UTF-8区别 UNICODE,GBK,UTF-8区别 简单来说,unicode,gbk和大五码就是编码的值,而utf-8,uft-16之类就是这个值的表现形式.而前面那 ...
- 深度学习研究组Deep Learning Research Groups
Deep Learning Research Groups Some labs and research groups that are actively working on deep learni ...
- 利用c#+jquery+echarts生成统计报表(附源代码)
背景: 因为最近项目要生成报表,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.百度echarts简介请参考 http://echarts.baidu.com/ 虽然echarts功能强 ...
- Cocos2d-x3.3RC0通过JNI调用Android的Java层URI代码发送短信
1.Jni不在赘述.翻看前面博客 2.直接上代码 1)Java层,直接加在AppActivity.java中 public class AppActivity extends Cocos2dxActi ...
- Mysql数据库事务及隔离级别学习测试
参考了这篇文章的一些内容: http://xm-king.iteye.com/blog/770721 记住以下这张表: 我在springdemo库里面建了一个表: CREATE TABLE `tx` ...