基于vue 的 UI框架 -- Mint UI
2023-09-11 14:15:30 时间
网址: 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/
相关文章
- (尚018-第二章2.1)Vue使用vue-cli创建模板项目
- vue框架(三)_vue引入jquery、bootstrap
- vue 实现 扫二维码 功能
- Vue: teleport
- vue-devtools 获取到 vuex store 和 Vue 实例的?
- Web前端-Vue.js必备框架(四)
- Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目 (增补)
- vue 组件 子向父亲通信用自定义方法用事件监听
- vue中的一个组件就是一个vue实例吗?
- 一、VS支持Vue语法
- Vue 动态粒子特效(vue-particles)
- vue过渡 & 动画---进入/离开 & 列表过渡
- vue router编程式导航
- Vue富文本编辑器的使用vue-quill-deitor
- vue mint-ui 框架下拉刷新上拉加载组件的使用
- Vue.JS 对比其他框架
- 浅析Vue中的Render函数 (渲染函数 & JSX)
- 浅析Hooks的产生背景及在vue里使用hooks的意义
- vue问题解决:Vue packages version mismatch 版本始终不对的解决
- Vue实战第1章:学习和使用vue-router
- Vue循环数据增加横线(非表格)
- 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库
- SpringBoot+Vue实现的仿小米电子产品售卖商城系统 附带详细运行指导视频
- Vue学习第15天——props配置项详解
- 基于VUE.JS的移动端框架Mint UI
- vue中换行符不换行、不生效的处理(n或者<br>)
- vue-router 利用url传递参数