- 博客(131)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 vue3 ,vite,ant design vue 极限优化打包大小,动态导入css
vue3 ,vite,ant design vue 极限优化打包大小,动态导入css
2022-07-07 11:55:05
4701
12
原创 vue3 vite ant deign vue 黑暗模式实现
1,实现黑暗模式主要是对css变量的抽取和全局css的替换2,编写一个全局的css变量css文件3,创建dark.less和light.less文件对应黑暗和白天dark.less light.less 4,在less和css中用变量替换掉原本的数值5,编写切换css函数6,编写一个切换黑暗白天模式的函数7,使用的时候只要效果...
2022-07-05 16:53:07
4157
5
原创 ant design vue 实现组件类型推断 vue3,vite,ts
1,全局引入的antd vue组件是没有代码提示的因为全局引入的时候组件的类型已经丢失了,这时候写代码就没有这个组件的代码提示,还得去看文档 2,如何实现全局组件类型推断 (1),在使用的时候引入,这个不用多说,使用的时候写import就行 (2),在全局写一个类型定义文件,这个需要使用vite的插件帮我们实现3,实现推断(1),使用vite的unplugin-vue-components插件帮我们实现Vue 的按需组件自动导入https://github.com/antfu/unplugin-vu
2022-07-05 14:24:48
2942
原创 vue3 tsx语法
1,v-modeltsx语法也可以使用v-model语法来绑定变量 2,事件 @click,@changetsx语法统一把@符号变成on+事件名称的格式3,属性,slot,emit位置vue3组件获取props,slots,emits统一在setup方法中拿到4, 插槽tsx语法的组件插槽和传统的vue语法存在很大不同传统插槽: 在tsx语法中,插槽要这么写 5,注意事项 tsx组件只有一个根节点tsx变量直接使用大括号,不需要使用v-bindtsx在大括号中写代码语句,在圆括号中写jsx语法6,例子: 一
2022-06-28 13:13:31
3730
原创 vue3 添加属性提示
有的vue组件属性有很多选项,如果没有属性提示会很容易写错,这时候就可以按照如下方法添加属性提示1,在编写prop的时候,添加as as Prop 下面是我的属性定义:2, 使用属性就会出现代码提示
2022-06-28 11:54:08
1551
原创 vite 动态导入页面 动态import组件
1，在做权限的时候，从后台拉路由表，然后动态引入组件，之前webpack是可以直接用的，但是vite不行，需要用特殊的方法//引入所有views下.vue文件const modules = import.meta.glob("../views/**/**.vue");/** * 解析路由表 * @param routerMap 后台请求的路由表 * @returns 系统路由 */export const routerFilterFunc = (routerMap: RouterIte
2021-09-09 19:10:04
7327
2
原创 ViewModelSavedState viewModel进入后台保存数据
介绍安卓进入后台以后,会重新加载界面和数据,如果想保存用户数据必须保存一下官方文档savedstate 版本说明使用在build.gradle添加依赖dependencies {... def lifecycle_version = "2.2.0" implementation "androidx.lifecycle:lifecycle-viewmodel-savedstate:$lifecycle_version"}在ViewModel中使用publi
2020-12-10 15:40:56
566
原创 安卓数据绑定 DataBinding 结合ViewModel
介绍通过数据绑定安卓可以实现类似于Vue的Mvvm(Model-View-ViewModel)功能，可以极大减少代码和逻辑负担。官网描述使用配置在build.gradle中写入以下代码来启用数据绑定android { ... dataBinding { enabled = true }}xml配置打开 activity_main.xml 鼠标移入左上角 转换为data binding layout视图转换后是这样的:
2020-12-09 17:22:40
2977
原创 安卓视图绑定
视图绑定在模块中启用视图绑定之后，系统会为该模块中的每个 XML 布局文件生成一个绑定类，可以替换findViewById方法官网文档启用在build.gradle中写入一下代码android { ... viewBinding { enabled = true }}注意:如果一个视图不需要绑定视图,可以在xml中写入一下代码<LinearLayout ... tools:viewB
2020-12-08 16:20:28
292
原创 安卓 ViewModel 和LiveData一起使用
ViewModelViewModel 可以在activity被重新加载以后还能保存数据，配合liveData可以极大减轻手动控制数据显示的工作，我们只需要关注数据的变化即可，不需要维护视图。官网liveData描述小例子ViewModelWithLiveData.javaimport androidx.lifecycle.MutableLiveData;import androidx.lifecycle.ViewModel;//扩展viewModel类public class Vi
2020-12-08 10:06:56
426
原创 安卓学习 Intent
Intent 意图导航去别的activity Intent intent = new Intent(this, Activity2.class);传递数据到别的activityMainActivity.java 传递数据 Intent intent = new Intent(this, Activity2.class); intent.putExtra("value","yangliwei is good!");Activity2.java 接收数据 Intent in
2020-12-02 14:33:02
150
原创 网页播放rtsp视频流，rtsp播放，网页摄像头播放
网页显示摄像头的RTSP视频主要有两种方案：一种是vlc，通过安装vlc3.0播放器，然后使用国产360浏览器来播放，不支持chrome等现代浏览器。第二种是：vxg播放器vxg是目前找到的最完美的解决方式安装方式：1，在谷歌商店安装vxg插件,需要翻墙，或者在某些网站直接下载插件安装：https://chrome.google.com/webstore/detail/vx...
2020-12-02 14:05:20
13613
14
原创 vue3 keep-alive 动态缓存页面
keep-alive通过keep-alive可以缓存页面,但是有的时候有这种需求:从首页进入列表页要刷新从详情页返回列表页不刷新基本思路通过vuex 保存需要缓存的列表页数组通过keep-alive 的 include 来动态获取vuex保存的数组代码实现app.vue<router-view v-slot="{ Component }"> <!-- 缓存页面 --> <keep-alive :include="$store.sta
2020-10-26 09:36:22
7577
10
原创 vue3子组件向父组件传值
两种方法用传统的methods方法this.$emit(“方法名”,要传递的参数)使用vue3新的方法推荐第二种方法,更加符合vue3的风格 emits: ["todata"], setup(props, refs) { const change = () => { const params = { user:"ylw" }; emit("todata", params); };}...
2020-10-14 21:19:24
14271
7
原创 vue 配置别名,识别别名路径,别名代码提示,vscode别名路径
配置别名打开vue.config.jsconfigureWebpack: { resolve: { alias: { "@": resolve("src"), "@@": resolve("src/components") } } }让VScode 识别别名在项目根目录新建文件:jsconfig.json,并写入以下内容 { "compilerOptions": { "baseUrl": ".",
2020-10-08 20:02:57
1843
1
原创 vue路由做权限区分
基本思路根据登录的权限,动态加入路由,用vue router自带的 addRoutes 方法基本实现写一个判断权限方法import city from "city"import country from "country"const permission = (level, isCenter) => { if (level == 0 && isCenter) { return city; } else (level == 1 && i
2020-09-28 16:15:21
462
原创 vue 动态保存组件状态 keep-alive
组件有时候需要保存状态1,使用keep-alive把组件包裹起来<!-- 逗号分隔字符串 --><keep-alive include="a,b"> <component :is="view"></component></keep-alive><!-- 正则表达式 (使用 `v-bind`) --><k...
2020-05-03 20:37:44
1542
原创 vue-i18n 通过接口动态修改语言包
1,需求:需要通过后台来接收语言包,并且实时修改掉2,代码:直接通过setLocaleMessage的方法来动态修改//html <h1>{{ $t("system.name") }}</h1>//jsaxios.get("/api/getLang").then(res => { this.$i18n.setLocaleMessage(...
2020-04-30 10:20:11
7232
2
原创 vuex 加密保存在localstorage中,自定义名称
需求:vuex中的信息存在localStorage中,但是安全性不够1,安装secure-lsnpm i secure-ls2,使用在store.js中写入一下代码import SecureLS from "secure-ls";var ls = new SecureLS({ encodingType: "aes", isCompression: false, encr...
2020-04-28 10:29:23
1684
原创 antd vue upload 验证失效问题
在表单中验证upload,当文件被删除后,form并没有验证到解决://vue<a-upload name="peoplefile" :fileList="excelList" :beforeUpload="beforeUpload" @change="fileChange" v-dec...
2020-04-10 10:30:57
2559
1
原创 umi3优化配置,去掉log,开启文件gzip压缩
开启gzip压缩1,安装gzip的webpack插件yarn add compression-webpack-plugin2,在umirc.ts中写入如下配置//引入const CompressionPlugin = require("compression-webpack-plugin");const productionGzipExtensions = /\.(js|css|js...
2020-04-07 16:26:41
6690
6
原创 umi3 useRequest 配置
1,在app.ts中写入:import { RequestConfig } from 'umi';import config from "@/config"import errorHandler from "@/util/errorHandle"export const request: RequestConfig = { prefix: '/api/', credenti...
2020-03-22 21:49:23
12331
2
原创 ant design 上传自定义方法 axios
1,ant design的上传方法自己的action常常不好用,因此自定义自己方法来上传html<a-upload-dragger :customRequest="customRequest" :fileList="fileList" :multiple="true" />js//重写上传方...
2020-02-26 17:38:53
2028
原创 vue router 同一页面不刷新的问题
1,使用key在router-view设置动态的key就会每次都刷新了<router-view :key="$route.params.Id" />2,使用beforeRouteUpdatebeforeRouteUpdate(to, from, next) { console.log(to, from); next(); },官网地址:ht...
2020-02-22 17:19:52
2584
原创 vue 调用父页面方法
1,使用$parent方法//在父组件中data(){ return{ a:1 }}//在子组件中this.$parent.a++2,使用依赖注入(推荐使用)//父组件export default { name: 'App', provide(){ return{ say:this.say ...
2020-02-20 09:57:52
1081
3
原创 vue md编辑器 mavon-editor
1,需求一直在找一个好用的富文本编辑器,但是发现现在富文本已经不流行了,现在流行md所以找md编辑器找到一个好用的:mavon-editorgithub:https://github.com/hinesboy/mavonEditor2,配置main.jsimport Vue from "vue";import App from "./App.vue";import...
2020-02-02 20:00:36
9240
5
原创 ant design vue date-picker 日期快速选择
1,代码<a-range-picker :ranges="{ 今天: [moment().startOf('day'), moment()], 昨天: [ moment() .startOf('day') ...
2020-02-02 14:58:00
2777
原创 egg-jwt egg jwt 使用
1,安装egg-jwtnpm install egg-jwt --save2,配置config/plugin.tsimport { EggPlugin } from 'egg';const plugin: EggPlugin = { jwt: { enable: true, package: "egg-jwt" },};export defau...
2020-01-30 19:02:29
11042
6
原创 egg 上传文件
使用file模式上传文件1,代码controller文件:import { Controller } from 'egg';const path = require('path');const fs = require('fs');export default class HomeController extends Controller { public async ...
2020-01-29 19:58:29
1261
1
原创 egg validate验证插件的使用,以及定制
1,使用安装egg-validateyarn add egg-validate2,配置先启用:config/plugin.tsconst plugin: EggPlugin = { // ... validate: { enable: true, package: 'egg-validate', }, /...
2020-01-28 22:30:29
2365
原创 react redux 订阅模式报错解决方法
1,错误原因//订阅模式 this.cancelSub = store.subscribe(() => { this.setState(store.getState()); });众所周知redux 订阅模式可以在store发生改变的时候,回调方法但是页面且回去的时候会报错Can't perform a React state update o...
2020-01-21 16:17:55
1299
原创 使用windows terminal,添加到右键并美化
1,windows Terminal是微软推出的新的命令行工具2,添加到右键菜单新建文本文件,输入以下代码,保存为reg文件,然后运行Windows Registry Editor Version 5.00[HKEY_CLASSES_ROOT\Directory\Background\shell\wt]@="Windows terminal here"[HKEY_CLA...
2020-01-16 10:08:03
3555
原创 vue 重置data的所有属性
1,拿到data原始属性this.$options.data()2,拿到当前的datathis.$data3,复制到当前$data里面Object.assign(this.$data, this.$options.data());
2020-01-08 13:53:12
1264
原创 vue 缓存部分组件!
1.缓存部分组件<keep-alive :include="['addpatient']"> <router-view /> </keep-alive>有些场景需要回到某个页面不刷新,保持里面的内容,这时候就需要缓存页面,但是不能全部缓存的情况下,就需要使用部分缓存了2.官网案例:<!-- 逗号分隔字符串 --&g...
2020-01-08 11:01:22
3456
原创 spring boot 使用swagger ui
1,引入依赖<dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swagger2</artifactId> <version>2.9.2</version>...
2020-01-05 21:13:35
242
原创 sprint boot 增删改查
@Slf4j@RestController@RequestMapping("/rest")public class ArticleRestController { @PostMapping("/article") public AjaxResponse saveArticle(@RequestBody Article article) { log.inf...
2020-01-05 20:09:00
187
原创 idea 开发项目推荐安装的插件
1,GsonFormat 用来格式化json有一个快捷键,可以快速把json内容转化为对象 Alt+S2,lombokLombok 是一种 Java™ 实用工具，可用来帮助开发人员消除 Java 的冗长，尤其是对于简单的 Java 对象（POJO）。它通过注解实现这一目的。下面这些是常用的注解@Data@Setter@Getter@Log4j@...
2020-01-04 22:08:54
346
原创 vue ant design 改变主题
1,引入依赖:npm i webpack-theme-color-replacer2,新建一个webpack插件的js :webpack_theme_plugin.jsconst ThemeColorReplacer = require("webpack-theme-color-replacer");const generate = require("@ant-design/co...
2019-12-26 09:47:18
3701
3
libvlc-3.0.0_32.aar
2019-12-09
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人