基于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中如何创建自定义组件呢,在下面的文章中 ...
随机推荐
- lamp经典安装
一.网络方面的知识 2 ①-网络常见的命令 2 ②-网卡相关 2 ③-防火墙相关 2 ④-selinux相关 3 二.上传amp源代码包 5 三.linux下软件安装-vsftpd安装 6 ①-rpm ...
- ARM FPGA Extended Memory Interface
Connect a ARM Microcontroller to a FPGA using its Extended Memory Interface (EMI) http://elinux.org/ ...
- 使用Device IO Control 讀寫 USB Mass Storage
http://www.ezblog.idv.tw/Download/USBStorage.rar 這是一個不透過檔案系統,去讀寫USB Mass Storage 任何位置(包含FAT)的方式 首先需安 ...
- 安装oracle 11gr2 rac on solaris
http://candon123.blog.51cto.com/704299/389470
- 模拟登陆CSDN——就是这么简单
工具介绍 本篇文章主要是解说怎样模拟登陆CSDN.使用的工具是HttpClient+Jsoup 当中HttpClient主要是负责发送请求,而Jsoup主要是解析HTML 你可能对HttpClient ...
- 【从零学习openCV】IOS7人脸识别实战
前言 接着上篇<IOS7下的人脸检測>,我们顺藤摸瓜的学习怎样在IOS7下用openCV的进行人脸识别,实际上非常easy,因为人脸检測部分已经完毕,剩下的无非调用openCV的方法对採集 ...
- putty如何退出全屏模式
putty有全屏模式,有单击标题栏,在弹出餐单中有fullscreen选项. 全屏模式看起来挺不错. 退出全屏模式的方式有点特别.Esc不起作用.Alt+Enter也不起作用. 要退出的时候需要把鼠标 ...
- 在windows上搭建C语言开发环境——借助eclipse和MinGW
0. 前言 [本文目的] 近期在电脑上又一次安装了MinGW,发现MinGW的安装方法和之前的方法稍有差别,全部再写了一篇博文记录一下具体的安装方法. [本文主要内容] ...
- Android图片加载框架最全解析(五),Glide强大的图片变换功能
大家好,又到了学习Glide的时间了.前段时间由于项目开发紧张,再加上后来又生病了,所以停更了一个月,不过现在终于又可以恢复正常更新了.今天是这个系列的第五篇文章,在前面四篇文章的当中,我们已经学习了 ...
- 错误: 找不到或无法加载主类 Files\red5-server ,原因与解决办法
因为你把 red5放到了 Program Files 下,而Program Files 中间有个空格,启动路径不允许有空格,换个没空格的路径就OK啦