- 博客(61)
- 收藏
- 关注
RSS订阅原创 VsCode个人插件
Auto Rename Tag => 同时修改标签 Bracket Pair Colorizer => 不同层级不同括号颜色 Dracyka Theme => 个人比较喜欢的一款主题 Error Lens => 错误信息显示 ES7+REACT/Redux/React-Native=>react开发插件 ESLINT Indenticator=>方便看结构 Prettier Formatter for Visual Studio Code => 格式化
2024-05-27 17:36:32
606
原创 Flutter 初体验
Flutter 环境搭建 1. 安装Flutter SDK 配置环境变量 2. 配置两个用户环境变量 变量名:FLUTTER_STORAGE_BASE_URL 变量值:https://storage.flutter-io.cn 变量名:PUB_HOSTED_URL 变量值:https://pub.flutter-io.cn 3. 安装Android Studio 顺带安装Android SDK 脚手架组件 Scaffold 1. appBar: 显示在界面顶部的.......
2022-05-23 07:06:57
1747
原创 Dart基础
搭建Dart开发环境: 下载并解压Dart SDK https://dart.cn/右上角获取Dart SDK 然后选取对应系统版本即可 mac 配置环境变量 sudo vim ~/.zshrc // 指定Dart SDK 安装路径 export PATH=''$PATH:/User/xxx/SDK/dart-sdk/bin'' source ~/.zshrc 检查是否安装成功 dart --version Dart文件的后缀是.dart // 入口文件 void m.
2022-05-17 19:11:58
865
原创 react-i18next
因为react-i18next依赖 i18next ,所有需要同时安装i18next包 npm install react-i18next i18next -S 配置 在src下新建i18n文件夹，以存放国际化相关配置 i18n中分别新建三个文件： config.js：对 i18n 进行初始化操作及插件配置 en.json：英文语言配置文件 zh.json：中文语言配置文件 config.js： import i18n from "i18next"; import { initReact.
2022-04-28 11:31:14
2250
原创 styled 手撸Switch开关
import React from "react" import styled from "styled-components" // 开关盒子 const SwitchBox = styled.div` width: 44px; height: 22px; border-radius: 12px; border: 2px solid #e9eef2; padding: 2px; cursor: pointer; ` // 多选框 const checkbox = styled.
2022-03-28 18:01:50
374
原创 react-router-dom v6
2021.11.4 突然更新v6版本 写demo的时候措不及防 嵌套的组件名字不要纠结!虽然我也觉得login嵌套在Layout里面很奇怪 , 但是不妨碍理解! 官网链接:React Router | Upgrading from v5https://reactrouter.com/docs/en/v6/upgrading/v5#use-usenavigate-instead-of-usehistory import { BrowserRouter, Route, Routes, Navigate .
2021-12-24 03:27:32
3277
2
原创 react项目配置
配置项目路径 tsconfig.json文件中添加baseUrl,路径就是从src开始 { "compilerOptions": { "baseUrl": "./src", 生成环境和开发环境 if (process.env.NODE_ENV === 'development') { console.log('开发环境') } else if (process.env.NODE_ENV === 'production') { console.l
2021-12-23 17:38:09
1123
原创 warning: LF will be replaced by CRLF in **
git config core.autocrlf false (仅对当前git仓库有效） git config --global core.autocrlf false (全局有效，不设置推荐全局） LF和CRLF其实都是换行符，但是不同的是，LF是linux和Unix系统的换行符，CRLF是window 系统的换行符。这就给跨平台的协作的项目带来了问题，保存文件到底是使用哪个标准呢？ git为了解决这个问题，提供了一个”换行符自动转换“的功能，并且这个功能是默认处于”自动模式“即开启状态的。 ...
2021-12-12 19:24:36
308
原创 Iconfont 图标库
iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a Font AwesomeThe world’s most popular and easiest to use icon set just got an upgrade. More ..
2021-12-06 11:22:14
850
原创 vue 保存eslint配置
{ "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "editor.quickSuggestions": { "strings": true }, "workbench.colorTheme": "Quiet Light", "editor.tabSize": 2, "editor.detectIndentation": false, "emmet.triggerExpans.
2021-11-15 20:25:58
652
原创 js 锚点滚动
const scrollIntoView = (num, className) => { data.active = num document.querySelector(className).scrollIntoView( { // 定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto" behavior: "smooth", // 定义垂直方向的对齐， "start"...
2021-10-09 14:13:32
746
原创 grid 布局
display: grid; grid-template-columns: repeat(5, 161px); grid-template-rows: 24px; grid-row-gap: 8px; grid-column-gap: 8px; grid-template-columns:repeat(5,161px) 第一个参数5 表示5列 每列宽度161px grid-template-rows:24...
2021-09-18 15:10:17
169
原创 el-input输入框中只能输入数字，并且取小数点后两位
<el-input @keyup.native="value = oninput(value)" v-model="value" placeholder="请输入" /> oninput(value) { console.log(value, typeof value, value.replace(/[^\.\d]/g, "")...
2021-09-10 20:56:49
1196
原创 vue 定义但未使用报错
"eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/vue3-essential", "eslint:recommended" ], "parserOptions": { "parser": "babel-eslint" }, "rules": { "no-unused...
2021-08-20 17:26:11
1643
原创 antd Select 清除外边框
.ant-select:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector { border-color: transparent; box-shadow: none; }
2021-08-06 15:51:23
2908
1
原创 eslint 定义变量但未使用
"no-unused-vars": "off" 在package.json文件中 添加如下代码 "no-unused-vars": "off" 就好啦
2021-08-05 10:58:51
3230
1
原创 项目初始化文件
├── build # 构建相关 ├── mock # 项目mock 模拟数据 ├── plop-templates # 基本模板 ├── public # 静态资源 │ │── favicon.ico # favicon图标 │ └── index.html # html模板 ├── src .
2021-07-28 15:34:55
217
原创 文件流下载方法
首先要在请求中 让返回的数据为blob 本人这里使用的请求库为axios 写法如下 export const educeListExcel = (data) => { return request({ method: 'post', url: '/api/DbSet/AllListExcel', data, // 这里设置请求返回数据为blob responseType: 'blob', }) } 新建一个 download.js文件 代码如下
2021-07-15 10:37:00
2075
原创 postMessage 内嵌传参
注意点 外部页面初始化之后 , 发送消息到我们系统 , 我们再给他们数据 , 不要使用onload (看个人需求) 组件注销记得注销事件 注销的事件确保和注册的时候是同一个函数引用 , 用useCallback包裹 , 并且不要添加依赖项 , 函数内部要访问变量使用ref 原始代码: // 订单分配货款 iframe const orderParagraphRef = useRef(null); // 订单分配货款参数 const paragraphPointsRef = useR
2021-05-22 14:58:54
658
原创 路由导航守卫
路由导航守卫 可以建立在main.js同级目录下的permission.js中 main.js 直接引入使用 // 路由导航守卫 import router from '@/router' import store from '@/store' // 引入进度条插件 import Nprpgress from 'nprogress' import 'nprogress/nprogress.css' // 引入进度条 // 白名单 const whiteList = ['/login...
2021-03-21 17:44:20
183
原创 vue cli处理跨域问题
开发环境的跨域 开发环境的跨域 , 也就是在vue-cli脚手架环境下开发启动服务器时 , 我们访问接口所遇到的跨域问题 , vue-cli为我们在本地开启了一个服务 , 可以通过这个服务帮我们代理请求 , 解决跨域. 这就是vue-cli配置webpack的反向代理 采用vue-cli的代理配置 vue-cli的配置文件即vue.config.js , 这里有我们需要的代理选项 module.exports = { devServer: { // 代理配置 proxy: {.
2021-03-18 21:05:56
868
1
原创 微信小程序请求封装
// 基本域名 const Base_url = "/api"; // 查询字符串转换器 export const queryString = (params) => "?" + Object.keys(params) .map((key) => `${key}=${encodeURIComponent(params[key])}`) .join("&"); /..
2021-03-10 13:05:12
144
原创 Vuex 模块化
模块化的简单应用 定义两个模块 user 和 setting user中管理用户的状态 token setting中管理 应用的名称 name export default new Vuex.Store({ modules: { user: { state: { token: '12345' } }, setting: { state: { name: 'ww' } } } })
2021-02-26 03:18:27
209
原创 uni-app项目 发布为安卓 app
1. 点击 HBuilderX 状态栏左侧的未登录按钮 , 弹出登录的对话框 2. 在弹出的登录对话框中 , 填写帐号和密码之后 , 点击登录即可 3. 打开项目根目录中的 manifest.json 配置文件 , 在基础配置面板中 , 获取uni-app 应用标识 , 并填写应用名称: 4. 切换到 App 图标配置面板 , 点击浏览按钮 , 选择合适的图片之后 , 再点击自动生成所有图标并替换即可: 5. 点击菜单栏上的 发行 => 原生app-云打包 6. 勾选打包配置如下
2021-02-25 07:29:10
715
原创 uni-app项目 小程序发布
1.点击 HBuildeX 菜单栏上的 发行 => 小程序-微信(仅适用于uni-app) 2. 在弹出框中填写要发布的小程序的名称和AppId之后 , 点击发行按钮: 3. 在 HBuilderX 的控制台中查看小程序发布编译的进度: 4. 在发布编译完成之后 , 会自动打开一个新的微信开发者工具界面, 此时 , 点击工具栏上的上传按钮: 5. 填写版本号和项目备注之后 , 点击上传按钮: 6. 上传完成之后 , 会出现如下的提示消息 , 直接点击确认按钮即可:
2021-02-25 06:38:06
722
原创 微信小程序登陆与支付
微信登录 参数名 参数说明 备注 code 用户登录凭证 必要, 可通过 wx.login() 获取 uni-app中 使用uni.login() encryptedData 完整用户信息密文 必要, 可通过 getUserInfo 获取 iv 加密算法的初始向量 必要, 可通过 getUserInfo 获取 rawData 用户信息原始数据字符串 必要, 可通过 getUserInfo 获取 , JSON.stringify()
2021-02-25 06:06:58
786
原创 HBuilderX uni-app项目运行到微信开发者工具
新建项目 目录结构 把项目运行到微信开发者工具 取消控制台警告信息 红框位置添加:"checkSiteMap":false
2021-02-18 01:11:08
1788
原创 Lodash的一些基本使用
首先安装Lodash npm i lodash 按需导入 import { XXX } from 'lodash' 全部导入 import lodash from 'lodash' 防抖处理 import { debounce } from 'lodash' watch:{ // 监听的文本改变事件 searchText:{ handler: debounce(function(value){ console.log(value) },1000) } }
2021-02-02 21:26:50
361
原创 vue cli 和 vant 移动端项目初始化
vant的安装与配置可见官方文档 快速上手中查看 网址:https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart 移动端 rem 适配 Vant 中的样式默认使用px作为单位 , 如果需要使用 rem 单位 , 推荐使用以下两个工具 postcss-pxtorem是一款postcss插件 , 用于将单位转换为rem lib-flexible用于设置 rem 基准值 下面我们分别将这两个工具配置到项目中完成 rem 适配 1.使用 li...
2021-01-23 22:19:49
940
3
原创 Vuex
组件之间共享数据的方式 父向子传值: v-bind 属性绑定 子向父传值: v-on 事件绑定 兄弟组件之间共享数据: EventBus $on 接收数据的那个组件 $emit 发送数据的那个组件 VueX Vuex是实现组件全局状态(数据)管理的一种机制 , 可以方便的实现组件之间的共享 好处: 能够在vuex中集中管理共享的数据 , 易于开发和后期维护 能够高效的实现组件之间的数据共享 , 提高开发效率 存储在vuex中的数据是响应式的, 能够实时保持数据与页面的同步 ...
2021-01-23 14:29:38
156
原创 Vue项目优化与上线
通过nprogress添加进度效果 通过npm install --save nprogress或vue ui中运行依赖安装包 // 导入 NProgress 包对应的JS和CSS import NProgress from 'nprogress' import 'nprogress/nprogress.css ' // 请求根路径 axios.defaults.baseURL = 'url' // 添加一个请求拦截器 axios.interceptors.request // axios设..
2021-01-22 19:15:34
1047
原创 配置项目保存自动规范化
在此文件中配置如下信息 "editor.formatOnPaste":false, "editor.formatOnSave":false, "editor.formatOnType":false, "editor.codeActionsOnSave":{ "source.fixAll.eslint":true }, "vetur.format.defaultFormatter.js":"none", "[vue]":{ "editor.defaultFormatter...
2021-01-11 23:13:47
514
原创 百度地图API
前面申请创建帐号, 获取ak 使用步骤 1.引入百度地图API的JS文件 , 替换自己申请好的密钥 <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=你的密钥" ></script> 2.在 index.css 中设置全局样式 html, body, #root, .App { height: 100%; } body .
2021-01-06 21:42:59
269
原创 React 路由基础
React 路由介绍 现在的前端应用大多都是 SPA (单页面应用程序 ) , 也就是只有一个HTML 页面的应用程序 , 因为它的用户体验更好 , 对服务器的压力更小 , 所以更受欢迎 . 为了有效的使用单个页面来管理原来多页面的功能 , 前端路由应运而生 前端路由的功能: 让用户从一个视图 (页面) 导航到另一个视图 (页面) 前端路由是一套映射规则 , 在React中 , 是 URL路径 与 组件 的对应关系 使用React路由简单来说就是配置路径和组件(配对) 使用步骤 1.安装 ..
2021-01-04 16:41:18
240
原创 React 组件性能优化
减轻 state 减轻 state : 只存储组件渲染相关的数据 ( 比如 : count / 列表数据 / loading 等) 注意: 不用做渲染的数据不要放在 staet 中 , 比如定时器 id 等 对于这种需要在多个方法中用到的数据 , 应该放在this中 避免不必要的重新染 组件更新机制: 父组件更新会引起子组件也被更新 , 这种思路很清晰 问题: 子组件没有任何变化时也会重新渲染 如何避免不必要的重新渲染 解决方法: 使用钩子函数 shouldComponentUpdate(..
2021-01-04 13:09:28
199
原创 React 组件的生命周期
组建的生命周期概述 意义: 组件的生命周期有助于理解组件的运行方式 , 完成更复杂的组件功能 , 分析组件错误原因等 组件的生命周期: 组件从被创建到挂载到页面中运行 , 再到组件不用时卸载的过程 生命周期的每个阶段总是伴随着一些方法调用 , 这些方法就是生命周期的钩子函数 钩子函数的作用: 为开发人员在不同阶段操作组件提供了时机 只有 类组件 才有生命周期 生命周期的三个阶段 每个阶段的执行时机 每个阶段钩子函数的执行顺序 每个阶段钩子函数的作用 1. 创建时 ( 挂载阶段 ) .
2021-01-03 18:25:44
333
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人