自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(314)
  • 收藏
  • 关注

原创 vue树形组件封装(移动端)

最近在做移动端的项目,由于没有找见移动端树形组件,所以封装了一个。包含加载所有数据的功能以及懒加载功能。以下是目录结构以下是完成后的ui 点击左侧切换“展开”、“收起” 点击右侧其他操作然后直接上代码以下是懒加载的例子,一次性全部加载的就不放了组件说明:* 组件说明:树形组件 itemActive:是否需要高亮显示 Boolean data:...

2019-12-10 09:38:30 3160 1

原创 vue+elementUI实现不同主题的切换(切换功能)

今天闲的很,借鉴vue-admin,搭了个可以切换不同主题颜色的前端框架(vue+elementUI)主要逻辑就是依靠gulp生成不同主题的静态css文件(element-theme-chalk就是靠这个的)切换主题的时候,引入不同的静态css文件gulpfile.js是这么写的var gulp = require('gulp')var $ = require('gulp-load-plugins')()var fs = require('fs')var..

2021-04-06 17:44:18 11

原创 nuxt的使用(五)——后端项目规范2:提交规范

我也没做过后台,没弄过https://www.npmjs.com/package/commitizenstep1. 在server文件夹,安装commitizennpm i -g commitizenstep2. 在项目中初始化 命令commitizen init cz-conventional-changelog --save-dev --save-exactstep3. 此时可能会报找不到package.json的错误,使用下面命令来自动生成一个项目的package...

2021-03-26 17:52:45 16

原创 nuxt的使用(四)——后端项目规范1:husky

