- 博客(55)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 @antv/f2按需引入
以饼状图为例首先引入所需模块import { Chart } from '@antv/f2/lib/core'import Axis from '@antv/f2/lib/coord/polar'import Animation from '@antv/f2/lib/animation/detail'import Legend from '@antv/f2/lib/plugin/legend'import Tooltip from '@antv/f2/lib/plugin/tooltip'
2021-08-16 14:48:32
1561
原创 vite中配置autoprefixer前缀追加以及flexbug修复
安装插件yarn add postcss postcss-modules postcss-flexbugs-fixes -D方案一，在vite.config.js中配置*css.postcss类型： string | (postcss.ProcessOptions & { plugins?: postcss.Plugin[] })*内联的 PostCSS 配置（格式同 postcss.config.js），或者一个（默认基于项目根目录的）自定义的 PostCSS 配置路径。其路径搜索.
2021-08-16 11:46:54
5866
1
原创 vite中别名配置
配置vite.config.jsimport path from 'path'export default defineConfig({ resolve: { extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json', '.sass', '.scss'], alias: { '@': path.resolve(__dirname, 'src'), '@components': path.resolve.
2021-08-16 11:26:01
1337
6
原创 vite中css模块化以及支持less等预编译
配置vite.config.js文件，无需安装任何插件-关于css的都在css模块下面进行配置import path from 'path'export default defineConfig({ css:{ //* css模块化 modules: { // css模块化 文件以.module.[css|less|scss]结尾 generateScopedName: '[name]__[local]___[hash:base64:5]', hashPre..
2021-08-16 11:20:11
9196
2
原创 vite中antd、antd-mobile等按需引入配置
重要插件vite-plugin-import yarn add vite-plugin-import -D配置vite.config.js文件import createImportPlugin from 'vite-plugin-import'export default defineConfig({ plugins:[ createImportPlugin({ onlyBuild: false,//是否只需要在生产环境中使用 babelImportPl.
2021-08-16 11:05:38
2494
1
原创 vite打包后的文件提供传统浏览器兼容性支持
vite 为打包后的文件提供传统浏览器兼容性支持安装主要插件yarn add @vitejs/plugin-legacy -DVite 的默认浏览器支持基线是Native ESM。此插件为不支持本机 ESM 的旧版浏览器提供支持。*默认情况下，此插件将： *为最终包中的每个块生成相应的遗留块，使用@babel/preset-env 转换并作为SystemJS 模块发出（仍然支持代码拆分！）。 *生成一个包含 SystemJS 运行时的 polyfill 块，以及由指定的浏览器目标和包
2021-08-16 10:56:58
11397
11
原创 vite+@loadable/component配置路由动态导入
vite项目中@loadable/component实现路由动态导入关键知识点 import.meta.glob Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块 const modules = import.meta.glob('./dir/*.js')代码配置import React from 'react'import loadable from '@loadable/component'const modules = import.meta.gl
2021-08-16 10:37:01
2035
原创 postcss-pxtransform移动端适配
安装yarn add postcss-pxtransform -D使用postcss.config.jsmodule.exports = { plugins: [ require("postcss-pxtransform")({ platform: 'h5', designWidth: 750, }), ],}还需要在html入口文件里面追加base值计算！！！！<script>!function(x){function w().
2021-08-10 17:07:03
575
原创 webpack构建过程中清除多余无效产物
webpack构建打包过程中输出很多杂乱的编码过程，杂乱，让人看着好烦webpack配置支持,通过以下配置，及只有出错了才在终端输出，还有其他值可参看webpack按需配置, 你值得拥有，详见官网添加链接描述module.exports = { stats: 'errors-only', // 只在发生错误时在终端输出}插件friendly-errors-webpack-plugin,识别某些类别的webpack错误，并对它们进行清理、聚合和排序，以提供更好的开发人员体验webpack..
2021-08-04 15:49:23
303
原创 webpack配置css前缀自动补全
webpack配置css前缀自动补全主要依赖"autoprefixer": "^10.3.1","postcss": "^8.3.6","postcss-loader": "^4.2.0",css解析配置确保已安装 基础依赖 style-loader 、css-loaderwebpack.config.js 文件新增module.exports={ module:{ rules:[ { test: /\.css$/i, exclud
2021-08-04 14:46:36
242
原创 css模块化以及antd按需加载冲突解决方案
标题css模块化配置，以及与antd按需加载冲突解决方案安装依赖 "css-loader": "^4.2.2", "style-loader": "^1.2.1",配置webpack.config.js,实现css模块化module.exports = { module:{ rules:[ { test: /\.css $/i, exclude: /node_modules/, use: [
2021-08-04 14:28:06
986
原创 antd按需加载
antd按需加载安装依赖 "antd": "^4.16.7"， "babel-plugin-import": "^1.13.3",配置babel.config.jsmodule.exports = { plugins: [ [ 'import', { libraryName: 'antd', style: true, }, ], ],}
2021-08-04 11:56:50
159
原创 基于@loadable/component以及@babel/plugin-syntax-dynamic-import代码切割
webpack-bundle-analyzer使用欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：全新的界面设计 ，将会带来全新的写作体验；在创作中心设置你喜爱的代码高亮样式，Markdown
2021-08-04 11:44:42
462
原创 webpack-bundle-analyzer配置
安装webpack-bundle-analyzer版本号：^4.4.2配置 webpack.config.js如下const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPluginmodule.exports = { plugins:[ new BundleAnalyzerPlugin({ analyzerMode: 'disabled', // 每次构建时自动打开s..
2021-08-04 11:26:43
586
原创 本地有多个代码管理仓库需要配置多个ssh管理
1.生成ssh key* ssh-keygen -t rsa -C "[email protected]" Enter file in which to save the key (/Users/xxx/.ssh/id_rsa): id_rsa_github(自定义)2.在~/.ssh目录下创建名为config的文件 上面那个步骤可以生成多个秘钥文件配置域名和对应的key ssh 后文为config文件的具体配置栗子：# 注意：多个Host公用一个公钥时，# 对应的H.
2021-06-01 17:42:39
208
原创 Git相关操作总结
现有的文件夹添加git指向* git init # 先初始化* git remote add origin [email protected]:xxx/xxx.git #添加远程仓库* git add * # 文件加入版本控制* git commit -m 'init' # 提交* git branch --set-upstream-to=origin/master #关键步骤,If you wish to set tracking information for this branch you
2021-06-01 17:35:12
83
原创 Nginx配置本地文件代理以及反向代理配置
server { #默认端口80 http协议 listen 80; server_name local.test.com;//域名 接口域名 或者 自己取的 #443端口https协议 listen 443 ssl; server_name local.test.com; # ssl_certificate server.crt; # ssl_certificate_key server.key; # s.
2021-05-28 16:07:46
1383
原创 charles抓包工具使用
一、抓取https配置 Help => SSL Proxying=>Install Charles Root Certificate Proxy => Proxy Setting =>勾选 Enable transparent HTTP proxying Proxy => SSL Proxying Settings => SSL Proxying =>include add=> Host www.xxx.co...
2020-11-27 14:24:38
117
原创 HbuilderX 在Mac 调试安卓设备
HbuilderX Mac 调试安卓设备1，检查 mac文件夹下.android文件夹下有没有adb_usb.ini文件，如何没有就新建adb_usb.ini文件2，点击左上角苹果图标--关于本机--系统报告--USB--厂商 ID： xxxxxx，将厂商ID的内容复制，3，打开终端vi~/.android/adb_usb.ini将Mac product ID 贴到这个文件里面4.链接usb 运行到手机或者浏览器 此时可见安卓设置出现 选择运行 如果运行不成功，他会给提示 按...
2020-11-17 11:50:57
2992
原创 webpack全面配置js、css以及git提交规范
eslint和 stylelint基于vscode编辑器进行配置一、eslintvscode安装插件：eslint插件 prettier-code-formatter插件 全局安装eslint插件：sudo npm install eslint -g 初始化.eslintrc.js：eslint —init 根据提示指定 配置.eslintrc.js文件 ，定制化规则rules: 参看http://eslint.cn/docs/rules/ ...
2020-10-31 16:43:15
808
原创 坑啊 ios已经废弃beforeunload事件
ios不支持beforeunload事件！！！ 请用pagehide作为代替，找了半个小时才找到源头https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_re...
2019-12-05 16:31:45
1573
原创 一维数组二维化 且自定义二维长度
function chunk(arr,size ) {let num = [];for(let i=0;i<Math.ceil(arr.length/size);i++){let start = i*size;let end = start+size;num.push(arr.slice(start,end));}return num;};let ar...
2019-11-15 16:29:15
351
原创 js里面的“&&”、“||”、 “!!”
1.javascript中“&&”运算符运算法则如下：如果&&左侧表达式的值为真值，则返回右侧表达式的值；否则返回左侧表达式的值。多个&&表达式一起运算时，返回第一个表达式运算为false的值，如果所有表达式运算结果都为true，则返回最右侧一个表达式运算的值。const aa = false;const bb = {name:'xiao...
2019-02-15 17:07:45
1201
原创 vue 非父子组件传值
页面A <template> <div class="hello"> <h1 @click="store">{{ msg }}</h1> </div></template><script>export default { name: 'myHel
2018-03-05 15:54:27
520
原创 在vue里面设置全局变量或数据
const MyPlugin = { // install方法是必需的// // 包含两个参数：Vue 构造器，一个可选的选项对象 install(Vue, options) { Vue.prototype.test = "test" ; Vue.prototype.wechat = "my wechat!"; }};exp...
2018-03-02 14:12:04
8169
原创 h5里面设置了无痕浏览不能存local的问题
/** * 设置键值 */function setStorage(key, value) { if ($.isPlainObject(key)) { $.each(key, set); } else { try { localStorage[key] = value; } cat
2018-01-23 18:04:51
635
转载 快速实现复制到剪贴板
p>点击复制后在右边textarea CTRL+V看一下p>type="text" id="inputText" value="测试文本"/> type="button" id="btn" value="复制"/> rows="4"> script type="text/javascript">var btn = document.getElementById('btn
2017-11-24 16:16:28
377
原创 将对象数组按照每一组对象的key值大小进行字典顺序(ASCII值大小)升序排序
将对象数组按照每一组对象的key值大小进行字典顺序(ASCII值大小)升序排序
2017-11-10 10:30:24
1963
原创 Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。var box=document.getElementById('box'); // 获取元素alert(box.getBound
2017-11-05 22:24:53
716
原创 unix时间戳和普通时间戳 转换
unix时间戳是从1970年1月1日（UTC/GMT的午夜）开始所经过的秒数，不考虑闰秒，以秒为单位new Date().getTime()获得的是以毫秒为单位的js中获取unix时间戳的方式Math.round(new Date().getTime()/1000)getTime()返回数值的单位是毫秒unix时间戳转化成毫秒var unixtime=1
2017-11-01 12:55:40
4555
转载 获取和修改伪元素样式
//获取var shockwave = document.getElementsByClassName('shockwave')[0];修改伪元素样式方法一shockwave.classList.add('test');//给伪类添加样式.test::after{ content: ''; position: absolute; top:
2017-09-12 14:48:43
2430
原创 数组里面包含数组 数据渲染
html部分代码： class="zz"> $.getJSON('aaa.json', function(data){ console.log(data); var chapter for (var i = 0; i ; i++) { var a =''; for ( var j = 0 ; j ; j
2017-08-23 10:35:08
2483
原创 修改时间戳为 年-月-日格式
//修改时间戳 function formatDate(time) { let d = new Date(time); let dformat = [ d.getFullYear(), checkTime(d.getMonth() + 1), checkTime(d.getDate()) ].join('-'); return dforma
2017-08-23 10:33:07
945
原创 vuex学习保留
import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex);export default new Vuex.Store({ state:{ //state 保存所有组件都可能用到的 /兄弟组件 用到的 //详情信息 show:false, distance:0,
2017-08-22 10:45:27
415
转载 打印html时设置去掉页眉页脚 简单一行代码搞定（记录一下）
media="print"> @page{ size: auto; margin: 0mm; }
2017-08-21 15:39:00
4967
3
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人