vue
只如初见0706
这个作者很懒,什么都没留下…
展开
-
vue框架中使用fontAwesome图标
1、第一步:安装fontAwesome图标依赖npm install fontAwesome --save2、第二步:在main.js中引入fontAwesome图标依赖import 'font-awesome/css/font-awesome.css';3、第三步:使用图标 <i class="fa fa-address-book-o" aria-hidden=...原创 2020-03-10 15:17:48 · 1225 阅读 · 0 评论 -
vue中使用svg类型图标
1、第一步:安装解析svg类型图标的依赖库 npm install svg-sprite-loader --save-dev2、配置vue.config.js文件,代码如下 chainWebpack(config) { // set svg-sprite-loader config.module .rule('svg')...原创 2020-03-10 14:49:59 · 5518 阅读 · 5 评论 -
vue中自定义element-ui组件库的主题颜色
前言:在项目中直接修改element的样式变量,前提是需要使用scss编写,这就需要首先在项目中安装可以解析scss文件格式的插件实现效果:element-ui的初始化主题颜色修改后1、第一步:安装解析scss文件格式的插件sass-loader,node-sassnpm install sass-loader node-sass -dev2、第二步:在src下新建t...原创 2020-03-10 14:17:36 · 5652 阅读 · 0 评论 -
vue中配置开发环境、测试环境、生产环境
前言:开发过程、测试过程、生产过程使用的接口地址不能,还有执行的操作可能也不一样,也就需要实现配置好开发环境、测试环境、生产环境,需要什么环境下的配置直接使用即可。1、根目录下新建文件:.env.development(开发环境)、.env.test(测试环境)、.env.production文件(生产环境)2、三个配置文件的配置内容如下:.env.development(开发环境...原创 2020-03-10 11:35:51 · 32100 阅读 · 5 评论 -
vue中配置使用element-ui组件库
1、第一步:使用以下命令安装组件库依赖npm install element-ui --save2、第二步:在main.js文件中配置如下代码import Vue from 'vue'import App from './App.vue'import ElementUI from 'element-ui';import 'element-ui/lib/theme-c...原创 2020-03-06 11:32:55 · 2137 阅读 · 0 评论 -
使用vue-cli默认配置新建项目后的打包配置方法
新建vue.config.js文件,并配置publicPath(基本路径,相对路径)和outputDir(打包后输出文件目录)module.exports = { // 基本路径,相对路径 publicPath: "./", // 输出文件目录 outputDir: 'dist',}终端运行 npm run build 即可,在根目录下增加dis...原创 2020-03-06 11:18:35 · 1085 阅读 · 1 评论 -
浅析vue中wavesurfer.js的Minimap插件的使用
前言:vue中嵌入使用wavesurfer.js的教程详见:https://blog.csdn.net/zrcj0706/article/details/1046353571、Minimap插件的使用效果如下图所示2、Minimap插件的使用见如下代码首先import引入插件依赖import Minimap from 'wavesurfer.js/dist/plugin/wa...原创 2020-03-05 15:09:02 · 1422 阅读 · 0 评论 -
浅析vue中wavesurfer.js的Regions插件的使用
前言:vue中嵌入使用wavesurfer.js的教程详见:https://blog.csdn.net/zrcj0706/article/details/1046353571、Regions插件的使用效果如下图所示2、Regions插件的使用见如下代码首先import引入插件依赖import Regions from 'wavesurfer.js/dist/plugin/wa...原创 2020-03-05 14:48:45 · 2830 阅读 · 0 评论 -
浅析vue中wavesurfer.js的cursor插件的使用
前言:vue中嵌入使用wavesurfer.js的教程详见:https://blog.csdn.net/zrcj0706/article/details/1046353571、cursor插件的使用效果如下图所示2、cursor插件的使用见如下代码首先import引入插件依赖import CursorPlugin from 'wavesurfer.js/dist/plugin...原创 2020-03-05 14:39:38 · 2464 阅读 · 4 评论 -
浅析vue中wavesurfer.js的Timeline插件的使用
前言:vue中嵌入使用wavesurfer.js的教程详见:https://blog.csdn.net/zrcj0706/article/details/1046353571、Timeline插件的使用效果如下图所示2、Timeline插件的使用见如下代码首先import引入插件依赖import WaveSurfer from 'wavesurfer.js'//wavesur...原创 2020-03-05 14:26:14 · 3231 阅读 · 2 评论 -
浅析wavesurfer.js中的各大监听事件
前言:vue中嵌入使用wavesurfer.js的教程详见:https://blog.csdn.net/zrcj0706/article/details/1046353571、在使用wavesurfer.js插件时,可以设置各种监听事件,比如播放完毕触发什么方法,设置静音时触发什么方法等等,该插件官网有自定义好的各大事件的识别,只需要使用on方法设置监听即可,如下代码://音频暂停时的监...原创 2020-03-05 11:21:30 · 3553 阅读 · 0 评论 -
浅析wavesurfer.js中各大方法的使用
前言:实现效果如下,包含后退,播放暂停,前进,指定播放,音量,播放倍速修改等功能1、原创 2020-03-05 11:00:07 · 12231 阅读 · 9 评论 -
WaveSurfer.js插件中WaveSurfer.create时的参数(options)配置含义
前言:vue框架嵌入使用WaveSurfer.js的方法,详见此文章:https://blog.csdn.net/zrcj0706/article/details/1046353571、WaveSurfer.create时的参数配置如下代码中的注释 this.wavesurfer = WaveSurfer.create({ // 应该在其中绘制波形的CSS选择器或HTM...原创 2020-03-04 14:15:37 · 1805 阅读 · 1 评论 -
Vue中整合使用wavesurfer.js声纹可视化插件
前言:Wavesurfer.js是一款基于HTML5 canvas和Web Audio的声纹可视化插件,功能十分强大,在Vue框架中嵌入使用该插件效果图如下:1、第一步:使用以下命令安装wavesurfer.js插件库npm install wavesurfer.js --save2、第二步:在需要使用的页面import导入wavesurfer.js和其中的时间轴timeline...原创 2020-03-03 17:22:50 · 9661 阅读 · 8 评论 -
vue引用本地静态资源(图片、音频、视频)
说明:本文章用于说明引用项目下本地资源(图片、音频、视频)的引用方式,从后台服务器获取的资源并不完全适用1、第一种引用方式:直接在<template>中引用,src中使用相对地址<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <...原创 2020-03-02 16:19:09 · 6331 阅读 · 0 评论 -
Vue中通过MD5实现秒传功能
1、应用场景和实现原理在系统的开发过程中,经常会有上传大容量视频的需求,而大容量视频的上传则会花费很长时间,在一定程度上需要用户等待很久,用户体验不佳,为此有开发秒传功能的需要,本文章实现秒传的原理是在执行上传之前先检查之前是否已经上传过,若上传过则不再重复上传,直接返回该视频存放在服务器的URL,若没有上传过则进行上传。那么如何判断该视频是否已经上传过是本文章的重点,采取的是通过文件的M...原创 2019-11-19 14:24:45 · 1199 阅读 · 0 评论 -
Vue中实现视频的分片上传
1、选择本地视频,获取视频实体第一步::auto-upload="false";:on-change="videoSaveToUrl" <el-upload drag action :auto-upload="false" :on-change="videoSaveToUrl" :a...原创 2019-11-19 11:15:00 · 12675 阅读 · 8 评论 -
Vue中通过el-upload组件实现上传前预览本地图片
1、实现效果如下图所示用户选择本地待上传的图片,选择成功后,上传组件隐藏,呈现本地预览组件,单击图片并实现图片的放大呈现2、template(相当于html)部分的代码如下代码实现逻辑:在el-upload组件中,将auto-upload设置为false不会执行自动上传,给予on-change一个触发事件imgSaveToUrl,在imgSaveToUrl方法中用于生成可用于本...原创 2019-11-19 10:35:45 · 15503 阅读 · 6 评论 -
vue中遍历呈现数据
1、应用场景进行网络请求后,前端经常可以得到一个json数组,里面包含多条数据,显然一条一条呈现已经不能满足需求,需要遍历呈现2、vue中通过v-for实现遍历数据用v-for指令基于一个数组来渲染一个列表 v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名下图代码渲染结果如下图所示...原创 2019-11-18 17:41:55 · 2578 阅读 · 0 评论 -
Vue中控制组件的呈现与隐藏
1、v-if和v-else和v-else-ifv-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回truthy值得时候被渲染 用v-else添加一个“else块”,当v-if为true时,此组件将被渲染,v-else表示false,此组件将被隐藏,同样当v-if为false时,v-else表示true v-else-if,顾名思义,充当v-if的“else-if块”,可以连...原创 2019-11-18 17:23:28 · 3969 阅读 · 0 评论 -
Vue中DOM元素数据与data数据建立关联
1、声明定义并使用data数据第一步:在script部分的export default中的data部分声明定义数据变量第二步:在template部分使用双打括号引用即可{{}},如图所示响应式:数据和 DOM 已经被建立了关联,data中存在的属性是响应式的,即修改data中message的值,你将看到页面内容相应地更新值得注意的是:只有当实例被创建时data中存在的...原创 2019-11-18 11:43:31 · 1883 阅读 · 0 评论 -
浅谈.vue文件模板结构
如上图所示,.vue文件由<template>、<script>、<style>三部分组成,分别对应html文件中的html、JS和css部分。其中template部分可以引用其他页面实现的子组件,而且该组件需在script部分使用import引入并在export default中的components属性中定义。如下图所示...原创 2019-11-14 15:58:40 · 1408 阅读 · 0 评论 -
vue项目目录结构及运行的基本原理
1、Vue项目目录结构(通过vue create使用默认配置创建的Vue项目)2、项目运行基本原理作为初学者我们不需要上来就完全明白整个项目的逻辑,可以先从宏观上理解大概,随着学习的深入慢慢便会明白。初始项目运行效果如上图所示,那首先我们看一下” App.vue”入口页面文件代码对于该文件,目前我们只需要知道该页面并没有多少页面效果代码,主要是引入并使用HelloWor...原创 2019-11-14 15:49:47 · 1386 阅读 · 0 评论 -
使用vue-cli工具搭建vue前端项目
1、环境要求使用vue-cli搭建vue前端需要一定的前置环境:①需要配置Node.js环境,并且Vue CLI要求Node.js版本8.9 或更高版本 (推荐 8.11.0+)②安装完 Node 后建议设置 npm 镜像以加速后面的依赖库下载过程③使用npm命令安装Vue CLI具体搭建过程可参考:https://blog.csdn.net/zrcj0706/article/...原创 2019-11-14 15:07:17 · 436 阅读 · 0 评论 -
搭建vue框架的前置学习环境
1、整体概括使用vue框架需要一些前置环境,如下图所示,包括IDE编辑器、Node.js、调试环境、工程环境2、IDE(Visual Studio Code)笔者推荐大家使用的IDE编辑器为Visual Studio Code(亲测好用),由于vue框架自带一种特有的文件格式.vue,所以需要编译器需要具有可以解析该类型文件的功能,否则十分不利于编码过程,为此Visual Stud...原创 2019-11-14 11:25:53 · 424 阅读 · 0 评论