希望在commit之前跑lint+测试,有一个库:huskyhooks:就像一些外来的钩子,在源代码之间钩取一些信息,当捕捉到感兴趣的事时,就拦截下来,让自己的代码执行一下,处理一下这个信息,然后再放出去继续之前的进程。 这样就可以在不用改变源代码的情况下,做一些别的事情,比方说监控、分析和一些恶意的事安装huskynpm i husky --save-devpackage.json中配置"husky":{ "hooks":{ "p...

2021-03-26 09:38:43 9

原创 nuxt的使用(三)——创建后端项目

eggjs官网:https://eggjs.org/zh-cn/intro/quickstart.html在当前文件夹下创建server文件夹,并且进入server$ mkdir server$ cd server 初始化项目$ npm init egg --type=simple安装一些包npm i完成之后app //业务逻辑test //用来做接口测试config //全局配置.eslintrc //...

2021-03-26 09:21:30 4

原创 nuxt的使用(二)——创建前端项目

nuxt中文官网:https://www.nuxtjs.cn/guide/installation为了快速入门,Nuxt.js 团队创建了脚手架工具create-nuxt-app。确保安装了 npx(npx 在 NPM 版本 5.2.0 默认安装了):$ npx create-nuxt-app <项目名>或者用 yarn :$ yarn create nuxt-app <项目名>它会让你进行一些选择:1.在集成的服务器端框架之间进行选择:...

2021-03-25 10:55:11 25

原创 nuxt的使用(一)—— 开始

nuxt中文官网:https://www.nuxtjs.cn/guide/installation为了快速入门,Nuxt.js 团队创建了脚手架工具create-nuxt-app。确保安装了 npx(npx 在 NPM 版本 5.2.0 默认安装了):$ npx create-nuxt-app <项目名>或者用 yarn :$ yarn create nuxt-app <项目名>它会让你进行一些选择:1.在集成的服务器端框架之间进行选择:...

2021-03-24 18:04:10 11

原创 sessin和jwt架构介绍

什么是用户认证:用户认证(Authentication),指的是验证用户的身份,例如你希望以小A的身份登录,那么应用程序需要通过用户名和密码确认你真的是小A。为什么要做用户认证:由于http协议是无状态的,每一次请求都无状态。当一个用户通过用户名和密码登录了之后,他的下一个请求不会携带任何状态,应用程序无法知道他的身份,那就必须重新认证。因此我们希望用户登录成功之后的每一次http请求,都能够保存他的登录状态。怎么做用户认证:sessin架构和jwt架构都是用来做用户认证的主流方法基于ses.

2021-03-24 16:04:13 6

原创 常见浏览器内核

2021-03-02 14:39:28 33

原创 vue项目中,配置全局scss变量

如下图所示,在imports.scss文件中的css变量,想要在单个vue组件中使用step1:自动化导入样式文件 (用于颜色、变量、mixin等),可以使用 style-resources-loader。 npm i -D style-resources-loaderstep2:在webpack配置文件中,增加以下配置即可 const path = require("path"); function addStyleResource(rule)...

2021-03-02 10:50:14 76

原创 2021年3月1日,立下一个flag

最近不忙,开始学java我在B站学编程https://www.bilibili.com/video/BV1Qy4y1k7kL?from=search&seid=4285993372511636084

2021-03-01 10:05:47 200 5

原创 防抖和节流函数封装(函数原理和闭包的应用以及防抖和节流的区别,看看其他文章,大厂面试可能会用到)【看看loadsh的源码】

目录1.函数封装2.使用1.函数封装// export function throttle(fn, delay = 500) {// let prev = Date.now()// return function() {// let args = arguments// let now = Date.now()// if (now - prev >= delay) {// fn.apply(this, args);// prev = Dat.

2020-12-28 15:30:22 68

原创 微信小程序获取用户地理位置(uni-app)

step1: 原生的微信小程序需要在app.json中配置permission字段。uni-app则需要在manifest.json中配置,如下图step2:查看授权以及申请授权获取地理位置 getUserLocation() { uni.getSetting({ success: (res) => { if (!res.authSetting['scope.userLocation']) { console.log(res)

2020-12-23 10:10:54 345 1

原创 微信小程序,点击tab,使当前tab出现的视野中(用的uni-app)(滑动的tab)

主要是 scroll-view 这个组件的使用,以及每一个tabItem一些属性的计算<template> <view id="estimate-answerV2" class="estimate-answerV2"> <view class="tab-nav"> <scroll-view :enable-flex="true" scroll-with-animation :throttle="false" :scroll-left="sc.

2020-12-22 15:23:58 74

转载 关于移动端使用position:fixed/absolute出现随屏幕滚动情况

https://blog.csdn.net/xiasohuai/article/details/88090462如下图,按钮使用了position:absolute绝对定位,但是在苹果手机上会随页面滚动,解决方法如下在position:fixed/absolute内加入-webkit-transform: translateZ(0);假如有遮罩情况则在内容区域,加入:margin-bottom:30px;//margin-top:30px;抖动情况,则在内容区域,加入 :...

2020-12-10 14:55:47 379

原创 input输入框,限制1位小数,限制2位小数,不限制小数,限制不带小数点的数字

methods: { vSeachNumber1(prop) { // 不带小数点的数字 this.dataForm[prop] = this.dataForm[prop].replace(/[^\d]/g, '') }, vSeachPrice(prop) { // 带小数点的数字 this.dataForm[prop] = this.dataForm[prop].replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').

2020-12-08 10:46:37 266

原创 微信小程序获取用户tel、获取用户信息(uni-app)

两者不能同时获取获取手机号需要后台接口配合<button @getuserinfo="wxGetUserInfo" open-type="getUserInfo">获取用户信息</button><button @getphonenumber="wxGetPhoneNumber" open-type="getPhoneNumber">获取用户手机号</button><script> wxGetUserInfo() { ..

2020-12-02 14:43:53 73

原创 有蝉的学习计划

近一年在B站上学了微信小程序、uni-app、electron,学的都是一些api,没有深入去理解一些框架的设计思想,没有钻进源码去阅读。接下来是我的学习计划

2020-11-25 14:40:50 39

原创 webpack性能优化以及process.env.NODE_ENV变量的注入

webpack性能优化优化方向优化开发体验 1. 打包构建时间优化输出质量 1. 打包后的代码 体积小,没有冗余代码① 配置loader的使用范围尽可能使用includes或者exclude【推荐使用includes,范围更小】如果不配置这个属性,webpack会从项目的根目录查找相应的文件进行打包② 依赖的搜索目录明确告诉webpack依赖安装的目录③ 希望大家不要...

2020-11-13 16:55:20 137

原创 element-ui树形组件实现懒加载、右键新增、右键删除、右键编辑,以及拖拽更换节点

<template> <el-card shadow="never" class="aui-card--fill"> <div class="tree-box"> <div class="tree-title"> <el-input placeholder="输入关键字进行过滤" v-model.trim="tree.filterText" size="small"></el-input>...

2020-11-10 16:12:53 184

原创 微信小程序支付(uni-app)

//openId传给后台接口,获取微信支付所需参数 getPayParams() { let openId = uni.getStorageSync('openid') this.$http({ url: '/api/order/createPayData', method: 'POST', data: { orderId: this.orderId, "client": "WX_MINI",...

2020-11-09 16:23:43 852 3

原创 微信小程序发送订阅信息(uni-app)

getSubscribe(type) { var tmplIds = ['3xLMrIa0X5yPiLaFkpa1rlLcXUkwrXqi9qPsvLUKKq4'] uni.requestSubscribeMessage({ tmplIds: tmplIds, success: (res) => { for (let key in res) { if (res[key] == "accept") { uni...

2020-11-09 15:51:41 229

原创 微信小程序码的生成方式

2020-11-09 14:41:52 80

原创 Taro 的使用

Taro官方文档快速开始

2020-11-09 11:04:52 62

原创 uni-app开发的h5,使用微信授权登录(前置条件+具体代码)

微信内嵌浏览器运行H5版时,可以调起微信登录 普通浏览器调起微信登陆是不开放的,只有个别开发者才有,比如京东前置条件在微信内嵌浏览器运行H5版时,调起微信登录,需要配置回调域名,具体步骤如下①打开微信公众平台,登录上去②点击【公众号设置】③点击【功能设置】④找到【网页授权域名】,点击旁边的【设置】⑤ 在修改业务域名和JS接口域名时,已经上传过这个文件的话,那么请直接跳过这一步。如果还没上传的,直接点击文件下载,然后上传到服务器。 (这个可以找后台人员去干)...

2020-10-23 10:39:02 2702 1

原创 企业微信 引入微信api扫一扫(vue)【h5页面调用微信jssdk】

先引入<scripttype="text/javascript"src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>1.注册首先请求后台,拿到注册参数 ,下面的第一行代码 data 为后台返回值let data ={} //data为后台返回值wx.config({ ...

2020-10-22 17:48:24 2180

原创 RN项目结构与初始配置

项目建议结构 初始配置 原生配置 允许 http(ios 9, android 9 开始,默认只允许 https) manifest 权限检查 runtime permission (android 6) react-native-gesture-handler // 手势组件(react-navigation 必需) react-native-screens // (react-navigation 可选)提升 react-navigation 性能...

2020-10-14 11:37:36 81

原创 webpack4.0核心概念(十一)———— babel

官⽅⽹站:https://babeljs.io/ 中⽂⽹站:https://www.babeljs.cn/Babel是JavaScript编译器,能将ES6代码转换成ES5代码,让我们开发过程中放⼼使⽤JS新特性⽽不⽤担⼼兼容性问题。并且还可以通过插件机制根据需求灵活的扩展。 Babel在执⾏编译的过程中,会从项⽬根⽬录下的 .babelrc JSON⽂件中读取配置。没有该⽂件会从 loader的options地⽅读取配置。·语法转换 const ——&g...

2020-09-25 13:49:41 65

原创 webpack4.0核心概念(十)—— HMR(热模块替换-局部刷新)

HMR:当修改一个js或者css的时候,只刷新修改的内容,不进行整个页面的刷新。css的HMR——只支持开发环境不能使用mini-css-extract-plugin需要使用style-loader,因为它不支持抽离出的css,需要用style-loader① 在webpack.config.js中配置 (需要webpack-dev-server配合)//头部引入webpackconst webpack = require("webpack");//****//****/...

2020-09-25 10:22:24 68

原创 webpack4.0核心概念(九)———— WebpackDevServer 设置代理

提升开发效率的利器 每次改完代码都需要重新打包⼀次,打开浏览器,刷新⼀次,很麻烦,我们可以安装使⽤webpackdevserver来改善这块的体验安装 npm install webpack-dev-server -D配置 修改下package.json "scripts": { "server": "webpack-dev-server"},在webpack.config.js配置: devServer: { contentBa...

2020-09-23 17:33:31 70

原创 webpack4.0核心概念(八)———— 多页面打包通用方案 MPA

未处理前的webpack.config.js文件//两个入口entry: { index: "./src/index.js", login: "./src/login.js",},//出口output: { path: path.resolve(__dirname, "./dist"), filename: "[name]-[hash:6].js",},//插件配置 plugins: [ new htmlWebpackPlugin({

2020-09-23 17:19:23 106

原创 webpack4.0核心概念(七)———— “devtool:source-map“

1.为了开发时,快速的定位问题 2.线上代码,我们有时候也会开启 前端错误监控,快速的定位问题 可以建立源代码与打包后的代码的映射关系,通过sourceMap定位到源代码。 在dev模式中,默认开启,关闭的话 可以在配置⽂件⾥ webpack.config.jsdevtool:"none"devtool的介绍:https://webpack.js.org/configuration/devtool#devtool eval:速度最快,使⽤eval包裹模块代码, sour.

2020-09-23 16:42:55 68

原创 webpack4.0核心概念(六)———— 图片和第三方字体的处理

file-loader:处理静态资源模块 【url-loader包含了所有file-loader的功能,并且还有处理base64格式图片的功能】原理是把打包⼊⼝中识别出的资源模块,移动到输出⽬录,并且返回⼀个地址名称。如下图所以我们什么时候⽤file-loader呢? 场景:就是当我们需要模块,仅仅是从源代码挪移到打包⽬录,就可以使⽤file-loader来处理, txt,svg,csv,excel,图⽚资源啦等等 file-loader安装npm ins...

2020-09-23 16:01:39 56

原创 webpack4.0核心概念(五)———— browserslist

browserslist 是在不同的前端工具之间共用目标浏览器和 node 版本的配置工具。主要是为了表示当前项目的浏览器兼容情况。它主要被以下工具使用:Autoprefixer Babel post-preset-env eslint-plugin-compat stylelint-unsupported-browser-features postcss-normalize使用方式①在package.json中设置使用方式② 设置成独立的配置文件在项目...

2020-09-23 13:48:13 347

原创 webpack4.0核心概念(四)———— 前端开发工程环境搭建01 postcss

需要考虑的问题项目是pc端还是移动端移动端往往都是spa, pc端往往都是mpa 兼容的浏览器和版本项目是多人(前端)参与还是单人代码规范项目使用的技术栈 框架 —— vue react 样式处理 —— less、 sass ts —— babel es6+ 模板引擎 —— ejs、 pug 是否支持第三方字体(字体图标)涉及侵权工具类安装依赖包 切换国内源 npm config .npmrc可以配置国内源esli...

2020-09-22 15:32:12 59

原创 webpack中 hash contenthash chunkhash之间的区别

hash 是代码发生改变hash就会改变contenthash 文件自身内容发生变化,才会更新chunkhash 模块中的代码改变,导致引入这个模块的chunk发生改变,然后会引起相应的bundle文件发生变化const path = require("path");const miniCssExtractPlugin = require("mini-css-extract-plugin");const htmlWebpackPlugin = require("html-...

2020-09-22 14:54:03 43

原创 webpack4.0核心概念(三)———— 配置文件中的配置项详解 以及 bundle chunk module 三者之间的关系

entry output mode loader plugin chunk module bundleentry:指定webpack打包⼊⼝⽂件:Webpack 执⾏构建的第⼀步将从 Entry 开始,可抽象成输⼊//单⼊⼝ SPA,本质是个字符串entry:{ index: './src/index.js'}==相当于简写===entry:"./src/index.js"//多⼊⼝ entry是个对象 利于seoentry:{ index:"./src/i..

2020-09-21 18:09:17 159

原创 本地项目初始化到 码云/github 上(failed to push some refs to咋整)

在项目根目录下输入:git initgit add .git commit -m '第一次提交'git remote add origin 码云地址git push -u origin master如果报错误——failed to push some refs togit pull --rebase origin master再次执行git push -u origin master...

2020-09-21 16:44:14 28

原创 webpack4.0核心概念(二)———— 配置文件

webpack有默认的配置⽂件,叫 webpack.config.js ,我们可以对这个⽂件进⾏修改,进⾏个性化配 置 使⽤默认的配置⽂件:webpack.config.js 不使⽤⾃定义配置⽂件: ⽐如webpackconfig.js,可以在package.json文件中通过 --config webpackconfig.js 来指定 webpack使⽤哪个配置⽂件来执⾏构建...

2020-09-21 15:25:33 32

原创 webpack4.0核心概念(一)————零配置

非常弱的零配置,而且没有指定打包模式——mode

2020-09-21 15:04:06 33

空空如也

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除