网址: 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项目。

  1. npm install -g vue-cli

然后,利用vue-cli构建一个vue项目,并安装项目依赖

  1. vue init webpack eyepetizer
  2. cd eyepetizer & npm install

生成修改后的项目文件如下

  1. ├── build //webpack基本配置文件
  2. ├── config //配置文件相关
  3. ├── dist //build生成后的文件相关

  4. ├── src
  5. ├── assets //项目使用scss资源
  6. └── scss
  7. ├── components //组件相关
  8. ├── lib //api或其他需要引用的lib
  9. ├── router //router相关
  10. └── store //vuex store相关

  11. ├── static //项目静态文件
  12. └── test //测试文件

项目配置与开发

项目中使用了sass vue-router vuex querystring等库,先安装相关依赖包

  1. npm install sass-loader vuex style-loader node-sass moment css-loader axios file-loader querystring vue-router --save-dev

然后在基本页面实现并配置相关路由:

  1. import Vue from 'vue';
  2. import Router from 'vue-router';
  3.  
  4. import Hello from 'components/Hello';
  5. import Detail from 'components/Detail';
  6.  
  7. Vue.use(Router);
  8.  
  9. export default new Router({
  10. scrollBehavior: () => ({ y: 0 }),
  11. routes: [
  12. {
  13. path: '/',
  14. name: 'Hello',
  15. component: Hello,
  16. },
  17. {
  18. path: '/detail/:vid',
  19. name: 'Detail',
  20. component: Detail,
  21. },
  22. ],
  23. });

其中hello为页面首页,最终会实现为视频列表页面,目前先说视频详情页面:

API:

  1. # 获取视频详情
  2. http://baobab.wandoujia.com/api/v1/video/14416
  3.  
  4. # 获取关联视频
  5. http://baobab.wandoujia.com/api/v1/video/related/14416?num=5
  6.  
  7. # 获取当前视频评论
  8. http://baobab.wandoujia.com/api/v1/replies/video?id=14416&num=5

Store:

主要包含:state、action、getters、mutations
在组件method中通过触发dispatch来修改state

  1. fetchData() {
  2. const VID = this.$route.params.vid;
  3. if (!VID) {
  4. this.$router.go('/');
  5. }
  6. this.$store.dispatch('getVideoInfo', { VID });
  7. this.$store.dispatch('getRelateVideoList', { VID });
  8. this.$store.dispatch('getRepliesVideoList', { VID });
  9. }

将state中的对象通过mapGetters映射给自定义变量:

  1. computed:{
  2. ...mapGetters({
  3. video: 'videoInfo',
  4. videoList: 'relateList',
  5. replyList: 'repliesList',
  6. }),
  7. v() {
  8. /* eslint-disable */
  9. const _v = this.video;
  10. return {
  11. title: _v.title,
  12. desc: _v.description,
  13. cat: _v.category,
  14. tags: _v.tags,
  15. url: _v.playUrl,
  16. time: _v.time,
  17. cover: {
  18. backgroundImage: `url(${_v.coverForDetail})`,
  19. },
  20. };
  21. },
  22. }

然后在组件中调用:

  1. <div class="vue-meta-positioner">
  2. <div class="video-meta">
  3. <h1>{{v.title}}</h1>
  4. <div class="divider divider-short"></div>
  5. <p>{{v.cat}} / {{v.time}}</p>
  6. <p class="desciption">
  7. {{v.desc}}
  8. </p>
  9. </div>
  10. </div>

最终效果:

部署项目

执行命令

  1. 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. buffer and cache -systemtap

    http://blog.csdn.net/dianhuiren/article/details/7543886

  2. MVC文件上传08-使用客户端jQuery-File-Upload插件和服务端Backload组件让每个用户有专属文件夹

    当需要为每个用户建立一个专属上传文件夹的时候,可以在提交文件的视图中添加一个隐藏域,并设置name="objectContext". 相关兄弟篇: MVC文件上传01-使用jque ...

  3. java多线程实现主线程等待子线程执行完问题

    本文介绍两种主线程等待子线程的实现方式,以5个子线程来说明: 1.使用Thread的join()方法,join()方法会阻塞主线程继续向下执行. 2.使用Java.util.concurrent中的C ...

  4. msgpack传文件

    msgpack传文件 procedure TForm1.Button1Click(Sender: TObject);var ms, ms2: TMemoryStream; pack: TSimpleM ...

  5. 常见的Hadoop十大应用误解

    常见的Hadoop十大应用误解 1.        (误解) Hadoop什么都可以做 (正解) 当一个新技术出来时,我们都会去思考它在各个不同产业的应用,而对于平台的新技术来说,我们思考之后常会出现 ...

  6. 启明星产品与微软Active Directory活动目录集成说明

    本文介绍启明星Helpdesk系统,如何和微软域集成. (1)确保在集成微软域之前,系统已经能够访问. (2)进入后台,用户管理页面,新加一个账户,此账户需要在微软域里(普通账户即可),然后在角色里设 ...

  7. std::vector利用swap()函数进行内存的释放【转】

    首先,vector与deque不同,其内存占用空间只会增长,不会减小.比如你首先分配了10,000个字节,然后erase掉后面9,999个,则虽然有效元素只有一个,但是内存占用仍为10,000个.所有 ...

  8. 关于asp.net页面缓存

    1,ASPX页面缓存 页面缓存的使用方法非常的简单,只需要在aspx页的顶部加一句声明<%@ OutputCache Duration="60" VaryByParam=&q ...

  9. iOS开发-Xcode入门ObjC程序

    元旦三天假跟妹子冷战一天半,剩下的半天觉得无聊,可以写点东西,折腾了下xCode 6.1,虽然iPhone6比较丑,但是不影响IOS在高端机上面的地位,ObjC是扩充C的面向对象编程语言.主要使用于M ...

  10. Candy leetcode java

    题目: There are N children standing in a line. Each child is assigned a rating value. You are giving c ...