前端
文章平均质量分 67
lsjweiyi
杂学菜鸡
展开
-
nuxt3使用记录五:启动压缩构建并自定义静态资源代理(不仅限于nuxt3)
nuxt3也同样自带压缩功能,默认支持两种格式gzip,br对比可以发现,压缩后大小减少很多,其中br格式压缩率最高nuxt3通过SSG构建完静态资源,它会提醒你直接执行命令即可代理运行,并且会根据请求头判断客户端是否支持压缩格式,支持的话优先返回压缩后的文件。不得不说nuxt3在细节方面还是做得不错的。原创 2024-04-19 19:55:56 · 375 阅读 · 0 评论 -
nuxt3使用记录四:加载静态资源时路径的写法研究
资源路径要直接纯字符串写在template中,才能通杀。原创 2024-04-18 22:33:57 · 634 阅读 · 0 评论 -
nuxt3使用记录三:SSG渲染其实是混合渲染
从上一篇成功构建出静态的html文件后,我最近又折腾了一下,因为对SSG的理解还是太浅了。一直很好奇为什么SSG构建完会有这么多.js文件,昨晚找到点思路,记录一下。原创 2024-04-16 11:20:06 · 289 阅读 · 0 评论 -
nuxt3使用记录一:框架摸索
之前直接用的Vue3,后面为了seo,了解到Vue3用SSR渲染很复杂,甚至衍生了出nuxt3这个框架,这个框架在github已经有50K star了,也已经是个非常成熟的框架了,不过我感觉国内的资料也不多,看来国内接受新事物的速度依然很慢,大厂估计都自研了,小公司就用老方法PHP啥的。学习nuxt3最详细的资料也就是,不过,说实话也很不详细。我研究了几天,说难其实也不难,说简单也不简单,因为整个框架按约定的自动配置的东西非常多,不了解的话,不知道框架的运作机制,都不知道哪些文件该放哪里。原创 2024-04-06 15:03:07 · 1048 阅读 · 0 评论 -
nuxt3 使用$fetch封装(typescript)客户端使用的http请求方法
nuxt3提供了usefetch()之类的方法来发起请求,他提供的这些方法貌似都是考虑和server端配合使用的,比如说在页面初始化前,有些数据是由后端提供,但是为了按SSR来渲染页面,就可以使用usefetch()来配合server先从后端获取数据,再渲染页面。所以我看文档,都是使用await等待,和之前我接触的异步请求非常不同。而我想要的做的是由客户端直接向后端发起http请求的方法,usefetch()好像也可以设置只由客户端发起请求来使用,但是却没法由我自己来预处理后端返回的数据。原创 2024-04-06 13:45:01 · 859 阅读 · 0 评论 -
使用gin 代理 web网页
业界常用的方案是nginx做代理,这个是网上最多资料的。因为我需要定制化入口,做自己的流量转发,如果再加个nginx来做第一层方向代理和网页的静态资源代理的话,那么就多了一层,哪怕都在一台服务器里,那也是多了一层性能损耗,所以我就在想,golang没有自己的网页代理方案吗?不应该呀,非要依赖nginx?网上的资料模模糊糊,提到gin框架有静态资源代理的方法。但是有写得不是很具体。我实测,是可以做到的。原创 2023-11-22 21:24:00 · 652 阅读 · 0 评论 -
naive UI 的upload组件自定义手动上传图片的base64位
网上发现还是element plus的资料比较多,其实这些组件都大同小异,记录一下方便以后使用。// 后端返回的是base64位数据,需要按下面格式显示。// 读取图片是异步方法,成功读取后会执行里面的内容。// 自定义上传图像的方法覆盖默认方法。// 点击按钮后上传到服务器的方法。// 这就是个普通字符串。原创 2023-03-18 17:02:43 · 1921 阅读 · 1 评论 -
naive UI 折叠面板设置折叠面板的可点击区域
我在使用naive UI 的折叠面板时,他有个特点,就是无论点击header的哪个位置,都会展开/折叠面板。且组件没有提供api设置可点击区域这个特点会带来一个问题,比如如下场景:由于我在header上设置的内容比较复杂,有按钮,导致这么一个问题,我点击自己的按钮,也会展开或折叠面板,那么就没办法友好的使用我自己的按钮了。所以,我希望,只有点击左边的箭头图标时,才会展开或折叠面板。利用naive提供的受控模式,即点击面板的header之后,是否展开由我决定,而不是组件自己决定。通过自定义那个箭头图标,并且原创 2022-06-05 12:42:37 · 1479 阅读 · 5 评论 -
vue3 overflow 长列表虚拟滚动的知识记录
其实我是要在手机端实现虚拟列表(web端其实有很实用的插件可以用,没必要自己实现)。找了两天资料,也没有找到一个我满意的方案。最后看到一片比较通俗易懂的文章,按照他的方案实现了基本的虚拟列表。PS:功能虽然实现了,但是还有小问题,比如快速滚动时效果一般。性能也还未测试。uniapp下的坑做虚拟列表,首先得能拿到滚动条的数据,也就是滚动监听事件。网上找了好久,基本就两个方案:基于document什么的监听“scroll”事件。这个试了,确实可以哈。但是,如果我一个页面分两边,分别有两个滚动区域呢?这原创 2022-04-30 20:24:20 · 1002 阅读 · 0 评论 -
v-show在uniapp中的使用不生效的问题
<template> <view v-show="false" style="display: flex; background-color: red"> 你好 </view> <uni-popup ref="popup"> <view v-show="false" style="display: flex; background-color: red"> 你好 </view> <v原创 2022-04-23 14:15:07 · 5888 阅读 · 0 评论 -
css overflow使用总结
overflow是个很强大的样式,在非常多的场合需要用到它,比如区域滚动。下面一一列举下使用。不使用overflow我给父元素设置了固定的高度,然后添加过多的文字, <view style="height: 100px; background-color: red"> <view style="word-break: break-all; font-size: xx-large"> 测试文字测试文字测试文字测试文字测试文字测试文字测原创 2022-04-22 22:07:57 · 1267 阅读 · 0 评论 -
vue3组合式API下 defineProps标注自定义类型,以及设置默认值的方法
官方文档:https://staging-cn.vuejs.org/guide/components/props.html#props-declarationdefineProps默认支持常见的类型检查,在ts下,我们需要明确变量的类型,类型经常是我们的自定义类型。可以使用下面的方式:<script setup lang="ts"> interface iA { a: number; b: string; }const props = de原创 2022-04-22 20:34:37 · 13812 阅读 · 0 评论 -
uniapp 多选框的全选功能实现
uniapp内置的checkbox其实以及checkbox-group本来挺好的,但是有两个问题:无法依赖其事件实现全选样式固定,难以修改他们无法实现全选的原因是:我动态修改checkbox的checked字段时,界面上的状态能够实时变化,但是无法触发checkbox-group的change事件。意味着无法依赖checkbox-group管理好已选项。就是说:我点了全选,界面上看着是全选了。然后此时我取消了其中一个选项,此时触发change事件,但是它反馈给我的已选列表是错的。这是不行的。原创 2022-04-16 21:34:50 · 8844 阅读 · 1 评论 -
uniapp(vue)在v-for中组件的事件中添加自己的参数
在html中给我们经常会因为数据是列表而需要用循环来展示数据。而其中有些组件是有回调事件的。这时候循环中如何知道是哪个数据在触发事件就是很重要的事,否则无法修改对应的数据。举个例子,我们在购物车中需要用到uni-number-box去修改数量,购物车的商品肯定是用循环生成的。每个商品对应着一个uni-number-box。但是uni-number-box的change事件仅仅只返回当前数量的值。在代码中我们并不知道去给具体哪个商品修改数据:而我们在html的循环中,可以有列表的下标,甚至是直接拿数据对原创 2022-04-16 16:21:33 · 1910 阅读 · 0 评论 -
uniapp button字体没有垂直居中
uniapp在某些场景下,它的button字体没有垂直居中:应该看的出来,上面比下面宽不少。造成这个现象的原因是我给它的样式设置了height:80%。因为默认样式只提供了default和mini这两个选项,他们分别代表的字体大小是18px和13px。因为我是不想按钮太挨着我的上下两条边,所以设置了高度。解决办法1:放弃设置高度,改为设置字体大小,也能改变按钮的高度。这个方法应该更符合规范。解决办法2:方法1可能大家都知道,这里主要想讲一下另一个方案,虽然在这里不一定适合:造成这个现象其实是原创 2022-04-16 15:57:19 · 5570 阅读 · 0 评论 -
uniapp下页面布局分析三——元素垂直居中
本文继续前面的内容,App.vue采用了flex布局垂直居中还是有点难度的。但是习惯使用flex布局后,又能简单的实现。页面只有一个元素<template> <view class="center"> <view style="background-color: blue">居中文字</view> </view></template><style> .center {原创 2022-04-15 20:02:11 · 12471 阅读 · 0 评论 -
uniapp下页面布局分析二——固定部分元素到底部
接上篇内容。继续添加内容。在底部添加一个固定的栏目<template> <view style="flex: auto; background-color: red"> <view style="bottom: 0">我固定在底部</view> </view></template>我试着向上面这样添加一个底部工具栏,但是发现不行bottom: 0无法生效。于是我想到用position: abs原创 2022-04-15 12:09:38 · 13254 阅读 · 0 评论 -
uniapp下页面布局分析——占满父元素高度
因为不是专业前端,是在学习过程中,感觉这个页面布局是个大难点。虽然网上找找代码抄抄也能实现效果,但是下次遇到一个类似的问题,又是不会,又要花大量时间百度。还是得搞明白其中的基础知识,才能自己解决问题,并且把代码写的优雅点。其实还没完全搞懂,写文章记录下,方便以后查询,且写文章也能让自己滤清思路,对理解有很大的帮助。父元素高度首先,讲自己理解上的一个大坑:就是自己在.vue文件上新增一个根节点<view>,想让其占满整个屏幕剩余空间。设置其高度height:100%,但是发现没用:<原创 2022-04-15 10:42:39 · 4105 阅读 · 0 评论 -
pinia ts下的对象类型标注
有些时候我们会遇到,一个新的变量,我们知道它是什么类型,类型已经用interface写好了。但是,此时我们还未打算初始化它,仅仅是想申明一个局部(全局)变量,方便后面调用。在".ts"文件(或者vue的<script setup lang="ts">)中,我们可以像下面这样申明:let a:number;这样便是申明了一个变量,但是还未初始化。但是在pinia中,这样行不通,因为人家就是用冒号赋值,就没法用冒号初始化了: state: () => { re原创 2022-04-12 16:51:28 · 6258 阅读 · 4 评论 -
uniapp下单选框的实现
uniapp官方虽然提供了uni-data-checkbox,含括了单选和多选框功能。但是它功能是在不能满足需求:单选框不支持再次点击取消无法与父组件的数据源进行联动,无法实现如多规格选择的那种联动源码每次点击都是对数据源进行拷贝,然后再进行json解析等操作,看着就很不靠谱,数据量大必然有性能问题。其实我放弃uni-data-checkbox,选择自己实现也是因为商品规格展示是比较复杂的,不自己实现的话无法达到目的:看图中,三组规格选项是要相互联动的,选择了其中一个后,就得判断其余的是否可原创 2022-04-10 17:29:12 · 6404 阅读 · 0 评论 -
在<script setup lang=“ts“>使用ref获取子组件的方法
按照官方文档的介绍,在组件中使用ref可以调用子组件的方法的对象。当我们的子组件是使用<script setup lang="ts">的语法糖去编写的,那么它的方法的对象都不会暴露给父组件,见官方文档解析所以,我们子组件中的方法需要如下编写:<script setup lang="ts"> import SelectSpecs from "./selectSpecs.vue"; import { ref } from "vue"; const popu原创 2022-04-02 16:38:25 · 3126 阅读 · 0 评论 -
uni-app 可滚动视图区域scroll-view的使用
官方文档<template> <!-- 外围视图使用flex布局 --> <view style="display: flex" id="view1"> <!-- 左侧滚动区域 --> <view style="width: 25%"> <scroll-view scroll-y="true" :style="'height:' + scrollH + 'px'">原创 2022-03-31 22:04:11 · 3618 阅读 · 0 评论 -
uni-app弹出层uni-popup使用以及修改默认样式
uni-popup官方文档我这里的背景是弹出一个选择规格的菜单。使用vue3+ts,使用组合式api首先看看在vue3+ts+setup下的使用的使用:<template> <!-- 定义一个按钮,用于打开弹出层 --> <view style="width: 200px"> <button @click="openSpecs">弹出</button> </view> <!--原创 2022-03-31 21:32:06 · 30282 阅读 · 10 评论 -
uni-app两行文字之间的位置摆放方法
这么一个简单的问题,在网上愣是找不到一个拿来即用的方法,这里记录一下: <view style="text-align: left"> <text>第一行</text> <text>\n第二行</text> </view>换行直接用“\n”。很暴力...原创 2022-03-28 18:11:30 · 3010 阅读 · 0 评论 -
Vue3+Vite+TypeScript+element Plus框架搭建过程(4)—响应式代码演示
代码地址,分支reactivity:https://gitee.com/lsjWeiYi/vue3-frame/tree/reactivity/本篇主要是搞明白了vue3 setup和传统的vue3的响应式属性如何编写。官方关于响应式的文档这里注意左上角,官方提供了两种api风格:选项式-选项式就是vue2主流的export default的方式我们这里的代码是这样的:<script lang="ts"> export default { data() {原创 2022-03-23 14:32:40 · 1642 阅读 · 0 评论 -
vsCode下开发vue3+typescript需要的插件及代码格式化
真的是被代码格式化搞烦了,在网上抄答案,但是发现大多数答案互相抄袭,还过时了。所以只能狠下心自己搞明白这些插件到底都什么用处。选取插件的标准:尽可能还在维护举个例子,vue代码格式化推荐最多的两个格式化插件“beautify”和“prettier”,我两个都尝试了,一度觉得“beautify”好用,但是总感觉差点意思,然后对比了一下,发现“beautify”好久不更新了,再看“prettier”还在更新,果断选择“prettier”vue3开发必备插件TypeScript Vue Plugin (V原创 2022-03-21 22:07:09 · 21357 阅读 · 0 评论 -
Vue3+Vite+TypeScript+element Plus框架搭建过程(3)
web到此还缺一个http请求功能,然后就可以实现功能了。当前http请求基本都使用axios,然后我发现官方还为框架提供了封装,vue-axios,但是网上资料很少,估计是大部人都是在网上借鉴别人实现得工具类。我也一样。但是我还是尝试使用框架的工具类,我测试功能是正常的,下面介绍下整个流程。在package.json添加依赖:"axios": "^0.26.0","vue-axios": "^3.4.1",实现http请求的工具类:首先type.ts:// 接收respons原创 2022-03-04 09:48:32 · 2575 阅读 · 0 评论 -
Vue3+Vite+TypeScript+element Plus框架搭建过程(2)
本篇是为框架添加pinia状态管理模块,状态管理可以简单的理解成管理一些需要在组件之间进行交互的全局变量。pinia在其中充当一个管理者,提供一些方法来处理这些全局变量。为什么不适用vuex呢?因为vuex对typeScript的支持不好。配置过程:在package.json中引入依赖:"pinia":"^2.0.11"在main.ts中启用pinia:import { createPinia } from "pinia".....app.use(createPinia()).mount(原创 2022-03-02 22:37:46 · 461 阅读 · 0 评论 -
Vue3+Vite+TypeScript+element Plus框架搭建过程(1)
代码地址, 分支basic:https://gitee.com/lsjWeiYi/vue3-frameelement plus 官方提供了一个模板,基于改模板,二次封装一些基本的模块,方便以后开发。我的修改:并把依赖更新到了最新,启动该方法见readme。在vite.config.ts中添加‘@’的路径指引,否则import的时候不能使用@指向“src”目录PS: 这个框架引入了按需导入插件unplugin-vue-components,默认在“src/components”下的vue组件最自原创 2022-03-02 20:49:29 · 974 阅读 · 0 评论 -
前端学习(十三)http请求功能实现
前端是需要与后端组合使用的,那么他们通信的方式就是https请求,它依赖于axios。接下来我就将全过程记录下来。安装 axioscnpm install --save axios vue-axios原创 2021-08-19 22:47:47 · 484 阅读 · 0 评论 -
前端学习(十二)导航栏登录模块优化——vuex入门使用
接上一篇的最后,优化登录状态的刷新。晚上查了一晚上资料,大概看到有三种当时解决这个状态不能跟随localStorage的变化一起更新的问题。写一个监听事件,监听sstorage的set之类的方法,总之只要存在修改的动作,就触发更新状态,我没尝试,应该是可行,只是我觉得不优雅。始终开着一个监听事件感觉不太合理,这个状态变更是很不频繁的。监听localStorage的变化,这个和上面那个大同小异。本质一样。用vuex做状态管理,其实对于这个问题也是大材小用我自己觉得最符合需求的方案是设置一个全局变原创 2021-08-02 21:13:20 · 310 阅读 · 0 评论 -
前端学习(十一)导航栏登录功能
一般网站的右上角,都是一个用户登录的按钮,用户登录完就显示用户的头像,点击进去就是个人中心。本文就为实现这个功能。在右上角添加这么个模块呢,用到el-dropdown原创 2021-08-01 21:48:29 · 2733 阅读 · 0 评论 -
前端学习(十)导航栏功能优化
上篇实现了基本的导航栏功能,还有几个体验上的问题:首先他没法看出来当前选中了哪个页面,没点明显的提示只有点击文字才能路由,点边边那些位置是不行的过于简单,没有复杂的嵌套本篇就改善这些问题。解决第二个点击文字才能路由的问题查着查着资料,发现第二个问题先解决。原来el-menu自带有router属性,设置该属性后就能自己路由了,不需要再引入router-link,所以代码改成下面这样:<template> <div id="app" style="margin: 0"&g原创 2021-07-29 21:14:26 · 898 阅读 · 0 评论 -
前端学习(九)页面导航栏页面最基本实现
我们常见的网站,页面的最上方都有个导航栏,例如CSDN的最上方的:那我们也做一个这样的,首先element有这个控件“el-menu”,那我们就按照示例做一个样子出来,类似于这样:导航栏一般是一直存在与整个网站,所以他的位置一定是放在最外层,那么就是放在app.vue,那么不管我们切换什么界面,他都一直存在。原来我们App.cue里很简单:<template> <div id="app"> <router-view></router-view原创 2021-07-28 22:23:47 · 2438 阅读 · 0 评论 -
前端学习(八)页面编写——页面绑定数据和事件
接着前面的内容,前面只有一个样子,什么功能都没有,本文就是给他添加一下最基本的功能。一下是实现的代码(<template> <div> <p><span>账号:</span> <el-input v-model="form.username" placeholder="请输入手机号或邮箱" class="myInput"></el-input></p> <p><原创 2021-07-25 18:33:39 · 709 阅读 · 0 评论 -
前端学习(七)页面编写——调试插件browser-sync
上一篇学习了入门的知识,但是发现调试UI组件的位置很麻烦,所以就查资料,看看有没有高效一点的方法。选用Chrome浏览器目前程序员开发最合适的浏览器可能还是谷歌浏览器,所以先把webstorm的more启动浏览器调整为谷歌浏览器,在setting-tools-web Browsers安装...原创 2021-07-25 16:05:26 · 343 阅读 · 0 评论 -
前端学习(六)页面编写——入门
前面几篇都是讲的配置类的东西,前端的界面还没涉及,写前端的页面也是个很需要耐心的活,本文讲入门写一些最简单的东西。这里以写一个最简单的登录界面为例子,采用的样式组件是elementUI。安装及引入element安装:npm i element-ui -g引入样式到项目中分两种引入方式:完整引入和按需引入,这里为了简单,就先完整引入。在main.js文件中:import Vue from 'vue'import App from './App.vue'import router from原创 2021-07-24 23:05:04 · 2124 阅读 · 4 评论 -
前端学习(五)路由嵌套
接着上篇,如果要在子页面上加一个链接,链接到另一个页面。那么是怎么做呢?新建页面仿照“FirstPage”新建一个“SecondPage”:<template> <h1>第二个页面</h1></template><script>export default { name: "SecondPage"}</script><style scoped>h1{ color: blue;}<原创 2021-07-20 23:13:08 · 400 阅读 · 1 评论 -
前端学习(四)多页面路由
前面一篇学习了路由功能的配置,本文就进一步学习路由的使用。新增一个页面在components目录下新建vue文件“FirstPage.vue”,其内容如下:<template> <div> <h1>添加的第一个页面</h1> </div></template><script>export default { name: 'FirstPage'}</script><s原创 2021-07-20 19:23:33 · 1021 阅读 · 5 评论 -
前端学习(三)vue框架配置路由
上一篇我们把vue项目给搭建,并且运行起来了,接下来我们要给框架添加自己的东西。配置环境安装vue—router这是vue路由的组件,对前端稍微有点了解的都知道前端框架都是有路由的,可以理解它是连接众多页面的桥梁。cnpm install -g vue-router项目中添加路由可以看到我webstorm生成的这个项目结构里,没有router这个目录,那么我们就要给他新建一个在“src”目录下新建目录“router”新“router”目录下新建JavaScript文件“index.js”原创 2021-07-20 17:32:47 · 1310 阅读 · 4 评论