- 博客(61)
- 收藏
- 关注
RSS订阅原创 VsCode个人插件
Auto Rename Tag => 同时修改标签Bracket Pair Colorizer => 不同层级不同括号颜色Dracyka Theme => 个人比较喜欢的一款主题Error Lens => 错误信息显示ES7+REACT/Redux/React-Native=>react开发插件ESLINTIndenticator=>方便看结构Prettier Formatter for Visual Studio Code => 格式化
2024-05-27 17:36:32
441
原创 Flutter 初体验
Flutter 环境搭建1. 安装Flutter SDK 配置环境变量2. 配置两个用户环境变量变量名:FLUTTER_STORAGE_BASE_URL变量值:https://storage.flutter-io.cn变量名:PUB_HOSTED_URL变量值:https://pub.flutter-io.cn3. 安装Android Studio 顺带安装Android SDK脚手架组件Scaffold1. appBar: 显示在界面顶部的.......
2022-05-23 07:06:57
1568
原创 Dart基础
搭建Dart开发环境:下载并解压Dart SDKhttps://dart.cn/右上角获取Dart SDK 然后选取对应系统版本即可mac 配置环境变量sudo vim ~/.zshrc// 指定Dart SDK 安装路径export PATH=''$PATH:/User/xxx/SDK/dart-sdk/bin''source ~/.zshrc检查是否安装成功dart --versionDart文件的后缀是.dart// 入口文件void m.
2022-05-17 19:11:58
708
原创 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
2058
原创 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
294
原创 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-usehistoryimport { BrowserRouter, Route, Routes, Navigate .
2021-12-24 03:27:32
3063
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
986
原创 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
225
原创 Iconfont 图标库
iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486aFont AwesomeThe world’s most popular and easiest to use icon set just got an upgrade. More ..
2021-12-06 11:22:14
725
原创 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
564
原创 js 锚点滚动
const scrollIntoView = (num, className) => { data.active = num document.querySelector(className).scrollIntoView( { // 定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto" behavior: "smooth", // 定义垂直方向的对齐， "start"...
2021-10-09 14:13:32
647
原创 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列 每列宽度161pxgrid-template-rows:24...
2021-09-18 15:10:17
106
原创 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
1052
原创 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
1470
原创 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
2347
1
原创 eslint 定义变量但未使用
"no-unused-vars": "off"在package.json文件中添加如下代码 "no-unused-vars": "off"就好啦
2021-08-05 10:58:51
2915
1
原创 项目初始化文件
├── build # 构建相关├── mock # 项目mock 模拟数据├── plop-templates # 基本模板├── public # 静态资源│ │── favicon.ico # favicon图标│ └── index.html # html模板├── src .
2021-07-28 15:34:55
155
原创 文件流下载方法
首先要在请求中 让返回的数据为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
1967
原创 postMessage 内嵌传参
注意点外部页面初始化之后 , 发送消息到我们系统 , 我们再给他们数据 , 不要使用onload (看个人需求) 组件注销记得注销事件 注销的事件确保和注册的时候是同一个函数引用 , 用useCallback包裹 , 并且不要添加依赖项 , 函数内部要访问变量使用ref原始代码: // 订单分配货款 iframe const orderParagraphRef = useRef(null); // 订单分配货款参数 const paragraphPointsRef = useR
2021-05-22 14:58:54
542
原创 路由导航守卫
路由导航守卫可以建立在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
115
原创 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
725
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
84
原创 Vuex 模块化
模块化的简单应用定义两个模块 user 和 settinguser中管理用户的状态 tokensetting中管理 应用的名称 nameexport default new Vuex.Store({ modules: { user: { state: { token: '12345' } }, setting: { state: { name: 'ww' } } }})
2021-02-26 03:18:27
113
原创 uni-app项目 发布为安卓 app
1. 点击 HBuilderX 状态栏左侧的未登录按钮 , 弹出登录的对话框2. 在弹出的登录对话框中 , 填写帐号和密码之后 , 点击登录即可3. 打开项目根目录中的 manifest.json 配置文件 , 在基础配置面板中 , 获取uni-app 应用标识 , 并填写应用名称:4. 切换到 App 图标配置面板 , 点击浏览按钮 , 选择合适的图片之后 , 再点击自动生成所有图标并替换即可:5. 点击菜单栏上的 发行 => 原生app-云打包6. 勾选打包配置如下
2021-02-25 07:29:10
591
原创 uni-app项目 小程序发布
1.点击 HBuildeX 菜单栏上的 发行 => 小程序-微信(仅适用于uni-app)2. 在弹出框中填写要发布的小程序的名称和AppId之后 , 点击发行按钮:3. 在 HBuilderX 的控制台中查看小程序发布编译的进度:4. 在发布编译完成之后 , 会自动打开一个新的微信开发者工具界面, 此时 , 点击工具栏上的上传按钮:5. 填写版本号和项目备注之后 , 点击上传按钮:6. 上传完成之后 , 会出现如下的提示消息 , 直接点击确认按钮即可:
2021-02-25 06:38:06
615
原创 微信小程序登陆与支付
微信登录参数名 参数说明 备注 code 用户登录凭证 必要, 可通过 wx.login() 获取 uni-app中 使用uni.login() encryptedData 完整用户信息密文 必要, 可通过 getUserInfo 获取 iv 加密算法的初始向量 必要, 可通过 getUserInfo 获取 rawData 用户信息原始数据字符串 必要, 可通过 getUserInfo 获取 , JSON.stringify()
2021-02-25 06:06:58
631
原创 HBuilderX uni-app项目运行到微信开发者工具
新建项目目录结构把项目运行到微信开发者工具取消控制台警告信息红框位置添加:"checkSiteMap":false
2021-02-18 01:11:08
1629
原创 Lodash的一些基本使用
首先安装Lodashnpm 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
265
原创 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
810
3
原创 Vuex
组件之间共享数据的方式父向子传值: v-bind 属性绑定子向父传值: v-on 事件绑定兄弟组件之间共享数据: EventBus$on 接收数据的那个组件$emit 发送数据的那个组件VueXVuex是实现组件全局状态(数据)管理的一种机制 , 可以方便的实现组件之间的共享好处:能够在vuex中集中管理共享的数据 , 易于开发和后期维护 能够高效的实现组件之间的数据共享 , 提高开发效率 存储在vuex中的数据是响应式的, 能够实时保持数据与页面的同步...
2021-01-23 14:29:38
101
原创 Vue项目优化与上线
通过nprogress添加进度效果通过npm install --save nprogress或vue ui中运行依赖安装包// 导入 NProgress 包对应的JS和CSSimport NProgress from 'nprogress'import 'nprogress/nprogress.css '// 请求根路径axios.defaults.baseURL = 'url'// 添加一个请求拦截器axios.interceptors.request // axios设..
2021-01-22 19:15:34
895
原创 配置项目保存自动规范化
在此文件中配置如下信息"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
360
原创 百度地图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
173
原创 React 路由基础
React 路由介绍现在的前端应用大多都是 SPA (单页面应用程序 ) , 也就是只有一个HTML 页面的应用程序 , 因为它的用户体验更好 , 对服务器的压力更小 , 所以更受欢迎 . 为了有效的使用单个页面来管理原来多页面的功能 , 前端路由应运而生前端路由的功能: 让用户从一个视图 (页面) 导航到另一个视图 (页面) 前端路由是一套映射规则 , 在React中 , 是 URL路径 与 组件 的对应关系 使用React路由简单来说就是配置路径和组件(配对)使用步骤1.安装..
2021-01-04 16:41:18
151
原创 React 组件性能优化
减轻 state减轻 state : 只存储组件渲染相关的数据 ( 比如 : count / 列表数据 / loading 等) 注意: 不用做渲染的数据不要放在 staet 中 , 比如定时器 id 等 对于这种需要在多个方法中用到的数据 , 应该放在this中避免不必要的重新染组件更新机制: 父组件更新会引起子组件也被更新 , 这种思路很清晰 问题: 子组件没有任何变化时也会重新渲染 如何避免不必要的重新渲染 解决方法: 使用钩子函数 shouldComponentUpdate(..
2021-01-04 13:09:28
110
原创 React 组件的生命周期
组建的生命周期概述意义: 组件的生命周期有助于理解组件的运行方式 , 完成更复杂的组件功能 , 分析组件错误原因等 组件的生命周期: 组件从被创建到挂载到页面中运行 , 再到组件不用时卸载的过程 生命周期的每个阶段总是伴随着一些方法调用 , 这些方法就是生命周期的钩子函数 钩子函数的作用: 为开发人员在不同阶段操作组件提供了时机 只有 类组件 才有生命周期生命周期的三个阶段每个阶段的执行时机 每个阶段钩子函数的执行顺序 每个阶段钩子函数的作用1. 创建时 ( 挂载阶段 ).
2021-01-03 18:25:44
209
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人