- 博客(74)
- 收藏
- 关注
RSS订阅原创 uniapp中使用pinia，并做数据持久化
安装依赖pnpm i pinia pinia-plugin-persistedstate @nuxt/devalue -S创建store文件夹，创建持久化插件/store/plugins.tsimport { App } from 'vue'import { createPinia } from 'pinia'import devalue from '@nuxt/devalue'import { createPersistedState } from 'pinia-plugin-per.
2022-04-26 11:33:30
6303
2
原创 uniapp vite 路由跳转、登录模块封装（非无感登录）
需求将uniapp的路由跳转promise化navigateTo接受后端返回的url，需要自动解析跳转模式所有的路由跳转都要先检测用户是否已登录1)、如果未登录，打开登录弹框，用户授权登录，登录成功后要自动完成用户的上一次操作，无需用户再次点击跳转2)、如果已登录，跳转对应的页面实现封装路由相关函数import { useStore } from '@/store'import { InjectionKey, Ref } from 'vue'export type loginC
2022-04-12 17:01:12
7719
原创 h5移动端实现物理返回键关闭弹框而非返回上一级页面
需求：页面中的popup弹框，可以通过物理返回键进行关闭方案：（1）当打开弹框时，向history中添加一个空记录，并且监听history的popstate变化（2）当弹框打开状态用户操作了返回上一级页面，会触发监听事件，关闭弹框（3）当弹框打开状态用户通过状态值（比如popup中有个取消按钮）关闭了弹框，要把监听事件清除实现// vue3 setup模式import { useEventListener } from '@vueuse/core'//页面中点击打开弹框按钮..
2022-04-08 10:23:20
2613
原创 pinia数据持久化插件
最近新开的项目，尝试使用pinia做状态管理 pinia，没有发现官方提供的持久化插件，就先按照文档的插件模块，就自己先写一个凑合用import { App } from 'vue'import { createPinia, PiniaPluginContext } from 'pinia'import devalue from '@nuxt/devalue'/*需要持久化的数据*/const dataPath = { main: [], user: ['token', 'userIn
2022-02-21 15:08:11
4040
2
原创 uniapp/小程序 swiper组件无限数据滚动
最近开发的一个小程序中涉及一个答题页面，打算使用小程序的swiper组件开发，题目可能数量过多，使用swiper一次性加载会造成卡顿，于是进行了一些优化解决思路：页面只展示3个swiper-item组件（小程序视频轮播插件受到的启发），每次轮播变化，都截取总数据里面的3条进行展示观察规律：画了个简单草图，大家可以看下，每次轮播索引变化后，计算出当前索引、前一个索引值、后一个索引值，以及分别对应到数据列表上的索引和值代码实现<template> <view class="ind
2021-12-30 14:58:44
8190
8
原创 vue3 + uniapp + HBuilder 项目搭建 - 扩展uniapp内置Api
安装uni-api的typesnpm i @dcloudio/types -D配置tsconfig识别namespace UniApp// tsconfig.json{ "compilerOptions": { "types": ["node", "@dcloudio/types"], "typeRoots": ["./node_modules/@types/","./node_modules/@dcloudio/types/", "./types"], }}创建配置文件
2021-12-09 17:10:07
2031
2
原创 vue3 + vite 项目搭建 - 配置图标库
安装依赖yarn add unplugin-icons unplugin-vue-components --dev或者npm i -D unplugin-icons unplugin-vue-components配置vite.config.ts (自定义图标)import UnpluginVueComponents from 'unplugin-vue-components/vite'import Icons from 'unplugin-icons/vite'import IconsRes
2021-11-30 10:44:07
4146
1
原创 vue3 + vite 项目搭建 - 引入windcss
安装依赖npm i -D vite-plugin-windicss windicss//或者yarn add vite-plugin-windicss windicss --dev使用插件// vite.config.tsimport WindiCSS from 'vite-plugin-windicss'export default defineConfig({ plugins: [ WindiCSS() ],})导入样式// main.tsimport 'vi
2021-11-29 10:16:11
2667
原创 vue3 + vite 项目搭建 - 配置 stylelint (vue scss)
安装依赖// 注意版本之间的依赖关系，升级最新版本后可能出现未知错误"devDependencies": { "stylelint": "^13.13.1", "stylelint-config-prettier": "^9.0.3", "stylelint-config-standard": "^22.0.0", "stylelint-order": "^5.0.0", "stylelint-scss": "^4.0.0" },配置 .stylelint
2021-11-26 17:54:11
4807
原创 slice、substring、substr比较
示例let stringValue = "hello world"; console.log(stringValue.slice(3)); // "lo world" console.log(stringValue.substring(3)); // "lo world" console.log(stringValue.substr(3)); // "lo world" console.log(stringValue.slice(3, 7)); // "lo w" console.log(st.
2021-09-24 16:57:03
82
原创 vue3 + vite 项目搭建 - 源码
项目比较干净，填充页面即可使用百度网盘链接：https://pan.baidu.com/s/1G99HBpRbYzD_f2EyJm-8zA 提取码：1234
2021-08-04 16:39:42
414
原创 vue3 + vite 项目搭建 - 封装全局请求axios (单例模式)
安装依赖"dependencies": { "qs": "^6.10.1", "axios": "^0.21.1" },统一管理配置，创建src/config/net.config.ts//src/config/net.config.tstype NetConfigSuccessCode = 200 | '200' | '000000'// 正式项目可以选择自己配置成需要的接口地址，如"https://api.xxx.com"// 问号后边代表开发环境，冒号后边代表.
2021-08-04 15:56:49
2586
1
原创 vue3 + vite 项目搭建 - 配置环境变量env
在项目根目录新建 .env.development、.env.production、.env.test//开发.env.developmentVITE_MODE_NAME=developmentVITE_APP_ID=123456VITE_AGENT_ID=123456VITE_LOGIN_TEST=trueVITE_RES_URL=https://www.baidu.comVITE_APP_TITLE=风控管理平台VITE_EDITOR=webstorm//生产.env.produ.
2021-08-04 15:30:38
4934
1
原创 vue3 + vite 项目搭建 - 引入vue-router及实现权限控制
一般后台管理系统都会有管理员和普通用户的区分，所以要做权限控制思路创建公用页面login，可以让用户进行登录操作，根据用户信息对应的身份，匹配不同的权限模块在路由前置钩子进行身份验证拦截，将拦截条件分为 白名单（不做拦截）、登录态未登录、登录态已登陆路由注册分为两步，公用页面直接注册，权限路由根据登录用户的身份来注册解决路由层级过深会导致keep-alive不缓存问题实现安装依赖"dependencies": { "nprogress": "^0.2.0", "vue-ro
2021-08-04 11:03:07
1882
原创 vue3 + vite 项目搭建 - 引入vuex
预览文档，了解vuex4.0与vuex3.0的差异安装依赖"dependencies": { "vuex": "^4.0.2", "vuex-persistedstate": "^4.0.0" },在src路径下创建store文件夹，目录结构如图用vuex实现切换语言，点击按钮增1，注意setup中怎么获取store值，vuex模块取值、注册，以及借助插件实现持久化// store/store.d.tsdeclare namespace MyStore { ty.
2021-08-03 16:30:22
1086
3
原创 vue3 + vite 项目搭建 - 修改ElementPlus主题
elemntPlus的主题变量本来时延用2.0版本的，所以文档也是和2.0很相似，但是根据文档去修改主题色已经不生效了，看了下主题变量代码，发现已经更换了新的写法，去查看更新日志也有更新记录，可能是对应的主题文档没有来得及更新把，也可能是我的使用姿势有误。。。首先自定义一个变量文件，并在main.ts中引入// elementPlus.scss/* 改变主题色变量 */ $--color-primary: teal; /* 改变 icon 字体路径变量，必需 */$--font-path: 'e.
2021-08-03 13:55:41
4633
9
原创 vue3 + vite 项目搭建 - 引入ElementPlus及配置国际化
element提供了完整引入和按需引入的方案，并且使用dayjs国际化完整引入 + 普通国际化新建 elementPlus.ts文件，并在main.ts中引入// elementPlus.tsimport { App } from 'vue'import ElementPlus from 'element-plus'import 'element-plus/lib/theme-chalk/index.css'const install = (app: App) => { ap
2021-08-03 12:27:42
4880
原创 vue3 + vite 项目搭建 - 配置项目别名@
在vite.config.ts新增 resolve: { alias: { '@': resolve('src'), '*': resolve('') } },
2021-08-03 10:37:55
2612
原创 vue3 + vite 项目搭建 - 配置tsconfig
在项目根目录创建 tsconfig.json{ "compilerOptions": { // 允许从没有设置默认导出的模块中默认导入。这并不影响代码的输出，仅为了类型检查 "allowSyntheticDefaultImports": true, // 解析非相对模块名的基准目录 "baseUrl": ".", "esModuleInterop": true, // 从 tslib 导入辅助工具函数（比如 __extends， __rest等）
2021-08-03 10:26:36
2885
原创 vue3 + vite 项目搭建 - 配置eslint
安装依赖 "devDependencies": { "standard": "^16.0.3", "vue-eslint-parser": "^7.10.0", "@typescript-eslint/parser": "^4.29.0", "@typescript-eslint/eslint-plugin": "^4.29.0", "eslint-plugin-vue": "^7.15.1", "eslint": "^7.32.0", "eslint-p
2021-08-03 10:22:42
14167
原创 vite2 + vue3 + element-plus 图片资源的使用
我的项目，非引入资源（主要是图片）一般存放在/public/assets，根据vite文档指引，public下的文件会在打包和移入build/outDir目录下，访问时使用 /assets绝对路径的方式。public入口入坑：看到文档的说明，我就天真的使用/assets的方式访问项目图片资源，本地访问正常，但是打包到线上后出现图片找不到的情况，根据图片404的结果，直接原因就是 我的项目实在域名根目录下面的 /admin-risk/目录下存放，所以图片中缺少了/admin-risk，但我根据
2021-07-16 10:02:48
1724
原创 element-plus国际化设置，本地可用，打包后出错，求解决方案
背景1. 最近使用了vite2.0 + vue3.0 + elementPlus构建了一个后台管理系统，dev环境运行正常，打包时线上抛出一个异常，导致项目无法正常运行打开。2. 当我去打包代码中删除这个报错方法，项目就可以正常运行了，经过多次排查，发现这个报错方法就是element提供的国际化方法导致的。求助为什么会出现此问题···...
2021-07-15 08:54:33
2024
原创 vue项目使用ts识别别名@
在tsconfig.json文件中加入"paths": { "baseUrl": ".", "@/*": ["src/*"] }完整配置//vite.config.tsresolve: { alias: { '@': resolve('src'), '*': resolve(''), }, },//tsconfig.json{ "compilerOptions": {
2021-05-14 16:28:26
1501
1
原创 每日一题 15（求最大值）
原题入口描述给一个浮点数数组，求数组中的最大值。样例样例 1:输入: [1.0, 2.1, -3.3]输出: 2.1 样例解释: 返回最大的数字样例 2:输入: [1.0, 1.0, -3.3]输出: 1.0 样例解释: 返回最大的数字。export class Solution { /** * maxOfArray * * @param A: An integer * @return: a float number */ maxOfArr
2021-04-29 09:33:21
78
原创 每日一题14（经典排序）
原题入口描述给一组整数，按照升序排序，使用选择排序，冒泡排序，插入排序或者任何 O(n2) 的排序算法。样例样例 1:输入: [3, 2, 1, 4, 5]输出: [1, 2, 3, 4, 5]样例解释: 返回排序后的数组。样例 2:输入: [1, 1, 2, 1, 1]输出: [1, 1, 1, 1, 2]样例解释: 返回排好序的数组。public class Solution { /** * @param A: an integer array
2021-04-28 17:03:50
59
原创 每日一题 13（巴什博弈）
原题入口描述你正在和朋友玩一个游戏：桌子上有一堆石头，每一次你们都会从中拿出1到3个石头。拿走最后一个石头的人赢得游戏。游戏开始时，你是先手。假设两个人都绝对理性，都会做出最优决策。给定石头的数量，判断你是否会赢得比赛。举例：有四个石头，那么你永远不会赢得游戏。不管拿几个，最后一个石头一定会被你的朋友拿走。样例样例 1：输入：n = 4输出：False解析：先手取走1,2或者3，对方都会取走最后一个样例 2：输入：n = 5输出：True解析：先手拿1个，必胜export cla
2021-04-28 09:20:12
218
原创 每日一题 12（两数相加）
原题入口描述给出两个整数 aa 和 bb , 求他们的和并以整数（int）的形式返回。你不需要从标准输入流读入数据，只需要根据aplusb传入的两个参数 a 和 b，计算他们的和并返回就行。-2^{31} \leq a, b \leq 2^{31} - 1−231 ≤a,b≤231 −1-2^{31} \leq a + b \leq 2^{31} - 1−231 ≤a+b≤231 −1样例样例 1：输入：a = 1b = 2输出：3解释：a
2021-04-27 09:54:13
318
原创 每日一题 11（数字反转）
原题入口描述反转一个只有3位数的整数。你可以假设输入一定是一个只有三位数的整数，这个整数大于等于100，小于1000。样例样例 1：输入：number = 123输出：321解释：反转数字。样例 2：输入：number = 900输出：9export class Solution { /** * reverseInteger * * @param number: A 3-digit number. * @return: Re
2021-04-27 09:01:52
97
转载 js原型、原型链（学习记录）
原文链接，如需详细学习，请点这里，当前仅对部分内容做记录，方便查询 function Person(name) { this.name = name this.printName = function () { console.log(this.name); } } Person.prototype.
2021-03-27 16:31:00
88
转载 css实现宽高比例布局（利用padding-top/bottom适配）
伪元素方式实现 <div class="aspect-ration"></div> .aspect-ration { background-color: #f00; } .aspect-ration::before { content: ""; float: left; padding-bottom: 50%; } .aspect-ration::after { clear: both; content: ""; .
2021-03-24 17:33:32
344
原创 每日一题 10（有效的括号）
原题入口给定一个字符串所表示的括号序列，包含以下字符： ‘(’, ‘)’, ‘{’, ‘}’, ‘[’ and ‘]’， 判定是否是有效的括号序列。括号必须依照 “()” 顺序表示， “()[]{}” 是有效的括号，但 “([)]” 则是无效的括号。样例样例 1：输入："([)]"输出：False样例 2：输入："()[]{}"输出：True挑战O(n)的时间，n 为括号的个数。public class Solution { /** * @param s: A st
2021-03-23 20:54:43
65
原创 每日一题9 （计算器）
原题入口978. 基础计算器中文English实现一个基础的计算器来计算一个简单表达式。这个表达式字符串可能包含左括号 ‘(’ 与右括号 ‘)’，加号 ‘+’ 或者 减号 ‘-’，非负整数以及空格 ’ '。给出的表达式总是合理的。样例样例 1输入：“1 + 1”输出：2样例 2输入："(1+(4+5+2)-3)+(6+8)"输出：23注意事项请 不要 使用内置用来计算字符串表达式的函数public class Solution { /** * @param s
2021-03-22 14:17:31
103
原创 面试总结3.17
响应式与自适应的区别自适应布局就是宽度自适用布局，在不同大小的设备上，网页以等比例的形式缩放宽度，呈现同样的主体内容和排版布局响应式布局就是根据屏幕大小变化，页面的内容排版布局会自动调整变动，已呈现更好的用户体验...
2021-03-17 13:49:59
56
原创 面试总结3.16
js运行机制js是单线程的，单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。任务又分为同步任务和异步任务（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执
2021-03-16 16:32:48
62
原创 小程序4.13登录逻辑封装 (wx.getUserProfile)
微信4.13更新通知微信4.13更新后，对用户登录逻辑做了接口调整import {wxGetUserProfile, wxHide, wxLoading, wxLogin} from "../utils/wxPromise";export const basic = Behavior({ methods: { $emit(name, detail, options) { this.triggerEvent(name, detail, options); },
2021-03-15 16:28:59
3391
2
原创 Vite2.0创建项目（Vue3.0 + ts + element-ui）
安装环境 源码地址npm i pnpm -g创建项目npm init @vitejs/app --template vue-ts配置依赖复制下面代码替换package.json//package.json{ "name": "vite-project", "version": "0.0.0", "scripts": { "dev": "vite", "build": "vite build", "serve": "vite preview" },
2021-03-06 15:34:13
885
原创 小程序登录弹框
需求描述登录弹框样式实现。在用户发起操作时（如：点击某个按钮）检测用户登录，如未登录，记录用户操作，弹出登录框。用户登录成功后自动用户的上次操作。所需知识点behaviors混入小程序获取自定义组件实例实现登录弹框样式...
2021-03-06 14:22:34
822
原创 每日一题 8（两数求和）
原题入口给一个整数数组，找到两个数使得他们的和等于一个给定的数 target。你需要实现的函数twoSum需要返回这两个数的下标, 并且第一个下标小于第二个下标。注意这里下标的范围是 0 到 n-1。样例样例1:给出 numbers = [2, 7, 11, 15], target = 9, 返回 [0, 1].样例2:给出 numbers = [15, 2, 7, 11], target = 9, 返回 [1, 2].挑战给自己加点挑战O(n)O(n) 空间复杂度，O(nlogn)O(
2021-03-02 16:29:39
118
原创 深度克隆基本类型函数实现(学习记录)
function deepClone(obj) { let result; if (typeof obj === 'object') { result = typeof obj.constructor == Array ? [] : {} for (let i in obj) { result[i] = typeof obj[i] === 'object' ? deepClone(obj[i]) : obj[i] } } else { result = obj } retur
2021-03-02 14:16:38
196
转载 Javascript中的预编译(学习记录)
原文链接全局预编译的步骤创建GO（Global Object，全局执行期上下文，在浏览器中为window）对象；寻找var变量声明，并赋值为undefined；寻找function函数声明，并赋值为函数体；执行代码。函数预编译的步骤创建AO对象，执行期上下文（后面更新关于执行期上下文详解）。寻找函数的形参和变量声明，将变量和形参名作为AO对象的属性名，值设定为undefined.将形参和实参相统一，即更改形参后的undefined为具体的形参值。寻找函数中的函数声明，将函数名作为A
2021-03-02 08:40:09
151
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人