本年度重点计划:通用页面配置化搭建、可视化页面研究、后台配置页面数据(Vue 和 React)
-
创建自己的 Vue 通用组件代码库 https://github.com/aehyok/vuecomponent
-
React 可视化框架 https://github.com/brick-design/react-visual-editor
-
Vue 表单生成器 https://github.com/xaboy/form-create
-
Vue 通用 Table 和 Form 表单 https://github.com/nmxiaowei/avue
-
Vue React 等 https://mp.weixin.qq.com/s/U3gxd-y5hsLHtaa0MmHlvA
-
vue Form Generator https://mrhj.gitee.io/form-generator/#/
-
页面可视化搭建的前世今生 https://zhuanlan.zhihu.com/p/37171897
-
imgcook https://github.com/imgcook/imgcook/blob/master/README.zh-CN.md
-
https://wakatime.com/dashboard 查看 vscode 统计时长
-
大数据图标可视化
-
Form 表单生成器
-
Table 配置器
-
qiankun 乾坤微前端
-
微前端
- 打包 npm 工具包 https://github.com/aehyok/outils
- 打包 npm 组件包 https://mp.weixin.qq.com/s/2EL-wzXKwTIhGisUgkr4-g
- 通用配置数据 http://rap2.taobao.org/ (图片路径需要自己上传)
- 接口文档配置 https://hellosean1025.github.io/yapi/index.html
- 乾坤官网介绍 https://qiankun.umijs.org/zh/api
- 搭建框架 vue3 https://juejin.cn/post/6951649464637636622
- 乾坤全局函数 https://www.freesion.com/article/1714630234/
- 乾坤路由跳转 https://www.codenong.com/cs109313017/
- 路由设置 https://blog.csdn.net/qq_33396780/article/details/110694871
- 乾坤综合性文章 https://segmentfault.com/a/1190000039185220
- https://juejin.cn/post/6844904158085021704
- SSO cookie 共享 https://www.cnblogs.com/sw008/p/11054301.html
- SSO 三种方式 https://www.cnblogs.com/yonghengzh/p/13712729.html
-
xShell 常用指令
- 275 vue3 websocket 封装
- 274 分布式锁解决并发
- 273 关系图谱介绍
- 272 javascript 正则表达式
- 270 smartSql
- 269 etcd简单介绍
- 268 autofac 自动依赖注入
- 267 form表单配置器
- 266 C# 链接mysql数据库关闭ssl
- 265 dotnetcore3.1中引入swagger
- 264 swagger 引入后swagger/v1/swagger.json 500
- 263 字节跳动微前端框架
- 262 form表单生成器
- 261 mysql数据库导入导出
- 260 donetcore 3.1 下载地址(mac window Linux)
- 259 display inline-block和block和inline之间的区别
- 258 go 环境搭建
- 257 vue3 onBeforeRouterEnter
- 256 storyBook
- 255 自定义表单组件封装
- 254 tab 菜单切换
- 253 数据权限设计
- 252 nuxtjs.cn
- 251 css modules
- 250 taro
- 249 C#调用Web Api 接口的类库 Flurl
- 248 vue 可视化技术分析
- 247 vue drag 样例
- 246 video 标签弹窗层级控制
- 245 vite-qiankun 插件
- 243 video 标签监听事件
- 242 video.js 指定视频某个播放时间进行播放
- 240 vue element ui table 多个字段一起排序
- 239 typescript actionMap[value] 报错的检查
- 238 生成 shortid 短 id
- 237 滴滴团队 PC 和 H5 可配置化前端组件库
- 236 vue3 vue-dragger
- 235 vue3 vue-drag-resize
- 234 vue3 3.2.1 版本 defineEmits 定义事件问题
- 233 vue3 vite2 打包资源文件配置
- 232 bash source 命令行的使用
- 231 bash 数组循环便利 (关联数组,可以通过 key 访问)
- 230 shell 脚本 while
- 229 前端项目编译的时候发生,warning [mini-css-extract-plugin] warning Conflicting order
- vuejs/vue-cli#3771
- vue.config.js 中设置 css
// vue.config.js module.exports = { css: { extract: { ignoreOrder: true }, }, };
- 228 vue.config.js extenals 设置
- 227 nginx location 规则判断处理
- 226 console.log 的延迟问题
- 225、centos 下安装 mysql
- 224、腾讯云安装 centos mysql
- 223 postman 汉化版本
- 222 微信公众号调用 wx.config 验证
- 221 行政区边界拾取
- 220 map 桌面地图
- 219 vue 动态 table
- 218 动态菜单 菜单权限 等
- 217 useValidate 验证封装参考
- 216 utils 封装参考
- 215 bigemap 获取 kml 文件
- 214 删除文件和文件夹
- rm -rf *
- 213 linux 删除目录下的文件指令
- 212 组件共享 webpack5 Module Federation
- 211 html 网页 转换为 md 文档工具
- 210 github pages 如何部署网站
- 209 axios typescript 封装
- 208 vue 动态路由的加载
- 207 vue tree blocks
- 206 vue tree-select
- 205 webpack 打包文件名 hash、 chunkhash、contenthash 意义
- 204 vue hls 使用 播放 m3u8 视频
- 203 wx.config url 设置
- 202 prettier 设置格式化文件代码
- 201 地图底图服务
- https://blog.csdn.net/zouxin_88/article/details/107425436
- https://wiki.openstreetmap.org/wiki/Tile_servers
- https://blog.csdn.net/acmdream/article/details/78788889
- GeoServer 发布 osm 数据地图服务 https://blog.csdn.net/jiang_wang01/article/details/117789270
- rest api 底图服务搭建 https://www.cnblogs.com/think8848/p/6241836.html
-
200 vue cesium
-
199 PC 端自适应设置屏幕样式
@media (min-width: 1024px){ body{font-size: 18px} } /*>=1024的设备*/ @media (min-width: 1100px) { body{font-size: 20px} } /*>=1100的设备*/ @media (min-width: 1280px) { body{font-size: 22px;} } /*>=1280的设备*/ @media (min-width: 1366px) { body{font-size: 24px;} } @media (min-width: 1440px) { body{font-size: 25px !important;} } @media (min-width: 1680px) { body{font-size: 28px;} } @media (min-width: 1920px) { body{font-size: 33px;} }
- 198 vue 组件中的 key 可以刷新数据
- 也可以通过子组件中的 watch 监听 num 变化进行处理数据
- 197 微信公众号调用 wx.config 进行设置
- https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#36 调用微信本地的 wx.openLocation
- https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62 通过接口获取 wx.config 的参数值
- 196 android app 开启辅助 H5 定位功能
- 195 微信公众号 JSSDK 分享页面
- 194 百度地图自动获取当前定位和当前经纬度
- 193 前端压缩上传图片
- 192 git-cz 等同于 git commit 命令
- 191 百度地图 map Marker 添加点击事件
- 190 public 下的 js 文件通过 import 导入后一样会将文件打包进去,不能通过配置文件读取
- 189 cesium 中文网
- 188 map 相关
- 187 微信公众号页面中
- 两个 alert() 会存在覆盖的情况,后者会覆盖前者
- 如果 alert() 后面存在重定向的话,alert()可能来不及执行
- 186 van-picker 三级联动
- 185 vite2 vue3 作为乾坤的子应用
- 184 获取随机数字并且不等于上一次的数值
// 获取随机数 // Math.random 生成0-1之间的随机数字 const getRndInteger = (max) => { const tempNum = Math.floor(Math.random() * max); console.log(`当前值:${tempNum},历史值:${window.randomNum}`); if (window.randomNum === tempNum) { console.log("再调用一次方法"); getRndInteger(max); } else { window.randomNum = tempNum; // console.log('返回当前值',tempNum) // return tempNum; } };
- 183 数组随机排序
https://www.cnblogs.com/7qin/p/9710034.html
function shuffle(arr) { let i = arr.length; while (i) { let j = Math.floor(Math.random() * i--); //5555 [arr[j], arr[i]] = [arr[i], arr[j]]; } }
- 282 git bash 中的中文乱码问题处理
- 281 El-select 下拉点击后不出来
- element-plus/element-plus#2180
- element-plus/element-plus#2198
-
280 git 提交的 shell 脚本
-
279 qiankun 主应用跳转到子应用后退页面无法刷新的问题
- 278 qiankun 乾坤子应用打包后,主应用访问 图片和 字体等打包后无法访问
- 277 cookie 操作
- 276 vite2 配置接口代理
// 本地运行配置,及反向代理配置 server: { port: 9900, cors: true, // 默认启用并允许任何源 open: true, // 在服务器启动时自动在浏览器中打开应用程序 //反向代理配置,注意rewrite写法,开始没看文档在这里踩了坑 proxy: { '/infra': { target: 'http://139.9.184.171:10088', //代理接口 changeOrigin: true, rewrite: (path) => path.replace(/^\/infra/, '') } } }
- 275 vite2 和 vue3 升级体验
- 274 vite2 配置 axios 请求代理
- https://www.cnblogs.com/hy999/p/vue-vite-proxy.html
- 273 轮播动态
- 272 轮播页面插件
- 271 vuex 持久化插件
- 270 redis 库
- 269 vscode 设置默认的终端
- setting.json 文件中设置 "terminal.integrated.shell.windows": "E:/Program Files/Git/bin/bash.exe",
- 268 File differs from already included file only in casing: correct casing but relative path
- 267 vue3 PC 端项目模板
- 266 vuex 持久化
- 265 EFCore 标准代码仓库
- 264 yarn build 打包时,会有一系列的警告
// 警告信息如下
chunk chunk-8bbe4a0e [mini-css-extract-plugin]
Conflicting order. Following module has been added:
* css ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/imgPreview.vue?vue&type=style&index=0&id=41ed99a7&lang=scss&scoped=true&
despite it was not able to fulfill desired ordering with these modules:
* css ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/videoPreview.vue?vue&type=style&index=0&id=6fbe4342&lang=scss&scoped=true&
- couldn't fulfill desired order of chunk group(s)
- while fulfilling desired order of chunk group(s) , , , ,
// 目前可以在 vue.config.js 中设置去除警告信息
// 设置忽略警告【mini-css-extract-plugin】 order
extract: process.env.NODE_ENV === 'production' ? {
ignoreOrder: true,
} : false,
- 263 微服务 API 网关
- 262 vue 动态路由,通过 api 接口获取配置路由
- 261 javascript 拷贝内容
- 260 cesium 地图教程
- 259 vite 编译时可清空编译目录
- vite build --emptyOutDir
- 258 前端规范整理
- 2、https://juejin.cn/post/6844903779117056008
- 3、http://alloyteam.github.io/CodeGuide/#js-indentation
- 4、https://juejin.cn/post/6844903892220641293#heading-2
- 5、https://juejin.cn/post/6844903593896574990 vue 规范
- 6、https://juejin.cn/post/6844903951486156813
- 7、https://juejin.cn/post/6844903696040476686 vscode 使用
- 8、https://juejin.cn/post/6844903671457677325
-
257 vue3 全局函数注册及调用
-
256 vue.config.js 设置 css 是否单独生成到 css 文件
/* 默认为true,会将项目中的css文件抽离到单独的css文件中,使用时需要单独import使用 设置为false,则会直接一起打包了 */ css: { extract: false },
-
255 javascript 基础知识
-
254 安装 sass 和 sass-loader 时报错 this.getOptions is not a function
-
sass-loader 版本过高导致,我当时安装的版本为 11.1.1 卸载后改为 10.0.1 运行 ok
npm uninstall sass-loader npm install sass-loader@10.0.1
-
-
253 eslintrc.js 详解
-
252 vue.config.js 先取消 eslint
// 是否开启eslint保存检测 ,它的有效值为 true || false || 'error' module.exports = { lintOnSave: true, };
-
251 es6 module 和 commonjs
- export 和 import https://blog.csdn.net/dt1991524/article/details/86497449
- 深入 CommonJs 与 ES6 Module https://mp.weixin.qq.com/s/U2_hnwLTkCe-pm6f5z4nMg
-
250 eslint 初始化
npm install eslint --save-dev ./node_modules/.bin/eslint --init
-
249 webpack 通过 less-loader 设置 css 前缀
{ loader: 'less-loader', options: { modifyVars: { '@ant-prefix': 'yourPrefix', }, javascriptEnabled: true, }, }
- 248 vue3 form 表单 替换 this.$refs
-
247 css 样式
// 鼠标悬浮于a标签选择器上的样式变化 a:hover { background-color:yellow; } // 选择器为活动的链接设置的样式 a:active { background-color:yellow; }
-
246 promise 防抖和节流
-
245 xgplayer 西瓜视频播放器
-
244 灰色模式和色弱模式
// 灰色模式 .html-grey { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1); } // 色弱模式 .html-weakness { filter: invert(80%); -webkit-filter: invert(80%); -moz-filter: invert(80%); -ms-filter: invert(80%); -o-filter: invert(80%); }
- 243 vue template 多个根元素波浪线提示
-
242 i18n 多语言翻译
-
241 vueuse.org
-
240 esbuild 编译和 commonjs
- esbuild https://www.leiue.com/what-is-es-modules
- esbuild 和 commonjs 比较 https://zhuanlan.zhihu.com/p/161015809
-
239 vite 开启 https
- vite.config.js 中 https: true 属性开启
-
238 webpack devServer 配置开启 https
-
237 json 美化工具
- 236 axios 请求缓存的处理
- 235 wpf 嵌入 chrome 浏览器
- 234 vue3 学习笔记
- 233 HBuilderX 引入 vant
- 232 微信小程序地图服务
- 231 uni-app pages 数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
- 230 微信公众号 H5 页面调用微信登录全过程
- 详见 ---微信公众号 H5 调用微信登录全过程
- https://www.cnblogs.com/0201zcr/p/5131602.html
- 229 微信扫描二维码
- 228 docker 中 mysql 的控制
- 227 docker 安装
- https://juejin.cn/post/6950558227490668557
- docker 安装和 docker compose 安装
- rap2 安装
- docker-compose 安装和卸载
- docker 安装和卸载
- 226 Husky 提升代码质量
- 225 vite mock
- 224 eslint 规范
- 223 mitt 事件总线 https://blog.csdn.net/fuweipeng2012/article/details/113812794
- 222 vue3 替代 vue2 中.sync 的 v-model
- 221 vue3 provide 和 inject 传值
- 220 vue3 useRoute 和 useStore 的使用
- 219 typescript tsconfig.json
-
218 vue3 vite2 模版项目配置
-
217 EditorConfig for VS Code 插件
- JetBrains 系列(WebStorm、IntelliJ IDEA 等)则不用额外安装插件,可直接使用 EditorConfig 配置。
-
216 vite 中文网 https://www.pipipi.net/vite/
-
215 css module
- 214 随机数字生成
Math.floor(Math.random() * 10); // 返回 0 至 9 之间的数 Math.floor(Math.random() * 11);
- 213 适配大屏幕解决方案
- 212 vue vite public 下图片路径的问题
public 下面的文件路径前要加斜杠 '/' 参考 -204下webpack打包public路径设置
- 211 微信小程序开发
- 210 vue jsonp 插件跨域请求数据使用
- 209 webpack plugin 各种插件
- 208 this.$set
- 207 vue 首页加载慢,路由懒加载、组件懒加载
- 206 即偶数元素 css 给最后的元素添加样式
// 第二个元素,里面换成n就是第n个元素 div:nth-child(2) { background:#ff0000; } // 选中最后一个奇数 div:nth-child(odd):last-child { margin-bottom: 0; } // 选中最后一个偶数 div:nth-child(even):last-child { margin-bottom: 0; } // 3的倍数元素的样式,后面的0可以换成m,就是3倍再加m p:nth-child(3n+0) { background:#ff0000; }
-
205 vue style 绑定样式
:style="{backgroundImage: 'url(' + item.url + ')'}"
-
204 vue cli public
- 文件夹下面可以放置静态的图片资源和 json 文件
- 注意在调用的时候不要在路径前面添加"/"
// 1、axios调用json数据 this.$axios.get('data/001/family.json').then(res=>{ console.log('this.$axios.get', res) }) // 2、image路径 前面不要加斜杠了 bannerData:[ {imageUrl: 'images/banner/2.jpg'}, {imageUrl: 'images/banner/1.png'}, {imageUrl: 'images/banner/3.jpg'} ],
- 203 vue cli public 文件夹
- 202 window.location 详解
- 201 打包后 public 下的静态文件目录找不到
- 200 图片区域 area
- 199 路由返回
//this.$route是当前页面的路由,而this.$router是当前路由器,包含所有路由的信息 1、vue路由中的返回 this.$router.go(-1) 2、其中this.$router也包含 history中的路由信息
- 198 vscode 设置中文 https://blog.csdn.net/qq_30068487/article/details/82589347
1、vscode中 Ctrl+Shift+p 2、搜索框中输入 configure display language 3、选择zh-cn中文语言包 4、如果还是中文,在Ctrl+Shift+x 5、输入chinese中文语言包安装重启
- 197 flex 简单布局
- 196 微信小程序跳转到小程序
- 195 vue- vnode
Vue.mixin({ beforeRouteLeave: function (to, from, next) { console.log(this.$vnode, window); if ( from && from.meta.rank && to.meta.rank && from.meta.rank > to.meta.rank ) { console.log(this.$vnode, window, "-----------全局beforeRouteLeave"); if (this.$vnode && this.$vnode.data.keepAlive) { if ( this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache ) { if (this.$vnode.componentOptions) { var key = this.$vnode.key == null ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : "") : this.$vnode.key; var cache = this.$vnode.parent.componentInstance.cache; var keys = this.$vnode.parent.componentInstance.keys; console.log(cache, "cache-keys"); if (cache[key]) { if (keys.length) { var index = keys.indexOf(key); if (index > -1) { keys.splice(index, 1); } } delete cache[key]; } } } } this.$destroy(); } next(); }, });
- 194 nginx vue 404 not found
- 193 nodejs 安装
- https://blog.csdn.net/weixin_42940467/article/details/113866473
// 1、可从官网下载nodejs安装包 // 2、然后通过xftp上传到服务器 // 3、解压文件 tar -xvf node-v12.14.1-linux-x64.tar.xz // 4、复制文件夹到指定位置 sudo mv ./node-v12.14.1-linux-x64 /usr/local/node // 5、为node和npm创建快捷方式 sudo ln -s /usr/local/node/bin/node /usr/bin/node sudo ln -s /usr/local/node/bin/npm /usr/bin/npm // 6、查看版本确认安装是否成功 node -v npm -v
- https://blog.csdn.net/weixin_42940467/article/details/113866473
- 192 linux 常用命令使用
- 191 xftp 设置,然后 xshell 就可以访问
- 190 nginx
-
189 keepalive
-
188 Easy Sass 和 Beautify 安装 vscode 插件,则修改 scss 样式保存时会将样式自动同步 css 中
-
187 centos nginx
-
186 密码加密
-
MD5 加密 js-md5
import md5 from "js-md5"; md5("username" + "userpassword"); // 加密 加盐
-
前端字符串转码解码
npm install --save js-base64 import { encode, decode } from 'js-base64' encode('aehyok') // 转码 decode('ADkjdifewoewe') //解码
-
-
185 富文本框 wangeditor
-
184 全局监测录入框事件
// 全局使用 引入init import '@/utils/init' //init.js文件内容 // xss防御攻击输入框失去焦点 document.addEventListener('blur', function(e) { if(['input', 'textarea'].includes(e.target.tagName.toLowerCase())) { console.log(e, e.target.value, 'e.target.value') e.target.value =replaceStr(e.target.value) e.focus() } }, true) function replaceStr(a) { a = a.replace(/(<br[^>]*>| |\s*)/g, '') .replace(/&/g,"") .replace(/"/g,"") .replace(/'/g,"") .replace(/</g,"") .replace(/>/g,""); return a }
// 可以统一处理传递的 data 参数,加密或者请求头
instance.interceptors.request.use( (request) => { const userInfo = localStorage.loginInfo ? JSON.parse(localStorage.loginInfo) : {}; request.headers = { Authorization: userInfo.token, "Content-Type": "application/json", }; if (request.data) { request.data = replaceStr(request.data); } console.log(request, "s---------request"); return request; }, (error) => Promise.reject(error) );
- 183 nuxt.js 服务端渲染
- 182 vue xss 攻击
- 181 搭建 nuxt.js 服务端渲染
- 180 搭建地图加载底图服务
- 179 多边形计算重心
- 178 vue cesium
- 177 回流和重绘
- 176 TileLayer 设置 subdomains
- 175 VUE 防止 XSS
- 174 VUE CLI 模式和环境变量
- 173 构建简易全景图
- 172 webpack 打包优化
- 171 css3 特效
- 170 查看端口占用情况
- 查看指定端口占用情况 netstat -ano |findstr 5037
- 通过 pid 查看进行详情 tasklist | findstr pid
- 然后可以到任务管理器中 结束指定 pid 的任务
- 169 github 无法打开
- 168 vue 下载文件,通过添加 token 的方式
- 167 vue videojs 播放视频
- 166 几种通用的表单验证字段
- 165 vue $attrs、$listeners 传值
- 164 vue watch 深度监听
- 163 vue2 和 vue3
- 关注实时动态的
- vue2 很熟悉、
- 162 有些包 package 如果 npm i 安装失败,那么可以使用 yarn 再试一下
- 161 全局 css 变量设置
- 160 qiankun 微前端 框架
- 158 省市区 vue elementui 联动
- 157 **省市县区
- 156 vue-drag-resize
- 155 map-demo
- 154 wrld.js
- 153 eventBus 在 vue 中的使用
- 151 vue2-leaflet
- 150 leaflet 和 leaflet.pm,已迁移到 leaflet-geoman
- 149 微信公众号是否关注
- 148 vue env 全局变量
- 147 babel 入门
- 146 webpack 配置详解
- 145 动态 form 表单 https://juejin.cn/post/6844904173691994119
- 144Element-Pro-Crud
- 143 vue element npm 发布组件
- 142 imgcook 学习
- 141 廖雪峰的个人博客
- 140 统计 vscode 使用时长 waketime
- 139 jquery find 返回多个后代元素
- 138 创建自己的 library 类库包并使用 webpack4.x 打包发布到 npm
- 137 新年开工第一天,立下一个 flag,自律、自律、自律
- 136 mac 下 npm install 安装失败
- sudo 加上权限,主要是没有权限访问
- 135 Failed to mount component: template or render function not defined
- https://stackoverflow.com/questions/41983767/vue-template-or-render-function-not-defined-yet-i-am-using-neither
- https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
- laravel-mix/laravel-mix#198
- 134 husky 使用和介绍
- 133 前端本地存储 GoDb.js
- 132 jsonEditor 编辑
- 131 全局注册组件
- 130 form-create 自定义组件如何注册到 form-create 中使用
- 129 Vue.extend 动态注册子组件
- 128 go 语言学习网站
- 127 vscode 搭建 go 开发环境
//1、go安装包下载 https://studygolang.com/dl //2、安装成功cmd命令查看版本号 go version //3、设置七牛云代理 go env -w GO111MODULE=on go env -w GOPROXY=https://goproxy.cn,direct //4、vscode中下载go扩展插件 //5、创建hello.go文件 //6、写入代码后编译运行 go run helloworld.go //7、将go文件打包成wasm GOOS=js GOARCH=wasm go build -o test.wasm hello.go //8、go打包编译 go build -o hello.exe hello.go //9、vscode中Ctrl+Shift+P 安装go插件 全选进行安装 https://zhuanlan.zhihu.com/p/320343679
- 126 vue3.0 demo 学习 https://github.com/newbee-ltd/vue3-examples
- 125 npx 命令使用详解
- 124 webpack 在线图书
- 123 vue.config.js 配置
- 122 commander 打包命令行工具
- 121 vue3 源码解读
- 120 表单工具可视化拖拽程序
- 119 webpack 网上图书 http://webpack.wuhaolin.cn/
- 118 打包 build 时不清除原有打包目录的文件
- "build": "vue-cli-service build --no-clean",
- 117 github.io 搭建自己的个人网站
- 实际上就是将自己的前端网站打包,然后发布到打包文件 commit 到 aehyok.github.io
- https://zhuanlan.zhihu.com/p/28321740
- https://github.com/Cazaea/Cazaea.github.io
- 113 mockjs 想要在 typeScript 中使用,安装 mockjs 之后,需要安装 npm install --save @types/mockjs
- 114 vue3.0 .sync 修饰符的替换
- 115 ffmpeg.wasm
- https://ffmpegwasm.github.io/
- npm install @ffmpeg/ffmpeg
- 116 css ::v-deep
- https://stackoverflow.com/questions/63986278/vue-3-v-deep-usage-as-a-combinator-has-been-deprecated-use-v-deepinner-se/63986379
- https://github.com/vuejs/rfcs/blob/master/active-rfcs/0023-scoped-styles-changes.md
- vue react npm git webpack typescript nodejs nginx linux
- mongodb mysql redis
- 111 动态 import 的用法,动态路由
- 112 document.activeElement.dataset 和 e.target.dataset 问题
- 108 一个非常棒的开源项目 H5-Dooring 目前 star 3.1k
- 109 npm 发包
- 110 npm publish 发包时异常
- 403 Forbidden - PUT https://registry.npmjs.org/aehyok-hello - Forbidden
npm修改邮箱,要登录邮箱进行验证 查看npm 仓库源,确保是npmjs.org
- 403 Forbidden - PUT https://registry.npmjs.org/aehyok-hello - Forbidden
- 100 1 月 23 日参加公司年终总结和计划会以及部门会议
- 101 查看 vue3 github 项目 https://zhuanlan.zhihu.com/p/254219538
- 102 css !important 该条样式属性声明具有最高优先级
- 103 linux 创建文件夹 删除文件夹
- 104 elementui eltree 展开指定层级的节点
- https://github.com/HenryTSZ/zeit/blob/master/source/_posts/based-on-element-ui-encapsulation-tree.md
expandToLevel(level) { this.$nextTick(() => { const elTreeStore = this.$refs.tree.store const allNodes = elTreeStore._getAllNodes().sort((a, b) => b.level - a.level) console.log('TCL: expandToLevel -> allNodes', allNodes) if (level === 0) { // 展开全部 allNodes.forEach(node => { node.expanded = true }) } else { allNodes.forEach(node => { if (node.level >= level) { node.expanded = false } else { node.expanded = true } }) } }) },
- 105 发现一个不错的 git 文档库 准备 get 一下
- 106 npm 使用详解
- 107 阮一峰 git 仓库
- 97 vue3 中的 setup Composition API
- 98 vue elementui table 表格的封装
- 99 vite 工具官网
- https://vitejs.dev/
- npm install -g create-vite-app 全局安装
- create-vite-app projectName
- https://www.cnblogs.com/qlb-7/p/13790610.html
- https://segmentfault.com/a/1190000023737670 vite 创建项目并添加 typescript
- https://github.com/Mstian/Vue-Onepiece-Admin.git 参考一个 vue3 的项目
- 90 对比一下 vue2 和 vue3 中分别使用 typeScript 的方式
- 91 vue 中 lint 检查的配置
- 92 vue create 项目时,手动选择 通过空格键进行选中或者反选,然后进行配置
- 93 dart-sass 和 node-sass 区别
- 94 前端多媒体知识
- 95 vue3 官网 ts 支持
- 96 google 技术栏目
- 84 vue-class-component 和 vue-property-decorator vue 类组件
- 85 css transform scale 放大和缩小
- 86 history.pushState() 可以控制浏览器自带的返回按钮
- 87 export 和 export default
- 88 vue3 项目创建
- 创建项目 https://www.cnblogs.com/carlJian/p/13932400.html
- 引入 elementui https://element-plus.gitee.io/#/zh-CN/component/quickstart
npm install element-plus --save
- vue-cli-service serve 命令 https://cli.vuejs.org/zh/guide/cli-service.html#vue-cli-service-serve
- 89 prettier 格式化代码的配置
// 局部安装prettier npm install --save -dev --save-exact prettier // 全局安装 npm install --global prettier
- 82 fq 今日更新
- 83 webassembly 视频进行转码 https://mp.weixin.qq.com/s/5k5f3UDNhFyc9DU-cws3og
- 81 echarts 地图
- 设置 echarts div 的宽度和高度
- 边距可以设置 gird 属性中的{top,left:right,bottom}
- x 轴和 y 轴,均可设置多个,匹配数据的时候要进行设置 yIndex
- 柱状图的柱状 可设置颜色
- 顶部选项 可设置 图标 icon,以及字体颜色等
- 配置渐变颜色 https://blog.csdn.net/weixin_44897255/article/details/96877562
- 80 transform
- 77 vscode 插件韭菜盒子
- 78 echart 柱状图渐变颜色
- 79 echart 百度地图数据
- 76 数字之间的间隔 - letter-spacing:2px;
- 77 css 小箭头
- 78 css display:flex 一行两列一行三列
- 72 animate.css 动画库
- 73 饼状图 legend 圆点设置
- 74 border-radius 50%和 100%
- 75 axios 针对请求进行缓存
-
68 模块热替换 api
-
69 webpack 配置设置
-
70 cesium 地图
-
71 百度 echarts
//柱状图颜色随机设置
//https://www.cnblogs.com/kang543418095/p/5964397.html?utm_source=itdadao&utm_medium=referral
itemStyle: {
normal: {
//这里是重点
color: function(params) {
//注意,如果颜色太少的话,后面颜色不会自动循环,最好多定义几个颜色
var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
return colorList[params.dataIndex]
}
}
}
- 54 无代码 no-code(NCDP)和低代码的解释
- 55 无代码相关的社区
- 56 form-create 中是如何通过 control 控制其他组件的
- 57 nginx 使用
- 58 vconsole 公众号调试,直接在微信聊天中点击下面连接,点击即可
- debugmm.qq.com/?forcex5=true 59 nginx 安装到使用详解
- https://juejin.cn/post/6914160814152744973
- 60 杀进程的小工具 fkill
- 61 document.documentElement.scrollTop 微信公众号有时候获取值为 0,暂时可考虑使用 document.body.scrollTop 进行设置
- 62 vue 可视化拖拽组件
- 63 前端节流和防抖介绍
- 64 vue 组件嵌套会提示'make sure to provid the "name" option'
// 组件嵌套如何引用的问题 components: { FormView: () => import('@/components/input/formView'), },
- 65 如果目前定义的组件中,没有满足要求的,可以进行自行定义组件,然后插入到自定义组件中
- 66 dev-server 通过 express 生成一个接口,来加载一个 json 本地文件
- https://www.cnblogs.com/lurenjia1994/p/10038725.html
- https://www.cnblogs.com/yy136/p/9977864.html
- http://www.imooc.com/article/details/id/291839
// 此种方式打包好以后其实已经加载到项目中了 let json = require("../static/pageList.json"); let pageModelList: any = JSON.parse(JSON.stringify(json)); console.log(pageModelList, "this.pageModelList");
- 67 webpack 拷贝 json 文件后部署后虚拟路径读取的问题
let pageModelList: any; console.log(window.location, "window.location"); let href = window.location.href.split("?"); requestJson.get(href[0] + "/static/pageList.json").then((res) => { console.log(res); pageModelList = res; //成功获取到json数据 });
- 49 linux 命令删除文件
- 50 linux 几个命令
- 删除当前目录下的文件 rm -f *
- 删除当前目录下的指定文件 rm -f xxxx.js
- 返回上一级目录 cd ..
- 返回根目录 cd ~
- 直接到某个目录 cd /usr/local/......
- ls 命令可以查看目录下的文件
- ls -l 查看文件列表详情 https://blog.csdn.net/kexiaoling/article/details/51096164
- 上传文件 rz -bye 命令,弹出文件夹选项进行选择即可
- 重启网站 nginx -s reload
- 51 markdown 语法学习
- 52 gitbook 编写文档
- 53 vue 中 nextTick 妙用
- 在 created 和 mounted 阶段,如果需要操作渲染后的试图,也要使用 nextTick 方法。
- 注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted
this.$nextTick(() => { document.documentElement.scrollTop = sessionStorage.getItem("scrollH") || 0; console.log( document.documentElement.scrollTop, "document.documentElement.scrollTop" ); });
- 46 window.requestAnimationFrame 告诉浏览器要执行动画
- https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame
- 页面最小化了,或者被 Tab 切换关灯了,页面绘制全部停止,资源高效利用;
- window.cancelAnimationFrame 取消回调函数
- 47 window.setInterval 以指定的周期执行某个函数运行,window.clearInterval 取消由 setInterval()方法设置的定时器。
private executeAnimation() { let self = this; window.setInterval(function () { self.startAnimation('right'); }, 3000); }
- 48 webpack 配置官方文档
- v5 版本 https://webpack.docschina.org/
- v4 版本 https://v4.webpack.docschina.org/
- 插件地址配置 https://v4.webpack.docschina.org/concepts/#%E6%8F%92%E4%BB%B6-plugin-
- CopyWebpackPlugin https://www.webpackjs.com/plugins/copy-webpack-plugin/
- 配置简易解释 https://www.cnblogs.com/yincece0316/p/10736715.html
new CopyWebpackPlugin({ patterns: [ { from: __dirname+'/src/static', to: 'static', // 不设置则回到默认根路径下面 }, ], // copyUnmodified: true, }),
-
30 通过 adb.exe 连接机顶盒来查看应用的日志记录
- 查看 adb 版本 adb version
- 通过 IP 地址连接机顶盒 adb connect 172.18.0.80:5555
- 查看应用 apk 列表 adb shell pm list package
- adb devices 查看连接设备
- adb kill-server
- netstat -ano |findstr 5037
- adb disconnect
- 链接机顶盒 ----adb connect 172.18.0.239
- google 浏览器中链接 chrome://inspect/#devices----------edge://inspect/#devices
- 进入命令 ----adb shell
- 查看包名列表----- pm -l |grep have
- 卸载 package ---- pm uninstall cn.haveplus.hoteltv(海屋 apk 可通过遥控卸载)
- 退出 shell ---- exit
- 安装 apk ----adb install C:\Users\chill\Desktop\havetv-release.apk
- 开启 start ----- adb shell am start cn.haveplus.hoteltv
-
31 版本号如何设置的问题
-
32 常用开发代码函数查询 mac 下 dash,window 下 devDocs
-
33 elementui table 中的那些基本操作
-
34 mapBox 地图指引
-
35 mapBox 空间分析库 truf.js
-
36 ts 后缀视频播放可通过 mux.js
-
37 控制台 console 打印日志的开启和关闭
// 判断配置文件是否开启日志调试 是否输出日志 True 输出 False 不输出 const logDebug = process.env.NODE_ENV !== "production"; console.log = (function (oriLogFunc) { return function () { if (logDebug) { oriLogFunc.apply(this, arguments); } }; })(console.log);
-
38 高德地图 3D demo
-
https://developer.amap.com/api/javascript-api/reference/maps-3d
-
39 vue 前端项目 webpack 打包设置路径的问题,主要是 publicPath
// vue.config.js中路径设置 module.exports = { lintOnSave: "error", publicPath: "./", // 相对路径,这样可以随意部署任何路径 outputDir: "../release/ui/", // 配置打包输出路径 assetsDir: "static", // 配置css、js、img等路径 productionSourceMap: false, css: { loaderOptions: { // global scss variables 传递配置选项到 sass-loader scss: { prependData: `@import "~@/styles/_variable.scss";`, }, }, },
-
40 Python 命令行神器 Click (pip install -U click),pip 在 python 中
-
41 git 针对 tag 标签设置,tag 是针对所有分支的
- 所有项目,发布版本到 SIT,都需要打标签,以便追溯版本所对应的代码。如果后面需要改版本拉分支修改,也非常方便;
// 添加一个tag git tag -a 3.11.3.001 -m "release 3.11.3.001" git push origin 3.11.3.001 //删除一个tag git tag -d 3.11.3.001 git push origin :refs/tags/3.11.3.001 // 查看分支 git tag // 在某个commit 上打tag git tag git tag test_tag c809ddbf83939a89659e51dc2a5fe183af384233 git push origin test_tag //!!!本地tag推送到线上 // 根据tag创建分支 https://www.cnblogs.com/senlinyang/p/9455426.html git branch newbranch 3.11.3.001 // 然后可以切换到分支 git checkout newbranch // 再通过命令将本地仓库推送到远程仓库 git push origin newbranch // 创建新的分支 git branch branchname // 是将远程主机的最新内容拉到本地 ,用户在检查了以后决定是否合并到工作本机分支中。 git fetch //更多基本操作 //https://www.cnblogs.com/runnerjack/p/9342362.html
-
42 查看 markdown.md 文件可以使用 Typora
-
43 web 计时机制 performance 对象
-
44 window performance 监测时间
-
45 react color 颜色采集控件
-
21 浏览器视频转码
-
22 2020 年大前端技术趋势解读
-
23 css1、css2、css3 以及 Sass、Scss
-
24 typescript 前端项目中引入 mockjs(暂时没有使用接口形式)
-
https://blog.csdn.net/weixin_42512937/article/details/102971496
//1、----- 添加一个.ts文件,在顶部进行引入 import Mock from "mockjs"; let pageModelList = Mock.mock({ code: 0, message: "请求成功", data: { docs: { //...... }, }, }); export default pageModelList; //2、------ 再在使用的地方进行导入 import pageModelList from "@/mock/pageList"; // 接下来便可以使用了 console.log(pageModelList, "this.pageModelList");
-
-
25 vue 项目中 main.js Vue 全局 附加给 window.vm,示例代码截图如下
// 在main.js中的设置 window.vm = new Vue({ router, store, render: (h) => h(App), }).$mount("#app"); export default window.vm;
// 在使用的地方可以直接调用 window.vm.$router.push("/");
-
26 keepalive 和 document.documentElement.scrollTop 测试中还是发现列表到详情再返回,有时候返回后位置还是异常的,或者图片预览弹窗后关闭时。
-
27 EPG 机顶盒样式显示问题
- html 中每个页面元素会有 focus(影响机顶盒样式的显示):表示元素被赋予焦点 和 blur() :表示元素失去焦点
- 首页加载白屏(暂时感觉是代码执行问题)
- 图片加载不完全(有时候只显示三分之一、四分之一),机顶盒问题
-
28 今日通用表单没有进行,参考一篇文章
-
29 markdown 规范参考
-
10 vue keepalive 发现一旦设置某个路由为 true,后续通过动态设置就是无效的后来发现 github 官网也有很多人遇到这个问题
- vuejs/vue-router#811
目前通过变通的方式进行解决此问题,凡是要进行缓存的组件页面,开始都将 keepalive 设置为 true,后续通过钩子函数去触发数据列表更新。
- vuejs/vue-router#811
-
11 vue router 官网有时候可以看一下 api,感觉有很多自己是没有用到过的
-
12 vue elementui radio 在封装为表单控件,且可设置为必填项目,其 label 设置与外部赋值要保持一致的数据类型,而且 required 传入值如果为 undefined 要经过判断,代码如下(截取部分)
export default {
props: {
column: {
type: [Object],
default: () => {},
},
data: {
type: Number,
default: undefined,
},
},
data() {
return {
rules: [
{
// 加上双??,防止出现选中后提示请选择"this.column.title"
required: this.column.required ?? false,
message: '请选择' + this.column.title,
trigger: 'change',
},
],
list: [],
}
},
created() {
this.getList()
},
computed: {
value: {
get: function() {
return this.data
},
set: function(val) {
console.log(val, typeof val, 'this.radioView.val')
this.$emit('update:data', val)
},
},
},
此为一个子组件,data 会传入值类型要与 this.getList 中设置的 label 值要保持一致(计算属性 value 会去绑定 radio 的 v-model)。
-
13 基于 Vue2.x 封装的 Echarts 图表组件
-
14 markdown 中引入图片的方法:先将图片上传到 github 库,然后找到对应库,图片所在的地方,github 上可预览图片的,此时便可右键查看图片地址[https://raw.githubusercontent.com/aehyok/2021/main/image/test.png],图片地址类似是这样的,或者点击 download 可以查看到地址的。
下面代码可以进行设置位置和宽高<div align=center> <img src="https://raw.githubusercontent.com/aehyok/2021/main/image/test.png" width="300" height="450" align="middle" /> </div>
效果如下
另外一种设置图片的显示方式,不过暂时没找到如何设置宽高和位置,应该可以考虑通过 url 后面进行参数设置(通过特定的转换)
![avatar](https://raw.githubusercontent.com/aehyok/2021/main/image/test.png)
-
15 css 颜色大全表
-
16 html 不同显示色差问题处理
-
17 css 三角箭头
-
18 SSH 阮一峰学习笔记
-
19 vconsole,引入项目 - https://blog.csdn.net/weixin_43232488/article/details/83014086
- 20 Less 中& 符号的妙用
- 1 vue 中将 v-for 循环组件(通过 v-if 进行展示),方案修改为 component 组件,简化代码
<div v-for="(item, index) in columnList" :key="index">
<component
:is="item.type + 'View'"
:column="item"
:data.sync="formData[item.name]"
/>
/*
<!--文本框Input-->
<!-- <TextView
:column="item"
:data.sync="formData[item.name]"
v-if="item.type.toLowerCase() === 'text'"
/> -->
<!--文本框Input-->
<!-- <TextAreaView
:column="item"
:data.sync="formData[item.name]"
v-if="item.type.toLowerCase() === 'textarea'"
/> -->
<!--数值框Number-->
<!-- <NumberView
:column="item"
:data.sync="formData[item.name]"
v-if="item.type.toLowerCase() === 'number'"
/> -->
*/
-
2 IMWeb 前端团队总结 https://mp.weixin.qq.com/s/muljS3iA0c2j1tIICLOhFQ
-
3 WebAssembly(WASM)学习了解
IMWeb 团队擅长的音视频领域,我们通过将 ffmpeg 编译为 wasm 版本且在浏 览器中运行,将过去处于黑盒中,只有浏览器底层才能使用的音视频编解码能力彻底解放。目前我们可以在前端页面中对音视频流直接进行处理,在完全不依赖后台的情况下,便捷、高效的实现了视频播放帧预览与视频帧截图等功能。目前团队正在进一步探索 wasm 在音视频以及其他过去前端无法触及的领域的可行性实践。
-
4 React 可视化框架,目前 3047 个 star
-
5 psd.js 将 pds 设计稿转换为 json 数据格式
-
6 npm 设置源仓库
-
7 webpack vuecli 创建项目
-
8 mongodb 命令行启动数据库,可改为 window 服务,还未尝试
-
9 vscode 中保存自动格式化代码的插件 Prettier - Code formatter