2022-08-24发表2022-08-24更新前端开发几秒读完 (大约32个字)MacOS解决npm权限不足问题sudochownr`whoami`~npmsudochownr`whoami`usrlocallibnode_modules错误提示如下_permissiondeniedaccessusrlocallibnode_modules阅读更多
2022-08-20发表2022-08-20更新前端开发几秒读完 (大约26个字)使用cross-fetch替换node-fetch和isomorphic-fetch安装yarnaddcrossfetch使用importfetchfromcrossfetch_polyfill的使用方式importcrossfetchpolyfill_阅读更多
2022-08-20发表2022-08-20更新前端开发几秒读完 (大约102个字)dotenv加载变量@tsignoreimportdotenvfromdotenvimportpathfrompath_初始化测试环境变量exportconstinittestenv=()={const__dirname=pathdirname(importmetaurl)_constenvpath=pathrelative(processcwd()pathjoin(__dirnameenvdevelopmentlocal))replace()consolelog(envpath)dotenvconfig({path_env阅读更多
2022-08-18发表2022-08-18更新前端开发1 分钟读完 (大约171个字)使用vitest对vite项目进行单元测试使用vitest对vite项目进行单元测试缘由开发阶段经常需要测试一段代码正确性每次都去启动服务器验证实际上是不明智的。之前我一直采用单文件测试但是后来越来越发现这种弊端对于简单逻辑尚可一旦需要各种依赖时候就会出现单文件的环境与实际项目差别太大问题。解决那么解决方案就是我们今天要学习的vitest单元测试框架_专门为vite项目量身定制。上手先安装yarnadddvitest阅读更多
2022-08-17发表2022-08-17更新前端开发7 分钟读完 (大约1048个字)vite使用nodeJS内置的模块vite使用nodejs内置的模块问题背景vite是一个新工具有助于快速启动和简化前端javascript开发。vite相对于parcel等其他解决方案的主要优势是速度更快并将编译限制为对依赖项的一次性操作保持源代码不受影响(如果您不需要因为jsx或typescript)。vite下一代前端工具它由两个主要部分组成_一个通过原生es模块为您的源文件提供服务的开发服务器具有丰富的内置功能和惊人的快速热模块替换(hmr)。一个构建命令将您的代码与rollup捆绑在一起预先配置为输出高度优化的静态资产以用于生产阅读更多
2022-08-16发表2022-08-16更新前端开发2 分钟读完 (大约301个字)yarn和npm设置国内镜像源feat_更新最新镜像地址。由于npm包部分依赖下载速度缓慢最好使用国内镜像源来解决一般使用淘宝开源的镜像。安装yarnnpmigyarnyarn设置国内源yarnconfigsetregistryhttps_registrynpmmirrorcomglobalyarnconfigsetdisturlhttps_npmmirrorcompackagedistglobalyarnconfigsetsass_binary_sitehttps_cdnnpmmirrorcombinariesnodesassglo阅读更多
2022-08-05发表2022-08-05更新前端开发2 分钟读完 (大约266个字)从零开始使用react写一个随机变色的标签组件从零开始使用react写一个随机变色的标签组件标签定义及引用color_设置标签颜色visible_标签是否显示trueclosable_标签是否可以关闭(点击默认关闭)falseonclose_关闭会调icon_iconimportreact{usestate}fromreact_importclassnamesfromclassnames_interfaceipropstag{color?_string_visbile?_boolean_closable?_boolean_onclose?_()=ic阅读更多
2022-08-01发表2022-08-01更新前端开发几秒读完 (大约88个字)Next-js组件使用泛型类型传递异步数据nextjs组件使用泛型类型传递异步数据定义类型typepageprops={hello_stringpage_anyrandom_any}返回属性https_githubcomvercelnextjsblobcanaryexamplescmswordpresspagesindexjsexportconstgetstaticprops_getstaticprops{constpageid=vtfmdmletpage=awaitgetpage(pageid)if(!page){page={}}return{阅读更多
2022-07-31发表2022-07-31更新前端开发1 分钟读完 (大约118个字)vue3的reactive和ref的区别vue的reactive和ref的区别首先我们都知道ref函数和reactive函数都是用来定义响应式数据_但是reactive更适合定义复杂的数据类型(jsonarr)ref适合定义基本数据类型(可接收基本数据类型和对象)一句话_使用场景ref简单数据reactive复杂数据ref取数据需要加value参考https_juejincnpost阅读更多
2022-07-24发表2022-07-24更新前端开发1 分钟读完 (大约158个字)babel运行nodejs安装依赖yarnadd@babelcore@babelcli@babelnode@babelpresetenvd或者全局安装yarnglobaladd@babelcore@babelcli@babelnode@babelpresetenv注意_全局安装需要把yarn的全局目录添加到windows的path查找path命令如下yarnglobalbin不建议全局安装很多时候以来都成问题完整的依赖{_{}_{}}配置babelrc{_[[{}]]}接下来运行即可编译babeltestjs编译与执行babeln阅读更多