![](https://img-blog.csdnimg.cn/20210323002946595.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端
文章平均质量分 67
前端知识积累
kjs--
好的坏的都是风景
展开
-
前端代码上线前验证whistle
此方法可以在不发版情况下验证即将上线的功能,也可以在不发版情况下debugger 查找线上bug。原创 2023-09-20 18:35:12 · 145 阅读 · 0 评论 -
入职-软件安装篇
入职-软件安装篇原创 2023-01-30 10:39:58 · 2345 阅读 · 1 评论 -
入职-环境安装篇
入职环境安装原创 2023-01-29 16:18:56 · 4360 阅读 · 1 评论 -
实用utils
【代码】实用utils。原创 2022-12-16 15:24:26 · 153 阅读 · 0 评论 -
获取url参数 方法封装
获取url参数原创 2022-12-16 14:51:03 · 209 阅读 · 0 评论 -
react中使用 PropTypes 进行类型检查
使用 PropTypes 进行类型检查1.自 React v15.5 起,使用prop-types库 进行类型检查。2.之前使用的React.PropTypes 已移入另一个包中,我们提供了一个 codemod 脚本来做自动转换。3.详情可观看官网https://react.docschina.org/docs/typechecking-with-proptypes.html一、前言应用程序不断增长,你可以通过类型检查捕获大量错误可以使用Flow 或TypeScript 等 JavaS原创 2021-11-30 14:13:03 · 418 阅读 · 0 评论 -
mobx简单、可扩展的状态管理
mobx关于mobx的一些文档:git地址https://github.com/mobxjs/mobx中文文档https://cn.mobx.js.org/一、安装npm install mobx --saveReact 绑定库: npm install mobx-react --save二、MobX 要点使用 MobX 将一个应用变成响应式 只需三步:定义状态并使其可观察创建视图以响应状态的变化更改状态...原创 2021-11-29 14:58:22 · 318 阅读 · 0 评论 -
react hook父组件调用子组件方法
子组件中import React, { useState, useEffect, forwardRef, useImperativeHandle,} from 'react';// props子组件中需要接受reflet Subcomponents = (props,ref) => {const onCallback = () => { console.log('执行了')} // 此处注意useImperativeHandle方法的的第一个参数是目标原创 2021-11-29 11:08:54 · 3570 阅读 · 2 评论 -
React-intl 实现多语言
React-intl 实现多语言一、前言最近做的一个react项目 有做国际化的需求。React 做国际化,我们项目使用的是React-intl ,这个库提供了 React 组件和Api两种方式来格式化日期,数字和字符串等。知道这个库了,那让我们开始使用它详情可看网址 https://formatjs.io/docs/react-intl二、使用1.安装npm install react-intl --save2.添加引用import {IntlProvider, addLocaleDa原创 2021-11-29 10:37:38 · 1547 阅读 · 0 评论 -
js 中的对象属性顺序问题
js 的对象属性可能是按照某种顺序排序的?1.对象属性先按数字型的排序,再是非数字型的属性。let a = { b: "1", 1: "nn",2:"mm",a:"2", 测试: "test" };// 输出 {1: "nn", 2:"mm", b: "1", a:"2",测试: "test"}let b = { 测试: "test", 1: "nn", b: "1" };// 输出 {1: "nn", 测试: "test", b: "1"}2.如果属性中既存在数字型的属性,又存在对应字符型原创 2021-11-29 09:57:35 · 2416 阅读 · 0 评论 -
uni-app-简介-背景-快速上手
uni-app一、简介uni-app 是一个使用Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。官网地址: https://uniapp.dcloud.io/README二、背景1.当前跨平台开发存在的三个问题多端泛滥体验不好生态不丰富2.Uni-app 产品特征跨平台更多真正做到“一套代码、多端发行”条件编译:优雅的在一个项目里调用不同平台的功能原创 2021-06-20 11:46:42 · 657 阅读 · 0 评论 -
微信小程序开发(7)---协同工作篇
协同工作(成员管理)10.1 了解权限管理需求、组织结构、开发流程了解权限管理需求在中大型的公司中,人员的分工非常仔细:同一个小程序项目,一般会有不同的岗位、不同角色的员工同时参与设计与开发此时出于管理需要,我们迫切需要对不同的岗位、不同的角色的员工的权限进行边界的划分,使他们能够高效的进行协同开发了解项目成员的组织结构小程序的开发流程10.2 了解小程序成员管理的两个方面小程序成员管理体现在 管理员 对小程序 项目成员 及 体验成员 的管理:项目成员表示参与小程序开发、运营的成员可登转载 2021-06-15 19:19:35 · 2174 阅读 · 0 评论 -
微信小程序开发(6)---事件篇
微信小程序开发(6)—事件篇事件是什么事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理小程序中常用事件bindtap (bind:tap)、bindinput (bind:input)、bindchange (bind:chage)catchtap …事件的语法格式在小程序中,不存在 HTML 中的 onclick 鼠标点击事件,而是通过 tap 事件来响应用户的触摸行为…通过 bind事件名,可以为组件绑定事件在页面的 .j原创 2021-06-09 18:49:26 · 718 阅读 · 0 评论 -
css设置文本多行省略
多行省略/*多行省略*/.Pellipsis2{ overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}.Pellipsis3{ overflow : hidden; text-overflow: ellipsis; display: -webkit-bo原创 2021-06-06 14:33:44 · 126 阅读 · 1 评论 -
微信小程序开发(5)---自定义组件篇
微信小程序开发(5)—自定义组件篇一.定义自定义组件以新建一个demo组件为例,首先在根目录下创建一个components文件夹然后创建一个demo文件夹,分别创建demo.json,demo.wxml,demo.wxss,demo.js四个文件。在 demo.json 文件中进行自定义组件声明(将 component 字段设为 true 可将这一组文件设为自定义组件){ "component": true, "usingComponents": {}}在 demo.wxm原创 2021-06-03 23:30:06 · 503 阅读 · 1 评论 -
微信小程序开发(4)---小程序组件篇
微信小程序开发(3)—区别篇原创 2021-06-01 21:39:59 · 1142 阅读 · 0 评论 -
微信小程序开发(3)---小程序语法篇
微信小程序开发(3)—小程序语法篇一.新建页面新建小程序页面有两种方式官方推荐文件夹名称和页面的名称一致,方便后期的维护新建页面组件的时候,不需要输入后缀名注意:对 pages 目录下页面的删除或者新增都需要在 app.json 文件的 pages 数组中进行新增或删除方式1:在pages文件夹中右击选择新建文件夹,命名为xxx右击新建的xxx文件夹 ,选择新建page,命名为跟文件夹名相同方式2:在项目中点击app.json文件进入到编辑界面,对pages配置添加字段 "p原创 2021-05-29 18:01:57 · 931 阅读 · 0 评论 -
微信小程序开发(2)---项目的组成篇
微信小程序开发(2)—项目的组成部分一.小程序目录的构成pages 用来存放所有小程序的页面utils用来存放工具性质的模块(例如:格式化时间的自定义模块)app.js 小程序项目的入口文件 — main.jsapp.json 小程序项目的全局配置文件app.wxss小程序项目的全局样式文件project.config.json 项目的配置文件sitemap.json 用来配置小程序及其页面是够允许被微信索引 – SEO – 搜索引擎优化二.小程序页面构成:小程序页面由4个基本文原创 2021-05-28 20:24:33 · 588 阅读 · 1 评论 -
微信小程序开发
微信小程序开发一.概念微信小程序,小程序的一种,英文名 Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。二.特点1.无需安装与卸载小程序的第一个特点就是无需安装和卸载的过程,用户可以直接使用用户可以在“附近的小程序”中搜索也可以直接在搜索栏搜索相应的小程序,使用完直接关闭,不会占用桌面空间2.制作成本低对于店铺来说,开发制作一款小程序费用低。拥有一款自己专属的小程序,省去入驻第三方程序原创 2021-05-27 20:59:27 · 1610 阅读 · 0 评论 -
element-ui 使用(5)
element-ui 使用(5)15.DatePicker 日期选择器用于选择或输入日期以「日」为基本单位,基础的日期选择控件使用 <el-date-picker v-model="value1" type="date" placeholder="选择日期"> </el-date-picker>Attributes 属性value / v-model绑定值 类型date(DatePicker) / array(D原创 2021-05-19 21:02:22 · 657 阅读 · 1 评论 -
element-ui 使用(4)
velement-ui 使用(4)10.Form 表单 ✨由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据W3C 标准中有如下规定:当一个 form 元素中只有一个输入框时,在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为,可以在<el-form>标签上添加 @submit.native.preventnative原生prevent默认行为使用form表单Form Attributes form表单标签的属性model表单数据对象✨原创 2021-05-19 20:30:32 · 387 阅读 · 1 评论 -
element-ui 使用(3)
element-ui 使用(3)记录近期所使用element-ui组件的过程使用过程中用到的element文档https://element.eleme.cn/#/zh-CN/component/installation7.Tab ,Tabs 标签页分隔内容上有关联但属于不同类别的数据集合。Tabs 组件提供了选项卡功能,默认选中第一个标签页使用:<template> <el-tabs v-model="activeName" @tab-click="handleC原创 2021-05-17 20:58:02 · 971 阅读 · 2 评论 -
element-ui 使用(2)
element-ui 使用(2)记录近期所使用element-ui组件的过程使用过程中用到的element文档https://element.eleme.cn/#/zh-CN/component/installationLayout 布局element-ui通过基础的 24 分栏,迅速简便地创建布局。(bootstrap是栅格系统是12个分栏)简述组件名称组件功能概述Message消息提示–常用主动操作后的反馈提示Icon字体图标–提供了一套常用的图标集合U原创 2021-05-16 21:41:12 · 690 阅读 · 6 评论 -
element-ui 使用
element-ui 使用(1)记录近期所使用element-ui组件的过程使用过程中用到的element文档https://element.eleme.cn/#/zh-CN/component/installation一.element-ui的团队Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,提供了配套设计资源,帮助你的网站快速成型。由饿了么公司前端团队开源。二.安装npm 安装官方都推荐使用 npm 的方式安装,它能更好地和 webpack 打原创 2021-05-16 20:05:53 · 543 阅读 · 0 评论 -
个人博客搭建过程(2)
个人博客搭建过程(2)概述本文主要简单记录一下本人使用vuepress搭建个人博客的过程一个 VuePress 网站是一个由Vue、Vue Router和webpack驱动的单页应用。Markdown 拓展原创 2021-05-05 21:10:25 · 188 阅读 · 1 评论 -
Chrome浏览器,处理input自动填充时带黄色背景色
Chrome浏览器,通过延长过渡时间,实现input输入框自动填充背景色不变/*Chrome浏览器打开网页,input自动赋值时,会带上屎黄色的背景色,下面是通过延长增加自动填充背景色的方式, 让用户感受不到样式的变化*/input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active { transition-delay: 99999原创 2021-05-03 20:49:41 · 229 阅读 · 0 评论 -
env.development 和 .env.production环境文件 process.env属性
模式模式是 Vue CLI 项目中一个重要的概念。默认情况下,一个 Vue CLI 项目有三个模式: 开发,测试,生产development 模式用于 vue-cli-service servetest模式用于 vue-cli-service test:unitproduction 模式用于 vue-cli-service build 和 vue-cli-service test:e2evue官方文档环境文件文件名作用.env在所有的环境中被载入.env.loc原创 2021-05-03 20:40:52 · 1100 阅读 · 3 评论 -
vuex基础
vuex基础为什么会有Vuex ?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。vuex是采用集中式管理组件依赖的共享数据的一个工具,可以解决不同组件数据共享问题。结论修改state状态必须通过mutationsmutations只能执行同步代码,类似ajax,定时器之类的代码不能在mutations中执行执行异步代码,要通过actions,然后将数据提交给mutati原创 2021-05-02 20:33:16 · 192 阅读 · 3 评论 -
面试经典问题(1)
面试经典问题(1)1.请简述一下mvvm框架是什么?它和jquery的区别是什么?MVVM 全称 Model-View-ViewModelMVVM开发模式可以让我们更关注处理业务逻辑,不必像jquery去操作dom对象目前流行mvvm框架有vue,angular等实现思想: 数据绑定,视图刷新 (数据双向绑定,数据驱动视图)主要目的:分离视图(view)和模型(model)View可以独立于Model变化和修改一个ViewModel可以绑定到不同的View上在mvvm中,数据是核心操作原创 2021-05-02 18:15:30 · 148 阅读 · 0 评论 -
vant-ui 使用(3)
vant-ui 使用(3)记录近期所使用vantui组件的过程使用过程中用到的vant文档https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart#tong-guo-npm-an-zhuang7.Tab 标签页标签数量超过 5 个时,标签栏可以在水平方向上滚动,切换时会自动将当前标签居中。使用<van-tabs v-model="active"> <van-tab title="标签 1">内容 1</van-原创 2021-04-26 21:50:11 · 1062 阅读 · 0 评论 -
vant-ui 使用(2)
vant-ui 使用(2)记录近期所使用vantui组件的过程使用过程中用到的vant文档https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart#tong-guo-npm-an-zhuangToast 轻提示1.介绍使用了toast的页面效果就是会弹出一个黑色半透明的提示可能使用到的业务场景...原创 2021-04-26 20:48:47 · 1179 阅读 · 0 评论 -
个人博客搭建过程
个人博客搭建过程概述本文主要简单介绍一下本人使用vuepress搭建个人博客的过程一个 VuePress 网站是一个由Vue、Vue Router和 webpack驱动的单页应用。项目从零搭建新建一个文件夹 打开命令行输入指令构建项目使用的是vuepress-theme-reco主题npx @vuepress-reco/theme-cli init my-blog根据交互 完成博客标题 描述 作者名称的填写等待项目搭建完毕cd进入所在项目 使用指令npm iinstall下载项目原创 2021-04-25 01:06:48 · 261 阅读 · 0 评论 -
vant-ui 使用
vant-ui 使用记录近期所使用vantui组件的过程使用过程中用到的vant文档https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart#tong-guo-npm-an-zhuang一.vant-ui的团队Vant 开源的移动端组件库是由有赞前端团队开发的,于 2017 年开源。有赞前端团队,几乎所有的微信用户 他关注的公众号当中,就会有一个页面是由有赞来进行搭建 维护和管理的二.安装方式有很多,最常用的就是通过npm或者yarn在项目中进原创 2021-04-24 23:24:20 · 2541 阅读 · 0 评论 -
vue3和vue2常见的使用差异 setup函数
vue3和vue2常见的使用差异学习路径单文件组件的渲染setup单文件组件的template子传父的实现单文件组件的渲染1.通过解构的方式获取createApp2.通过createApp创建应用import { createApp } from 'vue'import App from './App.vue'// import './index.css'createApp(App).mount('#app')单文件组件的templatevue 规定:每个组件对应的模板结构原创 2021-04-20 21:54:17 · 6438 阅读 · 0 评论 -
使用vite创建单页应用
使用vite创建单页应用学习路径vite介绍创建 vite 的项目梳理项目的结构vite 项目的运行流程vite介绍·vite·是vue 官方提供另外一种快速创建工程化的 SPA 项目的方式(一共有两种方式)① 基于 vite 创建 SPA 项目② 基于 vue-cli 创建 SPA 项目创建 vite 的项目按照顺序执行如下的命令,即可基于 vite 创建 vue 3.x 的工程化项目1. npm init vite-app 项目名称2. cd 项目名称3. npm inst原创 2021-04-20 21:03:49 · 750 阅读 · 1 评论 -
async和await
async和await学习路径什么是 async/awaitasync/await 的基本使用async/await 的使用注意事项什么是 async/await在async/await出现之前,开发者只能通过链式 .then() 的方式处理 Promise 异步操作.then 链式调用的优点:解决了回调地狱的问题.then 链式调用的缺点:代码冗余、阅读性差、不易理解async/await 是 ES8(ECMAScript 2017)引入的新语法,用来简化 Promise 异步操作原创 2021-04-20 20:49:54 · 91 阅读 · 0 评论 -
回调地狱 Promise 的基本使用
Promise什么是回调地狱Promise 的基本使用.then方法的特性一.回调地狱什么是回调地狱:多层回调函数的相互嵌套,就形成了回调地狱const fs = require('fs')fs.readFile('./data/a.txt', 'utf8', (err, data) => { if (err) { console.log(err); } else { console.log(data); fs.read原创 2021-04-20 20:49:10 · 104 阅读 · 0 评论 -
ES6中的模块化 默认导出与默认导入 按需导入与按需导出
ES6中的模块化学习路径前端模块化规范的分类什么是 ES6 模块化规范默认导出与默认导入按需导入与按需导出1.前端模块化规范的分类在 ES6 模块化规范诞生之前,JavaScript 社区已经尝试并提出了AMD、CMD、CommonJS等模块化规范。但是,这些由社区提出的模块化标准,还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准,例如:⚫ AMD 和 CMD 适用于浏览器端的 Javascript 模块化⚫ CommonJS 适用于服务器端的 Javascript 模原创 2021-04-20 20:23:49 · 1144 阅读 · 0 评论 -
vue cli 脚手架
实际开发中需要自己配置 webpack 吗答案:不需要!实际开发中会使命令行工具(俗称 CLI)一键生成带有 webpack 的项目开箱即用,所有 webpack 配置项都是现成的!我们只需要知道 webpack 中的基本概念即可!概念vue2.x使用的脚手架官方名称叫:vue cli,俗称脚手架Vue CLI是一个基于 Vue.js 进行快速开发的完整系统,它致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不原创 2021-04-20 20:05:47 · 90 阅读 · 0 评论 -
webpack配置 加载器loader配置
webpack中配置加载器loader1.背景在实际开发过程中,webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块,默认情况下,webpack不能打包转换css文件,在进行必要的配置之前,会报如下错误)ERROR in ./src/styles/a.css 1:4 --- 告诉css文件出问题Module parse failed: Unexpected token (1:4) -- 模块文件转换失败You may need an appropria原创 2021-04-20 20:05:17 · 680 阅读 · 0 评论