首页
写过的文章
Search
1
mock的基本用法
718 阅读
2
js的数组常用方法
693 阅读
3
cnpm安装教程
565 阅读
4
能有效解决问题的提问方法2.0
554 阅读
5
Vue、git指令
490 阅读
默认分类
JavaScript
Vue
TypeScript
登录
Search
标签搜索
底部导航
tabbar
底部导航栏
vue3隐藏底部导航栏
vue3隐藏tabbar
网页
黑白
网页黑白
cnpm安装
cnpm
Z的故事
累计撰写
23
篇文章
累计收到
73
条评论
首页
栏目
默认分类
JavaScript
Vue
TypeScript
页面
写过的文章
搜索到
23
篇与
Zuiet
的结果
2022-09-16
能有效解决问题的提问方法2.0
转载至 萧井陌 萧井陌不会提问就很难通过问问题解决问题,失败的提问无论对于你还是对于看问题的人来说是严重的身心伤害。我不常问问题,但我是身经百战了,见的低质量问题太多了,今天我感觉很有必要传授一点提问的经验。先来看看常见的低效做法这里复现一下通常情况下,大家提问前的场景想做一件事设计一套方案(或者不设计方案,先尝试想一些看起来有用的事)按方案(直觉)开始实际去做做到某一步的时候被一个问题卡住了自己想办法尝试解决发现自己解决不了,就找人问在这之后,很多人提问时,我往往能够发现这样一些问题信息不全(只给出自认为有问题的地方,不给出完整信息)目的不明确(声称目的是想做一件事,其实是想通过这件事达到其他真正的目的)沉迷于细节(自己解决问题的过程中钻牛角尖,拘泥于不重要的细节,导致不反复提问就无法解决问题,浪费时间)提供不完整或不实信息(为了面子,或者出于对对方的不完全信任,隐藏或编造某些信息,导致问题解决不了)一个典型的反面例子:[还未学会正确提问的楼主]: 萧大 你有web服务器 方面的资料么 想用Python 构建一个 web服务器 [萧井陌]: 打开百度 输入 python web 服务器 做个预研再来问人吧....... 不要把别人当搜索引擎[还未学会正确提问的楼主]: 我知道 搜索过 不会犯 这种低级错误 都老司机了 我想让你推荐个 比较系统的web服务器 理论上的书籍之类的 [萧井陌]: 你意思是你想造一个web服务器? 那为啥不能直接问呢?[还未学会正确提问的楼主]: 是的 想造一个简单的 web服务器 轮子 [萧井陌]: 你就搜 用python写web服务器或者直接看flask初版源码[还未学会正确提问的楼主]: 搜了 找到一个老外的 伯乐网翻译的 正在看 [萧井陌]: 那你还有什么问题呢?[还未学会正确提问的楼主]: 想问你 有木有更系统一点的 [萧井陌]: 没有 这个世界上最系统的东西就是教育部的大纲、教材和配套习题 因为政府收税 并且有责任心 如果你能把你的话一次性描述清楚还需要这么麻烦地浪费双方的时间吗?「我想自己用python造一个web服务器的轮子,通过搜索我找到了一个外国教程的中文翻译版,我想问一下是否有更系统的资料?」 你如果这样问不就可以一次性解决你的问题了 你开心别人也开心 这样的话我就可以直接回你 没有 而不用诱导性地问出所有的前置条件 不要觉得我是在敷衍打压你这是很重要的技能 如果你能认真思考这段话,将会得到一笔宝贵的财富接下来看看有效的做法在一个双赢的提问中,需要注意以下原则尽量完整的给出问题相关信息,不要遗漏和隐瞒让自己的眼光回到全局,而不要局限在细节中不要忘记自己的最初目标,以免解决问题的过程中走偏具体来说,对于我(或是其他求助对象),作为协助解决问题的一方,这些信息是必须要你来提供的:1,你最初的目的是什么?(你最终想做一件什么事?)你的做法可能是错误的,描述需求可以帮助他人发现你南辕北辙的解决方案。你的需求可能是错的,给出目的可以帮助他人发现你错误的需求。2,在你的计划中,你打算通过怎样一系列的步骤来达成这个目的?描述思路有助于他人搞懂你在做的事情、搞懂你遇到的问题你解决问题的想法和思路可能是错的,描述清楚有助于发现错误3,你在这个过程中,进行到哪一步的时候遇到了什么问题?尽可能详尽的给出遇到这个问题时的相关信息(包括你在试图解决> 的过程中得到的信息)对具体信息的描述可以帮助他人分析具体问题,所以要给出错误的具体、完整的信息,而不是残缺的截图或者零散的几句描述尽可能的描述你的操作步骤,以便让对方可以重现出你遇到的错误,这样才能针对具体的问题进行进一步的解答4,给出具体的完整可执行(或可重现问题)的代码(如果有的话)如果不尽量给出完整、简化、可运行、可重现问题的代码,对方很难定位具体问题,也就无从解决问题了接下来就尝试用这个工具修正一下上面的错误例子:你最初的目的是什么?(你最终想做一件什么事?)想要用python造一个web服务器的轮子你打算通过怎样一系列的步骤来达成这个目的?先尽可能找到更好的资料然后照着资料完成这个项目你在这个过程中,进行到哪一步的时候遇到了什么问题?尽可能详尽的给出遇到这个问题时的相关信息(包括你在试图解决的> > 过程中得到的信息)在进行第一步的时候,上网找了一些资料目前正在看一份翻译的国外材料(给出这份材料)对这份资料系统性不够满意,想要一份更系统的材料给出具体的完整可执行(或可重现问题)的代码(如果有的话)(空)实际上,这个方法不仅仅只能帮助你向他人求助经过之前两年对提问表格的推广,收到很多反馈说,在利用这个工具提问的过程中直接就想明白了自己的问题。并不是自己没能力解决问题,而是没能把思路理清楚这也算是一个意外收获
2022年09月16日
554 阅读
18 评论
0 点赞
2022-09-16
Vue-Vant 移动端如何适配
移动端适配第一步:引入 flexible.js 文件打开终端,输入 npm i lib-flexible 就会生成一个 lib-flexible 文件夹将里面的 flexible.js 复制到项目 src 文件中即可。作用:用于设置 rem 基准值。或者直接复制下面的 flexible.js 文件内容即可(function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.querySelector('meta[name="viewport"]'); var flexibleEl = doc.querySelector('meta[name="flexible"]'); var dpr = 0; var scale = 0; var tid; var flexible = lib.flexible || (lib.flexible = {}); if (metaEl) { console.warn('将根据已有的meta标签来设置缩放比例'); var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/); if (match) { scale = parseFloat(match[1]); dpr = parseInt(1 / scale); } } else if (flexibleEl) { var content = flexibleEl.getAttribute('content'); if (content) { var initialDpr = content.match(/initial\-dpr=([\d\.]+)/); var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/); if (initialDpr) { dpr = parseFloat(initialDpr[1]); scale = parseFloat((1 / dpr).toFixed(2)); } if (maximumDpr) { dpr = parseFloat(maximumDpr[1]); scale = parseFloat((1 / dpr).toFixed(2)); } } } if (!dpr && !scale) { var isAndroid = win.navigator.appVersion.match(/android/gi); var isIPhone = win.navigator.appVersion.match(/iphone/gi); var devicePixelRatio = win.devicePixelRatio; if (isIPhone) { // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案 if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { dpr = 3; } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){ dpr = 2; } else { dpr = 1; } } else { // 其他设备下,仍旧使用1倍的方案 dpr = 1; } scale = 1 / dpr; } docEl.setAttribute('data-dpr', dpr); if (!metaEl) { metaEl = doc.createElement('meta'); metaEl.setAttribute('name', 'viewport'); metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); if (docEl.firstElementChild) { docEl.firstElementChild.appendChild(metaEl); } else { var wrap = doc.createElement('div'); wrap.appendChild(metaEl); doc.write(wrap.innerHTML); } } function refreshRem(){ var width = docEl.getBoundingClientRect().width; if (width / dpr > 540) { width = 540 * dpr; } var rem = width / 10; docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem; } win.addEventListener('resize', function() { clearTimeout(tid); tid = setTimeout(refreshRem, 300); }, false); win.addEventListener('pageshow', function(e) { if (e.persisted) { clearTimeout(tid); tid = setTimeout(refreshRem, 300); } }, false); if (doc.readyState === 'complete') { doc.body.style.fontSize = 12 * dpr + 'px'; } else { doc.addEventListener('DOMContentLoaded', function(e) { doc.body.style.fontSize = 12 * dpr + 'px'; }, false); } refreshRem(); flexible.dpr = win.dpr = dpr; flexible.refreshRem = refreshRem; flexible.rem2px = function(d) { var val = parseFloat(d) * this.rem; if (typeof d === 'string' && d.match(/rem$/)) { val += 'px'; } return val; } flexible.px2rem = function(d) { var val = parseFloat(d) / this.rem; if (typeof d === 'string' && d.match(/px$/)) { val += 'rem'; } return val; } })(window, window['lib'] || (window['lib'] = {})); 第二步:下载 postcss-pxtorem 插件在项目终端或者打开目录所在的cmd,输入插件npm i postcss-pxtorem作用: 是一款 PostCSS 插件,用于将 px 单位转化为 rem 单位.下载完成后,在项目根目录新建一个 postcss.config.js 文件,在文件中复制以下内容即可.// postcss.config.js module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 37.5, propList: ['*'], }, }, }; 第三步:在 main.js 文件内引入 flexible.js 移动端适配文件,即可完成适配import './utils/flexible' // 移动端适配文件
2022年09月16日
363 阅读
0 评论
0 点赞
2022-09-16
Sass基本用法
什么是SassSASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护变量所有变量以$开头$font_size: 12px; .container { font-size: $font_size; } 如果变量嵌套在字符串中,需要写在#{}中$side : left; .rounded { border-#{$side}: 1px solid #000; } 嵌套层级嵌套.container{ display: none; .header{ width: 100%; } } 属性嵌套,注意,border后需要加上冒号:.container { border: { width: 1px; } } 可以通过&引用父元素,常用在各种伪类.link{ &:hover{ color: green; } } mixin简单理解,是可以重用的代码块,通过@include 命令// mixin @mixin focus_style { outline: none; } div { @include focus_style; } 编译后生成div { outline: none; } 还可指定参数、缺省值// 参数、缺省值 @mixin the_height($h: 200px) { height: $h; } .box_default { @include the_height; } .box_not_default{ @include the_height(100px); } 编译后生成.box_default { height: 200px; } .box_not_default { height: 100px; } 继承通过@extend,一个选择器可以继承另一个选择器的样式。例子如下// 继承 .class1{ float: left; } .class2{ @extend .class1; width: 200px; } 编译后生成.class1, .class2 { float: left; } .class2 { width: 200px; } 运算这个就直接上代码.container{ position: relative; height: (200px/2); width: 100px + 200px; left: 50px * 2; top: 50px - 10px; } 编译后生成.container { position: relative; height: 100px; width: 300px; left: 100px; top: 40px; } 插入文件@import 来插入外部文件@import "outer.scss" 也可插入普通css文件@import "outer.css" 自定义函数通过@function 来自定义函数@function higher($h){ @return $h * 2; } .container{ height: higher(100px); } 编译后输出.container { height: 200px; } 注释两种风格的注释// 单行注释,编译后消失 /* 标准的CSS注释,会保留到编译后的代码中 */ 如果重要的注释,压缩编译后还想保留,可在 /* 后面加上 !/*! 重要注释,压缩编译也不会消失 */ 欢迎评论,纠正,改错,共同学习,一起进步!
2022年09月16日
339 阅读
0 评论
0 点赞
2022-09-13
git使用
git是什么git是分布式版本控制工具,可以管理项目代码,团队协作开发注意:版本指的不是文件,指的是【修改】!!!!!分布式:不依赖于某个服务器,可以单独在某个电脑上操作集中式:所有电脑或终端都依赖于某个中心服务器,如果中心服务器宕机了,则整个网络瘫痪了工作方式:命令行和GUI图形界面方式【软件操作】版本控制工具:git:分布式svn:集中式git环境看这里, 点这里官方下载地址安装运行电脑空白处右键--选择git bash--打开命令行(就是一个黑窗口)git常用命令查看电脑用户名和邮箱是否配置git config --list 配置用户名 git config --global user.name '用户名' 配置邮箱: git config --global user.email 'xxx@88.com' 初始化git git init 查看git状态 git status 添加到暂存区 git add 要添加的文件名 提交到本地仓库分支 git commit -m '要提交的说明' 例如:git commit -m '创建了index.html和index.js文件' 接下来git推送远程,需要去创建一个属于自己的远程仓库创建远程仓库首先要注册一个gihub或gitee帐号(这里演示github)注册仓库完成后接下来就是创建和配置公钥和密钥ssh-keygen -t rsa -b 4096 -C "邮箱名@126.com" 敲3回车 生成目录:c:/Users/你的用户名子/.ssh/id_rsa.pub 复制里面的全部内容到远程的 https://github.com/settings/keys id_rsa:密钥 留给自己 id_rsa.pub:公钥 放在远程仓库 密钥创建好就可以连接到远程了测试是否能连接到远程 ssh -T git@github.com 返回结果:Hi w3cteching! You've successfully authenticated, 开始连接远程 git remote add origin 这里的代码是点击仓库里绿色按钮code有个SSH下面有个连接复制到这上面 例:git remote add origin git@github.com:Zuiet/2109A.git 查看是否连接成功: git remote -v 然后将代码推送到远程如果git push推送失败,通常是远程仓库中有本地没有的文件代码,或远程仓库相同分支下的相同文件被你的队员改过,失败,解决方案:先拉取,再推送,如果不出现问题就执行下面代码!拉取:远程--本地 git pull origin master --allow-unrelated-histories 推送:本地--远程 git push -u origin master 如果无法打开github页面,因为是国外的网站时好时坏!可以下载一个火绒安全在打开的记事本后面加上 140.82.113.4 github.com在使用的时候出现BUG或者认为文档里那个模块修改的欢迎评论区指正
2022年09月13日
409 阅读
0 评论
0 点赞
2022-09-09
使用webpack搭建TypeScript
搭建ts的webpack第一步: 新建一个文件夹比方说叫WebpackTs,文件夹里面放如src文件夹,里面放入ts文件第二步: 安装webpack到本地(在WebpackTs这一层)指令: npm install webpack webpack-cli -D 第三步: 要使用webpack搭建就需要他的小伙伴,建一个webpack.config.js文件(先放一边等下再写)第四步: 在package.json中 设置打包目录"scripts":{ "text":"echo \"Error: no test specified\" && exit 1", "build":"webpack", "serve":"webpack serve" } 第五步: 配置webpack.config.js文件const path = require('path') module.export = { entry:"./src/main.ts", //入口文件 output: { //输出文件都放到dist目录下 path: path.resolve(__dirname,"./dist"), //所有的依赖模块合并输出到一个文件 filename:"bundle.js" } } 第六步: 定义ts文件舒写执行代码(后面要测试webpack环境是否搭建成功)src文件夹里面放两个ts文件main.ts和math.ts,(代码放一起了注意区分!)// math.js export function sum(num:number, num2:number){ return num1 + num2 } // main.js import { sum } from "./math" //这里插一句嘴(小声) Ts变量定义的时候要注意区分下,他的类型是小写的string而不是大写的String // string: Typescript 中的字符串类型 // String: Javascript 的字符串包装类的类型 const message: string = "hello TypeScript" console.log(sum(20, 30)) 这个时候感觉自己搭建好了打包一下,报错了!!!!查询过后原因是没有办法解析ts文件//报错信息 You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. see https://webpack.js.org/comcepts#loaders那就浅安装一个插件解决一下吧:指令:npm install ts-loader typescript -D 在config.js文件里配置一下在const path = require('path') module.export = { entry:"./src/main.ts", //入口文件 output: { //输出文件都放到dist目录下 path: path.resolve(__dirname,"./dist"), //所有的依赖模块合并输出到一个文件 filename:"bundle.js" } resolve:{ //文件不让加后缀名,但是又找不到所以需要这个配置一下 extensions:[".ts"] } module: { rules: [{ test:/\.ts$/, loader:'ts-loader' }] } } 准备完毕以后,启动!然后就又报错了报错信息: error while parsing tsconfig.json 这是因为通过ts-loader编译文件的时候 需要一个toconfig文件那就在浅安装一个插件吧:指令:tsc --init 然后在src外部建一个index.html文件用来当作主页面 但是这样每次代码书写完成后都要去更新重复npm run serve步骤无奈....在安装一个插件吧:指令: npm install webpack-dev-server -D要想让html文件里是不需要引入外部文件,这时候需要告诉他默认模板是谁,所以在安装一个插件!!!!! 指令: npm install html-webpack-plugin -D 安装好以后更新我们的webpack.config.jsconst path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') //引入 module.export = { entry:"./src/main.ts", //入口文件 output: { //输出文件都放到dist目录下 path: path.resolve(__dirname,"./dist"), //所有的依赖模块合并输出到一个文件 filename:"bundle.js" } resolve:{ //文件不让加后缀名,但是又找不到所以需要这个配置一下 //但是这里不加js的话 他只会解析ts 所以还会报错 extensions:[".ts",".js",".cjs",".json"] }, module: { rules: [{ test:/\.ts$/, loader:'ts-loader' }] }, plugins: [ new HtmlWebpackPlugin({ template:"./index.html" }) ] } 执行启动!!!! 完美但是再写的过程当中可能不是那么的一番风顺(比如上面代码就缺失了mode,因为粗心大意)然后这个报错信息,包括处理的过程也写了下来!The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.第一段代码说:'mode'选项没有被设置,webpack将会为这个值回退到'production'第二段代码说: 设置'mode'选项为'development'或'production',以启用每个环境的默认值。解决方案:第一步: package.json中设置: "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --mode production", "serve": "webpack serve --mode development",//启动方式(也可以dev凭个人习惯了) }, 第二步:webpack.config.js中设置mode const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); //引入 module.exports = { entry: "./src/main.ts", //入口文件 output: {...}, resolve: {...}, module: {...}, plugins: [...], mode:'development' // 设置mode }; 如果在写的过程中,遇到一些疑难杂症,欢迎评论留言!
2022年09月09日
416 阅读
0 评论
0 点赞
1
...
3
4
5