Vue
文章平均质量分 61
vue项目中知识点总结
小周sir的码农
面对过去,不要迷离;面对未来,不必彷徨;活在今天,你只要把自己完全“展示”给别人看。
展开
-
Vite2 + Vue3 + TypeScript + Pinia 搭建一套企业级的开发脚手架
Vite2 + Vue3 + TypeScript + Pinia 搭建一套企业级的开发脚手架原创 2022-11-18 23:14:08 · 900 阅读 · 0 评论 -
vue3.0结合element-plus实现后台管理系统
vue3.0实现一个开箱即用的后台管理系统原创 2022-04-27 09:54:45 · 3162 阅读 · 2 评论 -
vue3.2结合element-plus实现一个全局分页组件
vue3.2结合element-plus实现一个全局分页组件原创 2022-03-10 15:58:11 · 1762 阅读 · 0 评论 -
基于vue3.0全家桶H5模板
基于vue3.0全家桶 + vant3.0 +scss + rem适配方案 + axios封装,构建H5模板脚手架版本要求vue cli版本需要node 8.9 或者更高的版本。或者你可以使用nvm来切换node版本本案例中,node版本的是12.15.0启动项目 git clone https://github.com/MrZHLF/vue3.0-vant-h5.git cd vue3.0-vant-h5 npm install 或者使用 cnpm 切换到淘宝镜像 cnpm .原创 2020-11-26 11:14:45 · 2273 阅读 · 1 评论 -
使用Vue-Cli4.x配置文件路径别名
vue脚手架版本升级到4.x以后,目录发生了很大的变化,有些配置需要我们自己去配置自己项目中的目录结构在根目录创建一个 vue.config.js文件配置一下引入文件路径的别名const path = require('path')const resolve = dir => path.join(__dirname, dir)module.exports = { chainWebpack:(config)=>{ config.resolve.alias .原创 2020-11-24 14:21:34 · 686 阅读 · 2 评论 -
vue项目中使用echarts实现雷达分析图
在工作中常常会开发大数据可视化展示效果,今天就使用vue结合echarts实现一个雷达分析图,记录一下,便于以后工作中查询在vue安装echartsnpm install echarts使用在methods定义一个方法drawRight1接受后端返回的数据drawRight1 (indicatorData, seriesData) { let chart = this.$echarts.init(document.getElementById('chart_1')); .原创 2020-10-24 22:31:29 · 1179 阅读 · 0 评论 -
使用vue构建一个可视化大数据平台
使用vue全家桶以及v-charts和datav实现一个github可视化大数据界面展示,没有设计搞的原因,只能忽略设计编写一下界面,最终界面展示效果原创 2020-03-22 10:21:18 · 2868 阅读 · 0 评论 -
vue面试中常见的面试题
1.谈一下你对MVVM原理的理解传统的MVC指的是,用户操作会请求服务端路由,路由会调用对应的控制器来处理,控制器会获取数据。将结果返回给前端,页面重新渲染MVVM:传统的前端会将数据手动渲染到页面上,MVVM模式不需要用户收到操作dom元素,将数据绑定到viewModel层上,会自动将数据渲染到页面中,视图变化会通知viewModel层更新数据。ViewModel就是我们MVVM模式中的桥...原创 2020-02-22 23:16:22 · 922 阅读 · 0 评论 -
vue实战中的一些技巧《一》
大部分公司几乎现在都用到了vue,一个简易,灵活,高效的一个框架,方便快速开发项目。在工作中,我们经常会遇到查询一条数据,但是我们如果模糊查询的时候,在查询的数据中,怎么高亮的显示我们查询的内容。从后台遍历的数据中this.listQuery就是我们在data定义的字段名,用户input绑定model,listBook请求的数据,这里是对title和author两个字段查询listBo...原创 2020-02-20 20:56:14 · 768 阅读 · 0 评论 -
vue-cli4.0脚手架安装
10月16日,官方发布消息称Vue-cli 4.0正式版发布,并且强烈建议升级;小编也是刚刚安装了最新版本的脚手架看看更新了什么安装和vue-cli3.0的是一模一样的,对比了一下3.0的脚手架,除了目录发生变化一些,其他的都一样安装步骤和vue-cli3.0的一模一样1.创建项目vue create project-name...原创 2019-10-17 11:09:00 · 336 阅读 · 0 评论 -
vue使用video.js解决m3u8视频播放格式
今天被这个关于m3u8视频播放不了搞了一下午,这个项目所有的视频流都是m3u8格式的,后台给我们返回的都是m3u8格式的视频流,解决了好长时间,看了好多博客,只有这个博客给我点启发,去解决这个问题,请查看。会使用两种方法来解决这个问题第一种方法1.在vue中安装下面这些插件cnpm install video.js --saveccnp install...原创 2019-07-29 18:25:00 · 1119 阅读 · 1 评论 -
vue axios封装以及API统一管理
在vue项目中,每次和后台交互的时候,经常用到的就是axios请求数据,它是基于promise的http库,可运行在浏览器端和node.js中。当项目越来越大的时候,接口的请求也会越来越多,怎么去管理这些接口?多人合作怎么处理?只有合理的规划,才能方便往后的维护以及修改,安装安装axios依赖包cnpm install axios --save引入一般会我会在...原创 2019-04-18 15:28:00 · 192 阅读 · 0 评论 -
vue实现短信验证码登录
无论是移动端还是pc端登录或者注册界面都会见到手机验证码登录这个功能,输入手机号,得到验证码,最后先服务器发送请求,保存登录的信息,一个必不可少的功能思路1,先判断手机号和验证是否为空,2,点击发送验证码,得到验证码3,输入的验证码是否为空和是否正确,4,最后向服务发送请求界面展示1.准备工作这个会对input进行封装处理<templat...原创 2019-03-09 17:22:00 · 328 阅读 · 0 评论 -
vue传参页面刷新数据丢失问题
在做vue的时候,经常会遇到组件之间数据的传递问题,通过params或者query传参,但是,当页面刷新的时候,数据会丢失,找不到数据。今天经过总结,解决了这个问题。通过了一下几种情况进行传值:通过路由params传参通过路由query传参通过vuex1.通过params传参先在路由path里那个组件需要传递参数,定义一个参数,用于组件传递,params刷新页...原创 2019-01-25 13:45:00 · 369 阅读 · 0 评论 -
使用vue3.0和element实现后台管理模板
通过自己所学的这段时间,利用空余时间,使用vue3.0脚手架搭建的一个关于后台的管理模板,所实现功能也是模仿一个后台的界面,数据分为两种存放,一种是直接存储到mlab,这里的数据是存放这登录注册,只有注册了自己的账号才能访问到页面,另一些数据直接存放在easy-mock里,源码地址:https://github.com/MrZHLF/vue-admin自己需要搭建vue3.0的脚...原创 2018-12-15 16:07:00 · 338 阅读 · 0 评论 -
vue导出excel数据表格功能
前端工作量最多的就是需求,需求就是一直在变,比如当前端数据写完之后,需要用Excel把数据下载出来。第一步安装依赖包,需要把代码下载你的项目当中 cnpm installfile-saver cnpm installxlsx cnpm installscript-loader第二步在项目中创建一个新的文件夹用于存放Blob和Export2Exc...原创 2018-11-17 17:11:00 · 135 阅读 · 0 评论 -
vue2.0实现底部导航切换效果
使用vue2.0写移动端的时候,经常会写底部导航效果,点击切换路由效果,实现图片和文字颜色切换。vue2.0也提供了很多ul框架供我们实现效果,今天就用原生的实现一个底部导航切换,直接上代码:效果图路由搭建export default new Router({ routes: [ { path: "/Home", comp...原创 2018-09-10 12:46:00 · 196 阅读 · 0 评论 -
vue+Element-ui实现分页效果
当我们向后台请求大量数据的时候,并要在页面展示出来,请求的数据可能上百条数据或者更多的时候,并不想在一个页面展示,这就需要使用分页功能来去完成了。1.本次所使用的是vue2.0+element-ui实现一个分页功能,element-ui这个组件特别丰富,分页中给我提供了一个Pagination分页,使用Pagination 快速完成分页功能最终效果展示<...原创 2018-07-31 13:01:00 · 166 阅读 · 0 评论 -
Vue2.0搭建脚手架流程
介绍Vue.js是一套构建用户界面的渐进式框架。Vue 只关注视图层,采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。安装node.js从node官网下载并安装node,安装步骤很简单,只要一路“next”就可以了。安装完成后,打开命令行工具输入命令node -v,如下图,如果出现对应版本号,就说明安装成功了。...原创 2018-04-30 21:51:00 · 92 阅读 · 0 评论 -
vue2.0实现购物车功能
购物车功能是一件比较繁琐的事情,逻辑功能太多,今天就用vue2.0实现一个简单的购物车功能,数据都本地自己写的假数据功能列表:1、全选和单选结算2、减少和增加数量3、商品的删除界面搭建以及布局,这里,我直接用bootstrap快速搭建的一个简单的布局<div class="container" id="app"> &l...原创 2018-06-26 11:50:00 · 202 阅读 · 0 评论 -
vue2.0项目引入element-ui
在项目中,为了方便我们工作和开发效率,常常引入一些框架来帮助我们完成高效的工作,今天我们就用vue来搭建一下框架,并且引入element-ui这个框架。安装流程也是我从失败中摸索到的,希望能帮助大家。1.我们先安装vue脚手架cnpm install vue-cli -g 全局安装我使用的是cnpm;来进行安装的,大家可以去淘宝镜像下载安装cnpm安装完成之后使用:...原创 2018-04-11 17:10:00 · 143 阅读 · 0 评论 -
Vue图片懒加载之lazyload插件使用
当内容没有加载完的时候,用户体验不是很好,这时候,可以使用lazyload这个插件,提升用户体验,使用方法特别简单易用一. vue lazyload插件:插件地址:https://github.com/hilongjw/vue-lazyload二. 简单使用实例:其实这个插件做简单使用的话是很简单的,看官方文档的话反而被误导了,可以先按下边的实例实现简单引用,后边再根据开...原创 2018-06-11 17:57:00 · 144 阅读 · 0 评论 -
vue2.0+Element-ui实战案例
前言我们将会选择使用一些 vue 周边的库vue-cli, vue-router,axios,moment,Element-ui搭建一个前端项目案例,后端数据接口,会使用json-server快速搭建一个本地的服务,方便对数据的增删改查,利用以上技术我们会搭建一个vue案例,效果展示图:以上就是我们最终要实现的全部效果,我会一块一块的讲解,关于脚手架安装...原创 2018-11-03 16:01:00 · 583 阅读 · 1 评论 -
vue2.0和better-scroll实现左右联动效果
在做移动端商城或者其他页面的时候,经常会遇到左右联动的效果,今天小编vue2.0和better-scroll这个插件一起实现左右联动效果。实现上面的效果,思路一定很重要,还有需求1. 左边一级分类和右边二级分类形成联动2. 当滑动右侧分类列表时, 更新左侧分类选中3. 点击左侧一级分类项时, 右侧列表滑动到对应位置在vue脚手架的时候,引入第三方插件better-...原创 2018-09-14 16:28:00 · 269 阅读 · 0 评论 -
Vue2.0-token权限处理
token一种身份的验证,在大多数网站中,登录的时候都会携带token,去访问其他页面,token就想当于一种令牌。可以判断用户是否登录状态。本次页面是通过Element-ui搭建的登录界面当用户登录的时候,向后端发起请求的时候,后端会返回给我一个token,前端可以进行校验,进行处理token当前端拿到后端返回的token,可以通过localStorage存储到本地,然...原创 2018-10-26 21:11:00 · 272 阅读 · 0 评论 -
vue实现城市列表选择
成果展示最后的成果就是下面所展示的内容,因为gif图没有做,只能截图所展示,接下来,会带着大家一步一步的完成下面功能,脚手架搭建和node安装在本次案例不会讲解,如果了解,可以在我的博客园找到有详细介绍准备工作: 引入axios插件,调用better-scroll第三方插件,本地json文件,可以参考目录中的city.json,有条件的也可以自己去扒功能分析1.获...原创 2018-07-16 11:08:00 · 502 阅读 · 0 评论