自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(17)
  • 收藏
  • 关注

原创 记录 Vite 配置 Vant 按需加载 问题

Vue 3.0 Vite 使用 Vant 按需加载问题

2022-06-09 16:57:36 1421

原创 关于 vue3 + antd design + vite配置按需加载问题记录

使用 babel-plugin-import 进行按需加载,安装所需插件yarn add vite-plugin-imp babel-plugin-import -Sornpm install vite-plugin-imp babel-plugin-import -S配置 vite.config.js 文件import vitePluginImp from 'vite-plugin-imp';export default defineConfig({ plugins: [ .

2022-03-15 17:34:04 1981

原创 关于 vue 富文本编辑器 Tinymce 踩坑日记

作为踩坑过 vue-quill-editor 富文本编辑器,以及 wangEditor 编辑器来说,个人感觉还是 Tinymce 功能更加强大跟齐全一些。说一下体验感,wangEditor 编辑器太年轻了,功能上缺乏很多东西,比如说上传图片无法方便的添加图片的 alt 信息,git issue上也有人提意见,功能目前还在计划中。而 vue-quill-editor 这款编辑器是根据 quill 编辑器为基础做的二次加工,功能上来说,感觉没有 Tinymce 增加功能方便简洁,而且为了一些特定化需求,.

2021-07-09 12:23:24 1597

转载 TinyMce 中文资源包

tinymce.addI18n('zh_CN',{"Redo": "\u91cd\u505a","Undo": "\u64a4\u9500","Cut": "\u526a\u5207","Copy": "\u590d\u5236","Paste": "\u7c98\u8d34","Select all": "\u5168\u9009","New document": "\u65b0\u6587\u4ef6","Ok": "\u786e\u5b9a","Cancel": "\u53d6\u6

2021-07-09 12:21:22 6487

原创 nuxt.js 使用 ngrok 可以让外网访问本地开发环境的地址

文档中是这样介绍的:ngrok将创建一个http-https-tcp隧道。请查看ngrok npm软件包以获取更多详细信息。当Nuxt服务器正在侦听时,我们需要能够连接到ngrok端口。获得公共URL后,我们希望将其打印到Nuxt CLI,以便我们可以轻松地单击它以打开并共享它。然后觉得动手尝试了一下,操作步骤非常简单,实现起来也很快。就是有外网访问存在限制,一分钟限制访问多少次我也忘了,反正次数不会很多,但是适合手机与电脑不在同一局域网下环境用来查看效果。直接开干吧,首先在项目里的开发环境下 下一个依

2020-12-03 18:18:50 495

原创 关于element-ui分页器 设置current-page为初始化值为 1 时的问题

分页的代码逻辑是当 total > pageSize 才会有后面的第 2,3,4,5…等等页面出现。我的需求是页码分页会携带在 url 中,每次页面跳转就相当于刷新页面,所以,会有一个初始化 pageNum 代码操作,但是,由于数据未请求回来之前,数据里因为是路由的改变,相当于页面的刷新,total被初始化为了0,所以就会遇到一个无论怎么跳转,当前页码数一直处于1的状态 。所以我想到了一个简单粗暴的方案,就是初始时拿到 Url 中的 pageNum,数据请求回来之后,再次将 pageNum 赋值给 c

2020-11-04 11:36:32 2624

原创 关于vue 单选框选中与取消解决方案

在网上找了很久也没有找到自己想要的解决方案,于是乎自己便想了一个简单粗暴的解决方案。首先考虑radio是单选框,且vue的v-model赋值速度非常的快,取消选择又不会触发 radio 的 change 事件,使用click事件去单纯的修改值会导致选中值瞬间勾选与取消了勾选。达不到想要的效果,可以考虑这种情形,因为radio的双向绑定,值是瞬间变化的,所以可以用一个 oldValue去保留上一次点击选中的值,这样去勾选时就不会影响到 oldValue ,保留拿到了oldValue值后,用 oldValue

2020-11-03 18:15:25 7436

原创 nuxt.js 多重动态路由嵌套,路由变化,页面不变化问题

本人的业务逻辑场景为`` `/list/category-b/category-sub-b/page-4` `/list/category-a/category-sub-a/page-2` /list/category-a/category-sub-a/page-1 => `/list/category-a/category-sub-b/page-1` `/list/category-b/categ

2020-11-03 15:28:16 2920

原创 Nuxt.js项目是antd 按需加载笔记

/* ** Build configuration ** See https://nuxtjs.org/api/configuration-build/ */ build: { // 配置 按需加载功能 需 babel-plugin-import 支持 transpile: ["ant-design-vue"], babel: { plugins: [ [ "import", {

2020-08-28 14:22:11 1305 2

原创 react antd 自动按需加载配置过程笔记

首先运行 npm run eject 将 package.json中的 babel配置释放出来。若遇上报错,则说明在运行前修改删除过项目文件,此时,则需去将隐藏的 .git 文件删除,重新 npm run eject。释放出来后如下:配置结束后,直接引用组件就可以实现了。如下...

2020-08-06 11:11:30 336

原创 nuxt.js添加工具块 / js代码。Statcounter 分析器案例

在业务需求中,有一个需求是要添加SEO的网站点击分析器。选中了Statcounter分析器,但是由于官方给的代码形式案例如下<script type="text/javascript"> var sc_project = 12363289; var sc_invisible = 1; var sc_security = "93f97f25"; var sc_https = 1;</script><script type="text/javascript"

2020-08-04 10:06:48 518

原创 整理了一些CSS自定义加载动画效果,可与遮罩层一起使用

在这里整理了一些PC端的loading动画效果,个人感觉还可以,所以就整理了一下。转载于原文,因为我用的是 Nuxt.js ,所以整理的也是vue组件。先上效果图,我只整理了原链接的第 1 ,4,5,6,7,8种动画效果。解释一下为什么未收录第2,3种动画,是因为这种动画效果的实现是需要背景色 background-color 存在且不能为透明色的背景色,为透明色的无法遮盖住动画轨迹,而这里遮罩层是需要透明色,所以未采用这两种效果,如果有背景色存在且不透明的童鞋可以考虑添加进来,组件源码就在下面&.

2020-05-29 18:10:15 851

原创 Linux 系统 关于docker + jenkins发布 Nuxt.js 前端项目简单构建笔记

不亲手弄一把,不知道会流多少的辛酸泪。话不多说,先简单说一下项目搭建要求,本人安装的是CentOs docker ,我是参照别人的文档进行安装的,但是自己摸索毕竟会走一些弯路。前端项目的配置很简单。所以参考这个文档,把 docker 和 Jenkins 安装好就可以了,剩下的就可以不用参考了,安装好Jenkins之后,需要下载一些必要的插件 比如: Localization: Chinese (Simplified) 、Nodejs、Publish Over SSH、Gitee(这个插件根据自己的代码.

2020-05-28 19:12:03 367

原创 关于 element ui 更换主题色手记

官方提供了几种更换主题的方案选择,在线主题编辑器,选择好了主题进行下载,会得到一个 主题的 zip 包,解压,找到项目的node_modules中的 thyme-chalk 文件中的 fonts 文件进行替换,这样可以成功更换你想要的主题了,但是会产生一个问题,那便是其他人在 clone 项目时,他们的 ui 主题依然还是原来那一个 默认主题色。每次 npm i 重新安装依赖包时也会产生这个问题,那么,这时候,就可以选择使用官方提供的 在项目中改变 SCSS 变量 方法,在assets 文件中新建一个 x.

2020-05-15 14:18:59 239

原创 router-link / nuxt-link 事件点击无效解决方法

有时候,需要在 router-link 上不止是跳转路由,还想要在跳转的同时进行一些操作,之前的方法是将 nuxt-link 换成普通的 div 进行 this.$router.push('/') 的方法跳转,觉得这样也可以,不影响其他问题,但是有一个问题存在,就是不能对选中的链接进行鼠标右键在新窗口打开页面,小小的问题,影响不大,如果用 v-on:click.native 方法就可以解决此类问题,既可以跳转,也可以在跳转的同时触发事件,做一些其他的事情。比如跳转时将触发的条件传给后台,分析用户行为。.

2020-05-15 11:05:56 3840

原创 el-autocomplete 配合 @keyup.enter.native 使用时,无法关闭搜索建议弹框问题解决方案

el-autocomplete 配合 @keyup.enter.native 使用时,无法关闭搜索建议弹框问题解决方案使用场景,本人使用element ui 时由于业务需求,需要用到一个搜索业务,看着 el-autocomplete 这个组件感觉蛮适合的,于是便踩入这个坑中。因为需要同时存在搜索建议列表和点击enter跳转搜索结果页需求,使用enter点击跳转后,无法在跳转完成时隐藏掉之前的搜索建议,通过鼠标点击其他元素却可以关闭,开始以为是因为 input 的 focus 问题,便写了一个隐藏的inp

2020-05-13 18:32:32 3803 3

原创 Nuxt.js 中使用Swiper Animate

Vue Nuxt.js 中使用Swiper Animate废话不多说,咱就单刀直入。废话不多说,咱就单刀直入。首先安装在 vue 中使用的 Swiper npm i vue-awesome-swiper --save。安装完成后,在 plugins 文件夹下新建一个 swiper.js 文件。js文件内容如下import Vue from 'vue'import VueAwesomeS...

2020-01-13 16:38:25 1491 3

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除