Vue
文章平均质量分 63
Vue
西半球
好记性不如烂笔头
展开
-
Vue - Element el-form 表单对象多层嵌套校验
针对el-form的数据源是对象嵌套对象,在进行数据绑定和校验时和单层的对象有一点区别,原创 2023-08-03 13:14:12 · 3344 阅读 · 1 评论 -
Vue - 项目编译速度、性能优化、打包体积优化
在 Vue.js 项目中,可以使用 Vuex 来管理应用程序的状态,在应用程序中经常需要获取相同的数据,因此可以使用 Vuex 的缓存技术来缓存请求过的数据,在下次请求时直接从缓存中获取数据,从而减少服务器的请求次数,提高用户体验。productionSourceMap的作用在于定位问题,打包时会生成.map文件,在生产环境就可以在浏览器查看到输出的信息具体是在哪一行,但相应的包的体积也会变大,也会影响构建速度,将其设置为false则不生成.map文件。当绑定的表达式为真值时,该元素会被渲染到页面中;原创 2023-06-07 17:27:59 · 2027 阅读 · 1 评论 -
Vue - vue-admin-template模板项目改造:动态获取菜单路由
1、demo中的项目已经添加了TagsView功能和本地权限控制关于TagsViewVue - vue-admin-template模板项目改造:增加TagsView功能关于本地权限控制相关代码参考的permission-control分支2、并且demo中的项目在1的基础上增加TopHeader(顶栏)功能,在顶栏中显示项目标题和用户信息,即可以支持原有方式展示,又可以通过setting配置显示顶栏关于增加TopHeader(顶栏)原创 2023-04-27 11:34:29 · 2090 阅读 · 1 评论 -
Vue - 同时使用 ip、localhost访问项目
Vue - 同时使用 ip、localhost访问项目原创 2023-03-10 15:53:13 · 1529 阅读 · 0 评论 -
Vue - 使用Lodash实现防抖和节流
Vue - 使用Lodash实现防抖和节流原创 2023-02-08 17:34:09 · 13891 阅读 · 0 评论 -
Vue - npm 批量升级依赖包
无原创 2022-12-23 16:08:17 · 8876 阅读 · 0 评论 -
Vue - ECharts自定义时间段图表
Vue - ECharts自定义时间段图表原创 2022-12-13 13:05:38 · 923 阅读 · 0 评论 -
Vue - Element el-table 表头、行、列合并,底部或顶部显示汇总行
Vue - Element el-table 表头、行、列合并原创 2022-11-24 10:18:01 · 2525 阅读 · 0 评论 -
Vue - Element el-table 行的展开与折叠
【代码】Vue - Element el-table 行的展开与折叠。原创 2022-11-24 10:00:33 · 3837 阅读 · 0 评论 -
Vue - vue-admin-template模板项目改造:增加TopHeader(顶栏)
GitHub Demo 地址在线预览 前言demo中的项目已经添加了TagsView功能和权限控制关于TagsView功能的添加可以看:Vue - vue-admin-template模板项目改造:增加TagsView功能 有时项目需要在顶部显示一个header,在顶栏中显示项目标题和用户信息,这时需要对模块项目进行改造demo项目中在原有的基础上进行了扩展,即可以支持原有方式展示,又可以通过setting配置显示顶栏效果图tagsViewtopHeader + 隐藏logo.原创 2021-12-18 16:34:29 · 4923 阅读 · 3 评论 -
Vue - Element el-table和el-form嵌套使用实现动态增减表单与单列校验
GitHub Demo 地址在线预览 效果图要点使用el-form包裹el-table,然后el-table-column包裹el-form-itemel-form-item的数据prop和校验rules按下面代码设置:prop="`tableData.${scope.$index}.name`" :rules="formRules.name"代码<!-- 动态增减表单 --><template> <div class="spp-user-.原创 2021-11-21 17:16:20 · 2047 阅读 · 0 评论 -
Vue - vue项目打包部署到Github的pages在线访问
GitHub Demo 地址在线预览 vue前端项目写好之后,想部署到线上通过在线地址进行访问,可以通过gitee或者GitHub的pages准备工作:1、要有个vue的项目(web的项目都可以)2、在gitee或者GitHub建立项目(这里是通过GitHub展示的)vue项目设置并打包在vue.config.js文件设置publicPath为./运行打包命令 npm run build:prod生成dist包添加gh-pages分支新增一个代码分支,命名为gh.原创 2021-11-21 16:56:40 · 1407 阅读 · 0 评论 -
Vue - 使用Lodash进行深拷贝
GitHub Demo 地址Lodash 官网浅拷贝 : 只是将数据中所有的数据引用下来,依旧指向同一个存放地址,拷贝之后的数据修改之后,也会影响到原数据的中的对象数据。例如:Object.assign(),…扩展运算符深拷贝: 将数据中所有的数据拷贝下来,对拷贝之后的数据进行修改不会影响到原数据。JSON.parse(JSON.stringify(obj))深拷贝的问题1、如果obj里面存在时间对象,JSON.parse(JSON.stringify(obj))之后,时间对象变.原创 2021-11-15 16:30:59 · 1046 阅读 · 0 评论 -
VSCode - setting.json配置 - Prettier、Vetur格式化和ESLint检查
vscode 前端最佳插件配置格式化代码时用到的插件ESLint(代码规范和错误检查工具)Prettier(代码格式化工具)EditorConfig for VS Code(定义项目的编码规范,编辑器的行为会与.editorconfig 文件中定义的一致,并且其优先级比编辑器自身的设置要高,这在多人合作开发项目时十分有用而且必要)Vetur(识别 vue 文件)Syncing(同步你的 VS Code 配置,在另一台机器使用可以自动同步配置,不需要重新慢慢配了)Manta’s Stylus原创 2021-06-18 09:26:12 · 5607 阅读 · 2 评论 -
Vue - vue-admin-template模板项目改造:增加TagsView功能
GitHub Demo 地址vue-admin-template模板项目4.1版本默认没有TagsView功能,需要从vue-element-admin复制粘贴TagsView相关代码相关步骤参考:https://github.com/PanJiaChen/vue-admin-template/issues/434TagsView效果准备工作:下载vue-admin-template下载vue-element-admin操作步骤1、从vue-element-admin复制文件到对应.原创 2021-08-29 19:35:16 · 3241 阅读 · 12 评论 -
Vue - table导出excel文件
前端导出excel(三----基于Blob.js和 Export2Excel.js做前端导出)使用Export2Excel.js导出excel使用Export2Excel.js导出excel1、安装依赖:npm install -S file-savernpm install -S xlsxnpm install -D script-loader2、下载导入Blob.js和 Export2Excel.js3、 使用 // 导出数据 exportToExcel() { .原创 2021-08-11 16:42:20 · 235 阅读 · 0 评论 -
Vue - axios简单封装
demo 地址: https://github.com/iotjin/jh-vue-demoaxios GItHub使用axios简单封装一个网络请求工具类,toast用的是vant,包含请求拦截、响应拦截,异常处理,可对token、header、请求参数和返回参数进行加密解密处理axios安装npm install axios使用方法 :1.在要使用的js文件导入const HTTP = require('../../../../http/HttpUtils.js');2. .原创 2021-07-01 17:30:18 · 169 阅读 · 0 评论 -
Vue - 基于vant的APP框架(navbar+tabbar+router)
demo 地址: https://github.com/iotjin/jh-vue-demo的app1项目本篇主要介绍如何使用vant的navbar、tabbar和vue-router 创建一个vue版的APP基础框架(适配刘海屏)app的主界面一般由三部分构成:navbar + 主体内容 +tabbar,如下图:所以需要创建navbar组件和tabbar组件,然后通过router-view映射组件,连通单个页面1、首先要有Vue项目Vue - Mac安装vue-cli4.x 并创建.原创 2021-06-17 16:25:54 · 5866 阅读 · 2 评论 -
Vue - vue-cli4.x配置less全局变量(vant和自定义)
1、less相关插件依赖下载其中用到了 less 、less-loader、vue-cli-plugin-style-resources-loader博主是通过图形化界面添加的,其中less-loader版本过高,运行报错,找个另外一个替代@kkt/loader-less命名行添加(网上看的没试)npm install style-resources-loader vue-cli-plugin-style-resources-loader less-loader less -S2、在vu原创 2021-06-09 17:22:14 · 980 阅读 · 0 评论 -
Vue - vant安装(引用babel-plugin-import实现自动按需引入组件)
babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式以Vant 为例:1、安装首先安装vant# Vue 2 项目,安装 Vant 2:npm i vant -S# Vue 3 项目,安装 Vant 3:npm i vant@next -S安装 babel-plugin-import 插件npm i babel-plugin-import -D也可以通过图形化界面安装2、配置babel.con.原创 2021-06-07 11:27:56 · 2528 阅读 · 0 评论 -
Vue - 百度地图展示(vue-baidu-map)
vue-baidu-map 文档vue-baidu-map GitHubVue3.0中引入地图(谷歌+高德+腾讯+百度)vue cli3 百度地图定位效果图1、先在百度开放平台创建应用2、项目安装 vue-baidu-map$ npm install vue-baidu-map --save3、在main.js中全局引入import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, { ak: '在此输入你自己的百度地图ak'.原创 2021-05-28 16:49:18 · 688 阅读 · 0 评论 -
Vue - Vue与WKWebView互相通信(OC与Vue相互传值)
原生:使用WKWebView替换UIWebViewiOS下OC与JS的交互(WKWebview-MessageHandler实现)iOS WKWebView与JS交互)三方库:WebViewJavaScriptBridge 基本使用iOS-WKWebView与JavaScript交互的简单使用一. OC调用JS(往JS传值)通过 -evaluateJavaScript:completionHandler:实现OC调用JS,跟JavaScriptCore中的evaluateScript.原创 2021-05-25 16:43:03 · 967 阅读 · 0 评论 -
Vue - 项目打包与iOS项目导入
一、进行项目配置module.exports = { publicPath: './', assetsDir: './'}二、打包命令以下两个都可npm run buildyarn build打包后的文件:三、导入iOS项目中#import "OneVC.h"#import <WebKit/WebKit.h>@interface OneVC ()<WKNavigationDelegate>@property (nonatomic,str原创 2021-05-25 16:00:03 · 633 阅读 · 0 评论 -
Vue - Echarts 5.0 安装与使用(异步加载数据)
一、 安装ECharts 组件打开终端,输入vue ui,会自动打开vue-cli 图像化界面vue ui选择项目,添加ECharts 插件我使用的是Echarts(不是vue-echarts)二、使用主要是导入方式和5.0以下版本有差异,需要使用下面的方式import * as echarts from "echarts";demo<template> <div> <!-- <div>图表</div> --&g原创 2021-05-17 10:30:12 · 1571 阅读 · 0 评论 -
Vue - ref和$refs用法
<template> <div > <div ref="text">哈哈</div> </div></template> methods: { onClick: function() { this.$refs.text.style.color = "red"; //更新样式 this.$refs.text.innerText = "hahaha"; //更新值 cons原创 2021-04-23 16:49:03 · 108 阅读 · 0 评论 -
Vue - Mac安装vue-cli4.x 并创建模板项目
官网 - Vue CLI 创建一个项目Mac安装Vue环境vue移动端项目搭建一 、vue/cli 安装1.vue依托nodejs,所以首先要安装nodejsnode -vnpm -v命令:node -v 查看是否安装了nodejs (有版本号即成功)Node.js官网命令:npm -v 查看是否安装了npm (有版本号即成功)说明:npm是node的包管理工具,默认安装完node之后,npm会自动安装上的。2.安装Vue说明:vue依托nodejs,vue只是nod.原创 2021-04-22 18:15:27 · 717 阅读 · 3 评论 -
Vue - MAC安装yarn
安装:全局安装(推荐):sudo -snpm install -g yarn react-native-cli方式2 - 脚本安装:curl -o- -L https://yarnpkg.com/install.sh | bash方式3 - homebrew 安装:brew install yarn控制台输入命令:查看yarn版本, 正常显示版本表示安装成功 yarn -v查看所有配置yarn config list查看当前yarn的bin的位置yarn global原创 2021-04-19 14:10:21 · 527 阅读 · 0 评论