Vue+ElementUI 手把手教你做一个audio组件

1. 简介 1.1. 相关技术 Vue Vue-cli ElementUI yarn (之前我用npm, 并使用cnpm的源,但是用了yarn之后,我发现它比cnpm的速度还快,功能更好,我就毫不犹豫选择yarn了) Audio相关API和事件 1.2. 从本教程你会学到什么? Vue单文件组件开发知识 Element UI基本用法 Audio原生API及Audio相关事件 音频播放器的基本原理 音频的播放暂停控制 更新音频显示时间 音频进度条控制与跳转 音频音量控制 音频播放速度控制 音频静音控制 音频下载控制 个性化配置与排他性播放 一点点ES6语法 2. 学前准备 基本上不需要什么准备,但是如果你能先看一下Aduio相关API和事件将会更好 Audio: 如果你愿意一层一层剥开我的心 使用 HTML5 音频和视频 3. 在线demon 没有在线demo的教程都是耍流氓 查看在线demon 项目地址 4. 开始编码 5. 项目初始化 ➜ test vue init webpack element-audio A newer version of vue-cli is available. latest: 2.9.2 installed: 2.9.1 ? Project name element-audio ? Project description A Vue.js project ?...

2018-02-09 · 7 min · 王端端

Vue + Vue-router + Element-ui 搭建一个非常简单的dashboard demo

做完这个demo后,你会体会到,Vue组件化,webpack, Vue-router等,并不是很难学习,你需要的只是拿起斧头的勇气 在做demo的过程中,我遇到一个问题,就是vue-router懒加载一直实现不了,纠结了半天。后来回到原点,去vue-route官网看文档,发现是因为syntax-dynamic-import插件没有安装。 所以说:你以为的bug, 实际上是你没看透文档 初次学习这个教程,你不需要有任何担忧某些东西不会,你也不需要写任何代码。因为基本上所有代码都是从element官网上拷贝的,你所做的只是把他们组装在一起罢了。 在线预览 仓库地址:https://github.com/wangduanduan/vue-el-dashboard 效果图: 使用到的技术: Vue Vue-router Element-ui webpack Normalize.css vue-awesome babel 1. vue-cli 安装模板 ➜ vue-el-dashboard git:(master) vue init webpack ? Generate project in current directory? Yes ? Project name vue-el-dashboard ? Project description A Vue.js project ? Author wangdd <wangdd@welljoint.com> ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ?...

2018-02-09 · 5 min · 王端端