vue
vue框架
头发超多的程序媛
这个作者很懒,什么都没留下…
展开
-
【webpack5】配置Vue环境
【webpack】配置Vue打包环境原创 2022-02-14 11:48:43 · 1668 阅读 · 0 评论 -
vue项目中通过v-for循环动态添加后台返回的事件
一.现有一种业务需求,前端的某个元素添加点击事件,但事件是后台返回的(不确定),需要动态添加,下面是具体思路:1.假定后台返回数据为如下格式:list: [ { name: '李寻欢', kungFu: '小李飞刀', method: "foo('林诗音')" }, { name: '楚留香', kungFu: '踏雪无痕', method: "foo1('夜姬')" }, {原创 2022-01-27 12:02:12 · 1188 阅读 · 0 评论 -
前端大屏项目的屏幕适配方案
https://www.jianshu.com/p/03103d274065转载 2021-09-17 14:56:01 · 1372 阅读 · 0 评论 -
el-input 限制只能输入正数,小数点后输入两位
限制只能输入正数,小数点后输入两位原创 2021-09-11 12:12:57 · 2497 阅读 · 0 评论 -
vue sku没库存置灰
返回已有库存组合好的<template> <div class="shop"> <div>{{title}}</div> <div v-for="(item,index) in goodsTypeList" :key="item.id" class="shop-item"> <div class="item-name">{{item.name}}</div>.原创 2021-09-07 19:21:04 · 642 阅读 · 0 评论 -
vue 组件开发到发布到npm全流程
前言在做前端开发的过程中,有很多重复的代码,尤其是vue项目,不同项目之间相互拷贝代码实在太麻烦了。这里研究一下,如何将自己的代码打包发布到npm,方便以后直接npm install 再次使用。账号准备发布到npm,是需要账号的,首先可以先去https://www.npmjs.com/去注册一个账号,注意记住用户名和密码。插件构建一:搭建vue项目封装vue的插件用webpack-simple比较合适,vue init webpack-simple 二:创建组件在src 目录下创建lib 文原创 2021-08-27 11:07:50 · 650 阅读 · 0 评论 -
手动封装on事件在Vue中的作用 防重复点击
以下代码实现的是“防重复点击”效果main.js中设置:Vue.prototype.$on = function (event, func) { let previous = 0 let newFunc = func if (event === 'click') { newFunc = function () { const now = new Date().getTime() if (previous + 1000 <= now) {原创 2021-08-17 11:29:14 · 146 阅读 · 0 评论 -
Vue 自定义全局消息框组件
消息弹框组件,默认3秒后自动关闭,可设置info/success/warning/error类型Message.vue<template> <transition name="fade"> <div class="message" :class="type" v-if="visible"> <i class="icon-type iconfont" :class="'icon-'+type"></i> <原创 2021-08-16 17:27:05 · 436 阅读 · 0 评论 -
Vue 使用 axios 或者 vue-router 配置页面加载动画
以下介绍两种方法1.使用 axios 配置全局中当发生 ajax 请求时,显示一个加载动画,当 ajax 请求结束后,隐藏加载动画2.使用 Vue-router 实现当页面跳转时有一个加载动画方式一 配置 axios 实现加载动画第一步:在 App.vue 文件中添加你的加载动画组件 或者 HTML,因为加载动画是全局的,所以应该放在 App.vue ,下面示例中我用的是 mint-ui 里面的spinner,然后通过Vuex this.$store.state.loading 来控制,该加原创 2021-08-16 16:15:35 · 941 阅读 · 0 评论 -
vue监听浏览器返回
监听返回mounted () { if (window.history && window.history.pushState) { // 向历史记录中插入了当前页 history.pushState(null, null, document.URL); window.addEventListener('popstate', this.goBack, false); }},destroyed () { wind.原创 2021-08-16 15:58:51 · 255 阅读 · 0 评论 -
Vue3.x 前后端通信进行对所有请求和响应都进行AES加密(密文形式)附SHA1加密
无论是开发原生的APP还是webapp还是PC端的软件,只要是前后端分离的模式,就避免不了调用后端提供的接口来进行业务交互。网页或者app,只要抓下包就可以清楚的知道这个请求获取到的数据,这样的接口很容易造成数据泄露,爬虫工程师要抓你的数据简直轻而易举。因为之前公司的接口没有进行加密处理,导致数据泄露,现被要求项目所有的交互与响应都变为密文。如下图实现效果。代码安装crypto-jsnpm install crypto-js在根目录下的src创建util文件夹、文件夹下aes.js与r.原创 2021-08-16 15:37:41 · 2077 阅读 · 0 评论 -
vue实现与微信页面跳转一样的过渡动画
https://www.jianshu.com/p/7a35ec0df01e原创 2021-08-06 14:20:11 · 306 阅读 · 1 评论 -
vue3.x 二次封装axios
1.安装axios依赖npm i axios -S2.创建一个utils文件,和一个api文件,在前者下面创建一个request.js的文件。该文件中引入axiosimport axios from “axios”;3.开始操作: /** * 封装axios */import axios from 'axios' //引入axios的第三方插件import { Message} from 'element-ui' //按需引入ui插件import { config} fro原创 2021-08-04 22:37:41 · 960 阅读 · 0 评论 -
vue瀑布流布局
vue版如图:// 安装组件vue-waterfall2npn install vue-waterfall2 -S// main.js 注册使用组件import waterfall from 'vue-waterfall2'Vue.use(waterfall)// list.vue// 说明下:width/单个列表的宽度,gutterWidth/左列表距右侧的边距(博主这里的动态赋值操作可忽略,因为是为了做示例项目的全端适配)<template> <waterfall原创 2021-07-15 14:21:59 · 470 阅读 · 0 评论 -
Electron+vue-cli4开发跨平台桌面应用详细流程
Electron是一个基于Chromium和 Node.js,可以使用 HTML、CSS和JavaScript构建跨平台应用的技术框架,兼容 Mac、Windows 和 Linux。虽然B/S是目前开发的主流,但是C/S仍然有很大的市场需求。受限于浏览器的沙盒限制,网页应用无法满足某些场景下的使用需求,而桌面应用可以读写本地文件、调用更多系统资源,再加上Web开发的低成本、高效率的优势,这种方式越来越受到开发者的喜爱。本文一步一步教你如何使用Electron5和vue-cli3,在完全保留vue开发web原创 2021-01-25 11:30:52 · 1031 阅读 · 0 评论 -
Vue CLI4 Vue.config.js标准配置(最全注释)
// const path = require('path');// const CompressionWebpackPlugin = require("compression-webpack-plugin"); // 开启gzip压缩, 按需引用// const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i; // 开启gzip压缩, 按需写入// const BundleAnalyzerPlugin =原创 2021-01-25 10:34:17 · 830 阅读 · 0 评论 -
Vue的click事件防抖和节流处理详解
函数防抖定义:多次触发事件后,事件处理函数只执行一次,并且是在触发操作结束时执行。//在vue中对click添加防抖处理const on = Vue.prototype.$on// 防抖处理Vue.prototype.$on = function (event, func) { let timer let debounce = func if (event === 'click') { debounce = function () { clearTimeout(ti原创 2021-01-25 10:19:28 · 2098 阅读 · 1 评论 -
vue 对接腾讯地图
1、从腾讯地图API官网注册一个开发秘钥2.、index.html引入相关js文件//地图api<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=yourkey"></script>//定位 <script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolo原创 2020-10-14 10:46:15 · 722 阅读 · 0 评论 -
elementUI input输入框监听回车导致页面刷新
原因:当 el-form 表单内只有一个 el-input 输入框时,在输入框内回车就会触发表单的提交事件。解决办法:在 el-form 上加上 @submit.native.prevent 属性就可以阻止回车提交事件 <!-- 搜索 --> <search-box> <template #form> <el-form ref="queryForm" :inline="true" @submit.native.prevent&原创 2020-10-14 10:21:35 · 634 阅读 · 0 评论 -
Vue自定义数字输入指令
Vue自定义数字输入指令原创 2020-09-07 18:58:51 · 905 阅读 · 0 评论 -
vueCli3以及vueCli4创建vue项目
创建项目流程1.首先卸载旧版本// npmnpm uninstall vue-cli -g // yarnyarn global remove vue-cli2.更新node版本 需要8.9以上3.安装vue/cli3// npm npm install -g @vue/cli // yarnyarn global add @vue/cli4.查看版本vue --version 5.创建项目(这里的vue-cli3是文件名,可以根据需求自己起)vue create vu原创 2020-07-02 18:17:09 · 575 阅读 · 0 评论 -
vueCli2创建vue项目
1.使用npm引入vue-cli脚手架$ npm install -g vue-cli2.使用webpack创建项目$ vue init webpack my-project3.使用Linux命令行进入项目文件夹$ cd my-project4.安装项目所需的全部依赖$ npm install5.webpack中定义的运行命令启动项目$ npm run dev...原创 2020-07-02 17:48:00 · 149 阅读 · 0 评论