解决由于淘宝更换了域名导致pnpm安装依赖总是卡主的bug
前言 自从淘宝换了源的域名后,pnpm的安装效果真的是越来越垃圾了,因为它会自己去用淘宝源下载,但是也不知道为啥,一些依赖包总是会卡住不动了,烦死了,切vpn也没用。 直到我选择关闭ssl严格限制,包一下子就安装成功了,真他妈的坑。 教程 pnpm config set strict-ssl false 大家有需要自己试试。
前言 最近遇到这么一个头疼的需求,第三方提供了两份sdk,一个是针对安卓端使用的,一个是针对ios端使用的,但是他们都会在全局window上挂载同名属性对象,这就让我很难受了。 <script src="/sdk/sdk.min.js"></script> <script src="/sdk/ios_sdk.min.js"></script> 前端如果想要使用这个sdk就必须在head引入它,但是它又有两个脚本,后来的脚本又会覆盖上一个脚本在全局挂载的对象。 理论上一个优秀的sdk不应该出现这种问题,它应该自己内部去判定平台才对,但是现在现...
vite中环境变量获取方式 vite在处理环境变量时和之前webpack并不一样,它只会将环境变量文件中VITE_为前缀的变量加载到import.meta.env对象上去,而且并不支持动态key的形式: import.meta.env[key] //无效的 因为import.meta.env.xxx打包时会被替换成字符串,比如有这么一个环境变量:VITE_NAME="aaa"; const name = import.meta.env.VITE_NAME; //打包后 const name = "aaa"; 所以如果你是一个动态的key,那就没法进行正确的替换,这点需要注意。 并且在...
前言 移动端开发的时候,总是会遇到编写全局浮动组件的情况,比如客服图标啦,消息通知啦,但是浮动就会产生一个问题:阻挡了下层内容展示,常见的做法就是让这个浮动的内容支持拖拽功能,用户将浮动组件拖拽到其他位置即可。 这里我参考了vConsole组件,自己根据实际情况编写了一个拖拽指令。 代码 指令文件:drag.ts import type { Directive } from "vue"; /** 指令接收的参数 */ interface BindingValue { /** 出现位置的偏移量 [x,y] */ offset?: [number, number]; ...
前言 使用了ts最头疼的是什么,除了类型声明应该没有第二家了,那么在vue3中如何正确的声明ts类型,代表着我们踏出了认识vue3的第一步,这非常重要,所以为此水个文章,分享给有需要的人。 Volar 插件 一开始我对于Volar并没有太大的需要,因为一直使用的Vetur,而且这个插件刚出来时并不完善,各种视频up讲的那个一键分屏功能其实也并不好用,虽然是个很有意思的东西,但是没有那种非要使用它的点,所以当时的我怀着这么一个疑问?为什么要用Volar ? 现在我就通过两张图告诉你,它有多香! 我们在template里面写代码,绑定变量最烦的是什么,就是我们写了个对象,但是忘了它的属性...
前言 为了兼容之前的旧浏览器版本,特别是安卓4.4这种低版本,transform是一定得增加浏览器前缀的,但是我在项目中遇到了设置无效的问题,极度蛋疼,下面是我的解决教程,当然没这个问题,看这篇文章,相信你对如果给项目增加浏览器前缀,会有很充分的认识。 教程 给css增加浏览器前缀,业界的做法就是使用postcss,目前webpack与vue cli他们需要安装的依赖略有不同: webpack: pnpm i postcss postcss-loader autoprefixer -D 添加对应的rules { test: /.s?css$/, use: [ ...
npm有nrm,我yarn怎么能没有呢 全局安装 npm install -g yrm --registry=https://registry.npm.taobao.org 安装完毕,查看ls列表 yrm ls 如果提示你什么禁止运行脚本,且是win10 powerShell的话 可以这样做: get-executionpolicy //他会返回Restricted set-executionpolicy remotesigned //旧win10可以用,新版不行 Set-ExecutionPolicy -Scope CurrentUser //最新win10使用该命令,...
npm换源应该是国内的基本操作了,但是每次用的时候,可能是百度啊,各种搜,总之搜到的结果,可能都很一般,不是你复制我,就是我复制你,东西缺胳膊少腿是常有的事。 为此,npm有一个插件,可以快速的进行源的切换,而且方便,还能测速。 首先我们需要安装,务必全局 nrm npm install -g nrm 安装完毕后我们可以查看源列表 nrm ls 如果提示你什么禁止运行脚本,且是win10 powerShell的话 可以这样做: get-executionpolicy //他会返回Restricted set-executionpolicy remotesigned //旧win...
经常可以看到各种组件的文档,都是可交互,点开code按钮,还能查看对应的源码。 那么我们如果要写一个这种的话,最省事的,应该就是在源代码的基础上,我们增加一个按钮,然后点开可以查看源码,反正就是尽量和书写vue项目一样。 为了达到这个需要,我们有两个需求: 怎么把vue文件作为代码文本显示 代码文本怎么高亮 解决这两点我们也能简单的搭建一个类似的可以交互的组件文档了。 当然还有更高端的办法,就是自己写一个loader解析器,这个成本就很高了,一般人也不会这个,所以就不考虑了。 怎么把vue文件作为代码文本显示 webpack有一个插件: raw-loader 他可以把text文本或者...
默认情况下,我们这种引用方式,是全引用的 import echarts from "echarts"; 但是我们并没有用到echarts中所有的图表,所以,我们尽量的按需引入。 let echarts = require('echarts/lib/echarts') require('echarts/lib/chart/bar') //柱状图 require('echarts/lib/chart/pie') //饼图 //下面的是需要的提示框 require('echarts/lib/component/tooltip') require('e...
moment作为一个时间插件,使用的地方是非常广泛的,但是我们使用moment的时候,需要注意下他的语言包。 默认情况下,他的语言包是全加载的,也就是有多少个预设的语言包,就加载多少个。 为此,我们需要对他进行优化 优化前 优化 打开vue.config.js文件 const webpack = require('webpack'); module.exports = { //... configureWebpack: { plugins: [ // Ignore all locale files of moment.js new webpack...
关于图标的方案,现阶段也就三种: 雪碧图 字符图标 svg 雪碧图 雪碧图就是将多个图标图片合并到一张图里面,前端通过控制图片的大小位置来进行显示。但是也有缺陷,就是图片的清晰度了,如果放大了,就会显的很模糊。 字符图标 字符图标是目前最成熟的一种方案,使用简单,并且是和字体一样的,放大依旧很清晰。但是他的缺点就是不支持多色图标,也就是一个字符图标,他无法同时显示多种颜色。 svg svg是最近开始兴起的,它是一种组件化封装的方式,将svg代码化,以达到控制的目的,而且相对于字符字体,svg本身有很多优势,比如动画,多色等等 因为组件化了,所以我们可以按需引入,虽然字符图标也可以,但...
当我们请求一个api的时候,他返回的数据可能会有很多,这些数据可能需要分别拆分存放在data预设的变量中。 这就导致我们可能要写好几个赋值操作 this.xxx = xxx; this.xx = xxx; this.xx = xxx; 我们可能会重复很多次上面这种操作,是不是有点麻烦。 为此,我们可以利用Object.assign来达到我们的偷懒效果 Object.assign(this,{xx:xxx},{xxx:xxx}); 使用这种方式,我们的vue可以检测到动态改变的值,也就是说watch监听是可以触发的。 且效果和你写多个this.xxx=xxx是一样的。 感觉这个方法妙啊,所...
目前国内的图表库,除了百度的echarts就是蚂蚁的antv了,蚂蚁的图表样式更好看,相对来说,他的学习成本也很高,echarts已经是一个老牌图表了,有着比较完善的用法和社区。 这里就了解下vue里面使用echarts需要注意的一些问题。 使用ECharts ECharts有提供一个vue版本的插件,也是由百度官方vue团队维护,有兴趣可以看看。 vue-echarts 我们这里就先不用这个插件了,用npm的方式安装 npm install echarts 安装完毕后我们就可以import引入 <script> import echarts from "echarts"...
路由的鉴权只能处理大的方面,而更精细度的权限控制,就做不到了,如果我页面有一些按钮是需要有权限才能显示,那么,单路由鉴权根本无法做到。 所以我们还需要更加精细化的权限控制。 这里有两种权限的控制方式: 权限组件 权限指令 权限组件 权限组件可以理解为一个插槽组件,这个组件自身做一个权限判断,如果有权限我们就允许这个插槽内容展示。 但是这么一个小小的功能其实也没必要做做一个传统组件,使用函数式组件他的性能会更高,因为用的地方很多,组件本身也没太多东西。 既然是鉴权,我们自然需要一个用于判断是否有权限的函数,我们依旧可以使用上一章的check函数 auth.js //后端返回权限 fun...
以前弄个一个路由鉴权,其原理就是判断用户是否已经登录,未登录就跳转至登录页。 通过给meta设置一个元数据,然后判断这个页面是否有权限,如果访客没有权限,就跳转至登录页。 这个用于一般情况完全是足够了,但是当你的网站权限分级的情况,就不太够用了,因为已经不能用单纯的是否已登录来判断,访客时候有权限浏览该页面。 多级权限 假设我们网站有四个等级:master(站长)、admin(管理员)、user(注册用户)、guest(游客) 那么最先,我们给路由设置权限,设置哪些等级可以访问 export default [ { path: "", component: () => ...
如果要实现这个功能,我们就需要去写一个layout布局的文件,然后通过一个动态的设置去响应这个变化。 这个问题其实可以分两个方面去解析: 布局文件怎么去做 怎么去响应设置 布局文件 对于写一个布局文件,其实也不是很难,但是就是不要钻牛角尖,就好比,你可能会去想,一个侧边栏导航要怎么变成顶栏的横向导航? 其实这种想法太过于钻牛角尖,为什么我们不能做两个导航呢? 侧边栏sidebar我们使用一个导航,header里面我们也放一个导航,然后v-if判断不就好了。 没必要想那么复杂,很多东西就是组件化,响应式数据进行显示。 而且很多框架都预设了一些布局,我们可以利用那些布局,然后针对性的操作...
vuex作为一个共享的数据对象,用于不同组件的共用一个数据,并且动态响应数据变化,配合computed属性,可以对数据进行缓存。 在vuex里面,在异步处理actions上,最终也还是要用到commit同步操作方法操作数据,并不是actions方法本身处理了数据,原因是因为需要有操作记录,方便在插件上查看。 废话不多说,直接上底层原理。 原理 vuex其实就是一个重新封装的new Vue 对象,他的动态响应数据就是data属性,而commit这些方法,都只是回调而已。 import Vue from "vue"; const Store = function(options = {})...
template template是html的扩展语法,数据绑定使用Mustache语法(双大括号) <span>{{message}}</span> 所以template容易上手,入门极简,大量内置指令,拥有组件作用域css,但是因为简单,所以灵活性不高。 jsx jsx是JavaScript的语法扩展,数据绑定使用单引号。 <span>{message}</span> jsx相对于template,jsx更灵活,但是也不一定要完全抛弃template。 jsx为什么灵活,原因就是他不是html模板,所以jsx中的标签,他可以是变量,我们...
ref ref是vue预设的一个属性,通过$refs我们可以获取dom或者组件实例。 <p ref="p">获取到dom</p> <child-component ref="child">获取到一个组件实例</child-component> 通过this.$refs.p我们获取到的是html元素p的dom 通过this.$refs.child获取的是组件child-component的实例。 但是this只能获取到当前组件上下文的实例或者dom,但是如果我们跨层级获取,那就有点麻烦了。ref只能获取当前组件上下文组件,无法跨层级。 递归...
父组件与子组件的传参,使用的是props,如果是父组件与孙子组件传参,大部分可能会采用递归的方式,也就是子组件props接收,然后再props传给孙子组件。或者使用vuex。 但如果是迭代的方式,组件的层级越深,不断迭代的props会是代码越来越无法维护,冗余。 于是官方出了provide inject。 provide有父组件设置,inject由子组件接收,他们的特性: 祖先组件不需要知道哪些后代组件使用它提供的属性 后代组件不需要知道被注入的属性来自哪里 例子: 父组件 <script> export default { provide: { foo: 'b...
最近评论