- 博客(25)
- 收藏
- 关注
RSS订阅原创 PowerShell运行yarn提示在此系统上禁止运行脚本
安装好yarn ，在项目中运行yarn 命令，提示禁止运行脚本。以管理员身份运行Windows PowerSheell，输入set-executionpolicy remotesigned回车，选择一项，修改权限。
2022-03-13 12:30:31
356
1
原创 小程序事件传参
想要从wxml中传一个参数过去到js文件，要怎么传参？假设有一个tabs标签页的需求，当点击某一个标签页时，绑定事件bindtap，将当时点击的标签页索引值传过去，发现直接bindtap="change(index)"行不通，无法获取到值。经查阅，小程序是通过在元素上绑定data-的方法传参数的。例:<block wx:for="{{tabs}}" wx:key="key"> <view class="{{ index === activeIndex ? 'community
2021-09-23 15:13:54
412
原创 小程序组件间传参
1.父组件定义一个自定义事件事件类型任意取父组件wxml<header-tabs activeIndex="{{ activeIndex }}" bindchange="onChange" />2.父组件接收子组件传值父组件js或ts文件onChange(e:any){ console.log(e.detail) // e.detail为传过来的值}3.子组件把值传给父组件const index: number = event.target.dataset.index
2021-09-18 18:12:54
914
原创 小程序引入iconfont字体图标
1.挑选图标，加入项目2.进入项目，下载到本地3.解压文件后，复制iconfont.css放到小程序项目里，并重命名，修改为iconfont.wxss。并在app.wxss内引入该样式。@import "iconfont.wxss"; /* 修改成你放置样式文件的路径 */4.复制在线链接代码，替换iconfont.wxss里的@font-face样式。5.打开wxml文件，写一行代码，格式如下。<text class="iconfont icon-jiaguanzhu"&
2021-09-18 10:13:45
1581
原创 vue+typescript @引用路径报错
最近使用vite + vue 3.0 + typescript搭了一个项目，发现引入组件时，使用@引入绝对路径报错。想了下，可能是因为从vue cli换成了vite，也可能是javascript换成了typescript。那在目前的架构下，怎么使用@作为路径的开头呢？经查询vite文档，发现可以使用resolve.alias设置别称。vite.config.tsimport path from "path";export default defineConfig({ resolve:
2021-07-27 11:56:09
1095
原创 vue利用keep-alive缓存页面
我有一个列表页，是滚动加载的。每次从详情页返回，刷新数据的话，又从头开始，非常不便。我研究了2天keep-alive，听说可以缓存数据，保存页面不变。我觉得这正是我需要的。我按照文档，又按照网上的方法，试了一遍又一遍，终不得解。怎么回事，为什么页面一直不缓存？为什么还是一次又一次刷新加载？直到我看到这两段话，感觉崩溃！！！也就是说，keep-alive跟缓存，根本没有半毛钱关系！缓存数据，唯一的逻辑是，离开需要缓存的页面时，把数据保存起来。再进入这个页面时，你自己决定要不要刷新，如果不要，就
2021-07-14 16:18:20
218
原创 Vue 3在组件上使用 v-model
昨天看Vue的官方文档，怎么都找不到之前在组件上使用v-model，然后组件同步取到值的方法。后来找回Vue 2的文档，再结合Vue 3的文档，终于发现，Vue 3移除了$listeners。以前Vue 2是通过$listeners，传递两个pros值，label和value,子组件通过v-on绑定一个方法（通过计算属性），结合$listeners，再返回去。同时监听组件事件，把组件的值 ，通过$emits返回给父组件。父组件<custom-input v-model="searchText
2021-07-08 13:45:50
746
原创 nuxt.js添加环境变量，区分项目打包环境
最近由于业务需求，开发了一个nuxt.js项目。配置打包环境变量时，发现nuxt.js的文档过于简单，无法做参照。经查证了一些资料后，解决了该问题。遂整理成文档，发布于此，给同行一些参照。一、添加cross-env插件npmnpm i cross-envyarnyarn add cross-env二、添加环境变量文件根目录添加env.productionNODE_ENV =...
2020-04-09 14:22:58
3254
7
原创 vue项目实现多语言功能
最近项目需要做一个国际版，多种语言切换功能。有同事提出可以分别分开做几个项目，然后分别打包。但是我认为这种方式弊大于利。首先，弊端是难以同步管理。项目的功能80%以上都是相同的，分开几个项目，意味着有新的需求时，在每个项目里进行一次再开发，同时有bug时，也是几个地方进行修改。第二，优点不明显。页面中静态文字是固定的，并不是会常更改。通常情况下 ，只要配置一次。如果有修改，也只需要在配置文...
2020-03-03 10:31:24
1650
2
原创 判断IE浏览器，为IE9或以下做提示
好不容易兼容了IE浏览器之后，发现IE9下乱成一团，IE8下一片空白。因为IE9对ES5和CSS3部分支持，所以有些功能可以正常使用，有些功能缺失或展示错位。为了不让用户在IE9及以下版本打开网站时一脸懵逼，我们决定给用户一个提示。上代码：if (!!window.ActiveXObject || 'ActiveXObject' in window) { // 判断IE var us...
2020-01-14 10:56:29
606
原创 react项目如何兼容IE
最近开发了一个react项目，领导在IE下打包，一片空白，打开许久都是如此。便尝试在项目中加入兼容IE的配置。安装core.jsyarn add core-js安装完成后，在index.js页面上方引入import 'core-js'重新打包项目上传，就可以在IE浏览器上看到效果了。注：兼容IE的包，在开发环境无效。...
2020-01-09 18:15:15
2542
原创 为create-react-app项目搭建环境变量，适应不同环境需求
一.对create-react-app 的默认配置进行自定义1.选择安装 react-app-rewired$ yarn add react-app-rewired customize-cra2.修改package.json文件/* package.json */"scripts": {- "start": "react-scripts start",+ "start": ...
2019-12-24 10:24:59
2682
原创 使用CSS写三角形
html元素在宽高为0的情况下，border四面边呈三角形。我们只需要在取其一面边框，即可写出三角形。 display: inline-block; width:0px; height:0px; border-width: 20px; border-style: solid; border-color: transparent transparent transp...
2019-11-25 17:17:29
163
原创 vue项目利用vuedraggable实现拖拽排序
1.安装拖拽排序工具vuedraggableyarn 或 npm 安装yarn add vuedraggable npm i -S vuedraggable2.引入vuedraggable组件script部分import draggable from 'vuedraggable'...export default { components: { ...
2019-09-30 11:42:59
647
原创 Web Worker的使用，开启子线程
众所周知，Javascript是单线程。Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。我们可以将一些与用户界面的dom操作无关的操作，放入Web Worker中运行，避免阻塞。注：在worker线程中你可以运行任何你喜欢的代码，不过有一些例外情况。比如：在worker内，不能直接操作DOM节点，也不能使用window对象的默认方...
2019-09-24 11:52:58
1001
3
原创 Javascript二维码生成器，使用手机扫一扫二维码打开
我们通常在pc端有一些需求，扫码打开网址，在手机上继续操作。本文旨在介绍一款javascript二维码生成器插件，可以传入一些字符串，或者链接等，生成二维码。第一步，安装qrcode插件npm install --save qrcode第二步，页面引入qrcodeimport QRCode from 'qrcode'第三步，调用QRCode的方法QRCode.toDataU...
2019-09-06 22:55:50
391
原创 前端优化（三）：使用dll打包抽取第三方js（DllPlugin DllReferencePlugin插件）
三、抽取第三方js，使用dll打包第一章内容：前端优化（一）：开启nginx gzip压缩第二章内容：前端优化（二）：使用路由懒加载本文继续前两章内容，继续讲解第三个前端优化方案：抽取第三方js。随着项目增长，引入的第三方js也越来越大。webpack将第三方js默认打成一个包，导致该js文件越来越庞大，严重影响首屏加载 。1.创建抽取的文件对象在项目根目录创建一个dll.co...
2019-08-29 11:14:31
5372
9
原创 前端优化（二）：使用路由懒加载
二、开启路由懒加载上一章内容： 前端优化（一）：开启nginx gzip压缩本文继上一章，接着前一章，继续讲解如何做前端优化，以vue项目为例。路由懒加载依赖于webpack的分片，默认情况下，一个项目被webpack打包成一个 index.html, app.js, chunk-vendors.js, app.css，chunk-vendors.css和若干图片。单页应用下，只有一...
2019-08-29 09:41:54
733
原创 使用webpack proxy配置开发环境代理，解决跨域问题。（Vue cli 3也适用）
解决方案我写了一个例子，觉得有用的话，点个star。地址：https://github.com/janyxh/vue-study/blob/master/vue.config.js-------------------------- 分割线 -----------------------最近调试接口，使用本地ip对接接口调试，在同事的机子上调试。在Swagger和Postman上调试都没有...
2019-07-23 18:22:28
2355
原创 前端优化（一）：开启nginx gzip压缩
最近接手一个项目，特别乱，网站加速速度特别慢，成了大问题。来和我一起开启前端优化之路吧！我着重从几个方面入手整理：整理项目，清除冗余文件。卸载未用到的npm包。去除未用到的文件。抽取公用组件和方法，去掉重复的代码。抽取第三方js使用tinypng压缩图片使用路由懒加载开启nginx gizp压缩由于清除项目冗余包、文件和代码各项目不同，本文不做重点讲解。本文分成几...
2019-07-19 11:52:58
1293
原创 使用vw单位做移动端适配
最近做一个移动端的项目，需要做到移动端适配。曾经做过以下几种适配方案，但都不理想：1.直接设置根元素字号，再用rem作单位。2.使用淘宝flexible.js。3.判断设备大小，再设置根元素字号大小，用rem作单位。以上三种方案原理，是利用rem以根元素(html)字体大小进行计算。随着浏览器对vw单位的支持，使用vm作单位更适合。本文旨在讲述如何使用vm做适配。1.直接利用vm作单...
2019-06-21 18:55:40
1633
1
原创 css圆形渐变背景，兼容IE filter下border-radius失效的问题
最近有一个需求，一个圆形的渐变颜色背景。开始动手吧！标准浏览器：使用linear-gradient，CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。linear-gradient()语法：linear-gradient( angle | side-or-corner , ? color-stop);第一个参数：用角度值指定渐变的方向（或...
2019-06-12 18:37:15
800
原创 Vue.$set的用法
官方资料：Vue.set( target, propertyName/index, value )参数：{Object | Array} target{string | number} propertyName/index{any} value返回值：设置的值。用法：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，...
2019-05-31 17:20:01
6882
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人