基于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中如何创建自定义组件呢,在下面的文章中 ...
随机推荐
- buffer and cache -systemtap
http://blog.csdn.net/dianhuiren/article/details/7543886
- MVC文件上传08-使用客户端jQuery-File-Upload插件和服务端Backload组件让每个用户有专属文件夹
当需要为每个用户建立一个专属上传文件夹的时候,可以在提交文件的视图中添加一个隐藏域,并设置name="objectContext". 相关兄弟篇: MVC文件上传01-使用jque ...
- java多线程实现主线程等待子线程执行完问题
本文介绍两种主线程等待子线程的实现方式,以5个子线程来说明: 1.使用Thread的join()方法,join()方法会阻塞主线程继续向下执行. 2.使用Java.util.concurrent中的C ...
- msgpack传文件
msgpack传文件 procedure TForm1.Button1Click(Sender: TObject);var ms, ms2: TMemoryStream; pack: TSimpleM ...
- 常见的Hadoop十大应用误解
常见的Hadoop十大应用误解 1. (误解) Hadoop什么都可以做 (正解) 当一个新技术出来时,我们都会去思考它在各个不同产业的应用,而对于平台的新技术来说,我们思考之后常会出现 ...
- 启明星产品与微软Active Directory活动目录集成说明
本文介绍启明星Helpdesk系统,如何和微软域集成. (1)确保在集成微软域之前,系统已经能够访问. (2)进入后台,用户管理页面,新加一个账户,此账户需要在微软域里(普通账户即可),然后在角色里设 ...
- std::vector利用swap()函数进行内存的释放【转】
首先,vector与deque不同,其内存占用空间只会增长,不会减小.比如你首先分配了10,000个字节,然后erase掉后面9,999个,则虽然有效元素只有一个,但是内存占用仍为10,000个.所有 ...
- 关于asp.net页面缓存
1,ASPX页面缓存 页面缓存的使用方法非常的简单,只需要在aspx页的顶部加一句声明<%@ OutputCache Duration="60" VaryByParam=&q ...
- iOS开发-Xcode入门ObjC程序
元旦三天假跟妹子冷战一天半,剩下的半天觉得无聊,可以写点东西,折腾了下xCode 6.1,虽然iPhone6比较丑,但是不影响IOS在高端机上面的地位,ObjC是扩充C的面向对象编程语言.主要使用于M ...
- Candy leetcode java
题目: There are N children standing in a line. Each child is assigned a rating value. You are giving c ...