小王同学｜-CSDN博客

原创 git拼接用户名密码拉取代码

HTTP 方式拉取代码url拼接帐号密码git clone https://用户名:密码@gitee.com/use-items/lake-vue.giteg: git clone https://username:[email protected]/use-items/lake-vue.gitusername:写自己的git用户名password:git的密码后续pull、push操作不需要再输入密码缺点：url记录着密码明文，不安全（git config remote.origin.u

2022-05-31 09:33:57 3125

原创 vue3集成Element-plus实现按需自动引入组件

element-plus正是element-ui针对于vue3开发的一个UI组件库，它的使用方式和很多其他的组件库是一样的，其他类似于ant-design-vue、NaiveUI、VantUI都是差不多的；安装element-plus首先下载element-plusnpm install element-plus1、第一种方式，使用全局引入引入element-plus的方式是全局引入，代表的含义是所有的组件和插件都会被自动注册，优点：上手快缺点：会增大包的体积在main.t

2022-05-03 13:29:40 12056 4

原创详解如何搭建vue3+TypeScript+配置项目统一规范

1.首先创建项目，创建命令：vue create 项目名2、接下来选择手动配置项目特性3、选择项目中的一些配置：这里可根据自己的项目按需选择，以下是我的项目配置(*) Choose Vue version 选择对应的vue版本，下一步中会进行选择(*) Babel 是否需要Babel,勾选上(*) TypeScript 是否配置TypeScript() Progressive Web App (PWA) Support(*) Router 配置vue路由(...

2022-05-02 12:09:32 2437

原创 vue3-setup中使用mapState

vue3项目开发中，项目里会在vuex中存储一些公共的资源，方便在各个组件之间的调用，大项目中一个.vue文件中可能会用到state里面多个数据，每次都用$store.state.xxx这样写的话，代码阅读起来也不是很友好。下面是在vue3中如何使用mapState获取到vuex中store里面的数据最后面提供了将mapstate封装是hooks，可直接在页面中调用vuex最新版本安装命令：npm install vuex@nextstore文件import { createStore } fr

2022-04-21 23:17:51 4893 2

原创 vue-quill-editor验证必填项不能为空

问题：记录在使用vue-quill-editor验证不能为空和输入空格时的验证问题。思路：1、在quill-editor上加change事件，事件触发时传递当前字段，验证当前字段内容；2、验证正则（关键）vue代码：<template><div> <Form ref="ruleForm" :model="ruleForm" :rules="ruleValidate" :labe

2022-03-09 09:43:14 2922

原创 js将阿拉伯数字翻译成中文的大写数字

/** 项目需求，要求在列表前将阿拉伯数字显示成中文展示 * 将阿拉伯数字翻译成中文的大写数字 * @param {*} num 1 * @returns 一 * @example numberToChinese(11) == '十一' */export const numberToChinese = (num) => { let AA = new Array("零", "一", "二", "三", "四", "五", "六", "七", "八", "九", "十");

2022-01-22 16:27:19 607

原创 vue-cli打包后去除console.log

1、安装babel-plugin-transform-remove-console插件npm i --save-dev babel-plugin-transform-remove-console2、在babel.config.js中配置const plugins = [];// 开发环境下process.env.NODE_ENV === developmentif (['production', 'prod'].includes(process.env.NODE_ENV)) { plugin

2021-11-29 09:53:29 1275

原创 iview表格内容超出后显示...，鼠标移入提示tooltip

近期用Vue+iview开发的后台项目，表格用的较多，需要对表格中内容超出部分显示…，并提示ToolTip显示全部内容，下面是封装了两个函数，方便再项目中的多次调用。tool.js文件// 表格中内容超出后显示... 鼠标移入并tip提示/** * @param {*} h * @param {*} lines 最多显示多少行，超出后显示... * @param {*} content 显示的内容 * @returns tip * @example { key: "

2021-11-26 11:35:29 1495

原创 js函数防抖和节流如何实现，在Vue项目中如何使用

防抖节流为前端开发中性能优化方式之一：项目中一些操作可能会高频率的向服务器请求资源，会造成非常大的性能浪费，甚至会导致界面卡住或者整个浏览器崩溃。例如有：onscroll oninput resize onkeyup onkedown onkeypress mousedown等等，为了解决这些性能问题，函数节流和防抖都是非常有必要的。防抖节流函数的实现方式：（可将该函数写在项目中公共的js文件） /** * 这个 debounce 函数在给定的时间间隔内只允许你提

2021-03-30 20:53:59 511

原创 Error: Rule can only have one resource source (provided resource and test + include + exclude)

报错信息：Error: Rule can only have one resource source (provided resource and test + include + exclude)Error: Rule can only have one resource source (provided resource and test + include + exclude) in "exclude": [ null ], "use": [ { "loader

2021-03-06 11:31:18 629

原创 js判断当前是pc端、移动端、IE浏览器

是否是pc端、 function isPc() { var userAgentInfo = navigator.userAgent; var Agents = ["Android", "iPhone", "symbianOS", "Windows Phone", "iPad", "iPod"] var flag = true; for (var i = 0; i < Agents.length; i++) { if (userAgen

2021-03-05 10:24:52 1223 7

原创 Vue 中如何判断用户首次进入页面还是刷新页面

/** * {window.performance.navigation.type} * 0：网页通过点击链接、地址栏输入、表单提交、脚本操作等方式加载， * 1：网页通过“重新加载”按钮或者location.reload()方法加载， * 2：网页通过“前进”或“后退”按钮加载， * 255：任何其他来源的加载， */ mounted() { if (window.performance.navigation.type == 1) { ..

2021-03-03 20:00:20 938 1

原创 js判断数据类型相关方法

可在项目中建立公共文件，引入调用对应方法//是否字符串export const isString = (val) => { return Object.prototype.toString.call(val).slice(8, -1) === 'String'}//是否数字export const isNumber = (val) => { return Object.prototype.toString.call(val).slice(8, -1) === 'Number'

2020-11-06 10:59:49 160

原创 js对象实现深浅拷贝！！

// 对象浅拷贝function objShallowCopy(obj){ var obj2 ={}; for(var i in obj){ obj2[i] = obj[i] } return obj2}// 对象深拷贝function objDeepCopy(obj1,obj2){ var obj2 = obj2 || {} //最初的时候给他一个初始值=它自己或者一个json for(var name in obj1){ if(typeof obj1[name] ==='ob

2020-10-31 21:21:11 207

原创 vue路由守卫使用

vue路由钩子函数：路由的钩子函数总结有6个全局的路由钩子函数：beforeEach、afterEachvue router.afterEach（全局后置守卫）router.beforeEach 是页面加载之前，router.afterEach是页面加载之后单个的路由钩子函数：beforeEnter组件内的路由钩子函数：beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate参数都为 (to,from,next)to: (Route路由对象) 即

2020-06-16 22:04:43 421

原创 js事件流，dom操作的方法

事件流：事件流：也就是事件触发的顺序事件流包括三个阶段：捕获阶段、目标阶段、冒泡阶段事件冒泡：事件由最具体元素触发，向上传播的过程；处于目标阶段：触发事件的那个节点，（目标元素）；捕获阶段：事件由不具体的元素向下查找，直到找到你触发的那个元素，与事件冒泡相反；阻止冒泡： e.stopPropagation();事件代理（事件委派）：在父级上绑定事件，通过e.target来获取触发的目标。Dom操作的方法通过:nodeType来检测节点类型，增删改查：增：1.createElement

2020-06-04 22:51:49 248

原创 call、apply、bind区别

call 、apply、bind各自的特点： call 特点： 1、改变this指向 2、使用时候函数已被执行 3、传参时候以逗号的形式分开，一个一个传递 //Fn2.call(obj，‘’，‘’) apply 特点： 1、改变this指向 2、使用时候函数已被执行 3、传参时候必须以一个类数组或数组的形式传递，不然的话会报错 //Fn2.apply(obj, [18, 20]) bind 特点： 1、改变this指向 2

2020-06-02 21:02:45 218

原创 Vue Cookie的使用

1、下载安装npm install js-cookie --save2、然后就可以直接在组件中引入import Cookies from 'js-cookie'3、存到cookie//创建一个在整个网站上有效的cookie：//特使时候cookie存入的对象，跟一般使用不同的是，从Cookie中取出的时候，要从字符串转换成json格式Cookies.set('name', { id: 1, name: 'XXX' })//创建一个从现在起7天到期的cookie，该cookie在整个网站

2020-05-25 22:17:05 1349 1

原创 vant-Area省市区联动

vant按需引入import { Cell, CellGroup, Popup, Field, Area, Picker } from 'vant’Vue.use(Area)Vue.use(Popup)Vue.use(Cell)Vue.use(CellGroup)Vue.use(Field)Vue.use(Picker)<template> <div class="wzl_address"> <!--confirm 点击右上方完成按钮

2020-05-24 16:07:57 1288

原创 Vue中配置开发、线上环境自动切换

1、安装cross-env包实现跨平台环境变量配置命令： npm install cross-env -D2、在package.json中添加cross-env运行环境脚本 "scripts": { "serve": "cross-env BUILD_ENV=dev vue-cli-service serve", // 这是开发环境 "build": "cross-env BUILD_ENV=prod vue-cli-service build", // 这是线上环境

2020-05-20 12:40:57 1587 2

原创如何手动搭建webpack，集成Vue

1、创建一个项目文件夹2、npm init -y 安装，有关node的必须要有package.join文件3、利用npm install webpack webpack-cli -D或者npm install webpack webpack-cli --save-dev安装依赖4、通过 ./node_modules/.bin/webpack -v 来检查是否安装成功5、在package.json中的script中配置： "scripts": { "build":"webpack" }

2020-05-10 15:17:37 1133

原创用Array实现数组的去重，去重后返回重复的字符放到新数组，进行排序。

Array.prototype.extraChar = function (testArrs) { //可快速实现数组去重 // let arr =[...new Set(testArrs)] let arr = [] let arr2 = [] testArrs.forEach...

2020-05-05 12:33:17 535

原创小程序中如何在底部tabbar上显示购物的数量。

//如果还未添加商品时候，可使用这个wx.removeTabBarBadge来移除wx.removeTabBarBadge({//移除tabbar右上角的文本 index: 2,//tabbar下标 })//添加商品后通过wx.setTabBarBadge来进行设置 wx.setTabBarBadge({//tabbar右上角添加文本 ind...

2020-05-03 16:13:58 601

原创小程序中后台接口返回的数据如果为富文本如何解决。

我们可以通过插件 wx parse来解决如何使用及安装步骤:1、我们一块i去github上下载wx parse这个插件地址： https://github.com/search?q=wx+parse2、进去之后复制地址，打开命令框进行克隆 git clone 复制的地址；克隆完之后将里面的wxParse文件夹复制到我们的项目根目录中3、然后我们可以直接在app.wxss全局引入样...

2020-05-02 23:14:03 1471

原创原生js获得八种方式,事件操作。

原生js获得八种方式,事件操作自我总结关于js一.原生js获得八种方式通过ID获取（getElementById）通过name属性（getElementsByName）通过标签名（getElementsByTagName）通过类名（getElementsByClassName）通过选择器获取一个元素（querySelector）通过选择器获取一组元素（querySelectorA...

2020-04-14 20:17:55 241

原创 js中字符串和数组常用的方法。

js中字符串常用方法:substring(start开始的索引,end结束位置的索引)截取两个下标之间的字符,截取的位置不包含结束位置的字符,只写一个参数表示从开始位置截取到最后 var str='abcdef' console.log(str.substring(1)) //bcdef console.log(str.substring(1,3)) //bc c...

2020-04-05 16:20:36 528 1

原创 js冒泡排序。

2020-04-03 18:51:55 251

原创 VUE路由传值页面没有实时更新怎么解决?

vue路由传值页面没有实时更新怎么解决?我们在vue项目中，使用路由传参时，根据传递不同的参数值获取不同的数据时，如果只是地址栏的参数发生变化，而数据并没有实时的进行更新，需要刷新页面才会显示新的数据，如何解决？在本路由里面跳转到本路由上，只要路径不发生变化，在mounted()中是监测不到的，因为mounted()在组件创建时只执行了一次,我们需要进行路由监听:这样通过 val.que...

2020-03-11 20:17:53 808

W_Zhulin的博客