网站前端

SVG、JavaScript、CSS、HTML、各种框架。Web前端开发是从美工演变而来的,名称上有很明显的时代特征。在互联网的演化进程中,Web 1.0时代,网站的主要内容都是静态的,用户使用网站的行为也以浏览为主。

各种各样的框架让人目不暇接,新技术层出不穷。让我们这些前端狗情何以堪。

目前web前端工程师的年薪待遇平均在10万以上,高级HTML前端工程师年薪达30—50万,很多企业对于与web前端相关的技术职位更是求贤若渴。

如何移除 input type="number" 时浏览器自带的上下箭头?

2023年08月28日

最近在使用 input 数字输入的时候,总是会出现一个上下箭头,截图如下:如果这个不明显,可以看这个:具体代码如下:<input id="quantity" type="number" class="qty border-0" name="quantity" max="10" step="1" pattern="[0-9]*" value="1" size="4" min="1">如果要去掉 in...

sass-loader.js doesn't exist

2023年08月13日

在使用 Webpack 的时候出现了如下错误:sass-loader.js doesn't exist错误截图如下:出现错误的原因:sass-loader 的主要作用是:加载 Sass/SCSS 文件并将他们编译为 CSS。我们可以通过 npm 来安装 sass-loader。解决方案:通过 npm 来安装 sass-loader,具体命令如下:npm install sass-loader sa...

postcss-loader.js doesn't exist

2023年08月13日

在使用 Webpack 的时候出现了如下错误:postcss-loader.js doesn't exist出现错误截图如下:出现问题的原因:没有安装 postcss-loader,同时一个使用 PostCSS 处理 CSS 的 loader 插件。解决方案:为了使用本 loader,我们需要安装 postcss-loader 和 postcss:npm install --save-dev po...

css-loader.js doesn't exist

2023年08月13日

使用 Webpack 的时候,出现了如下错误:css-loader.js doesn't exist具体错误截图如下:出现问题的原因:缺少 css-loader,通过 npm 安装 css-loader。解决方案:通过 npm 安装 css-loader,具体命令如下:npm i css-loader参考资料:1、npm - css-loader其它相关推荐:1、ts-loader.js does...

ts-loader.js doesn't exist

2023年08月13日

今天在使用 webpack 的时候,出现了如下错误:ts-loader.js doesn't exist出现问题的原因:没有安装 webpack 的 TypeScript 加载器。解决方案:安装 webpack 的 TypeScript 加载器,执行如下命令:npm i ts-loader问题解决。参考资料:1、npm - ts-loader其它相关推荐:1、tsconfig.json files...

tsconfig.json files 参数解释

2023年08月11日

最近看到项目的 tsconfig.json 文件,内容如下:{ "compilerOptions": { "allowSyntheticDefaultImports": true, "noImplicitAny": true, "module": "es6", "target": "es5", "allowJs": true }, "files": [ "src/_base.ts", ]}找了一下...

禁止别人调试自己的前端页面代码

2023年08月02日

为啥要禁止?由于前端页面会调用很多接口,有些接口会被别人爬虫分析,破解后获取数据为了 杜绝 这种情况,最简单的方法就是禁止人家调试自己的前端代码无限 debugger前端页面防止调试的方法主要是通过不断 debugger 来疯狂输出断点,因为 debugger 在控制台被打开的时候就会执行由于程序被 debugger 阻止,所以无法进行断点调试,所以网页的请求也是看不到的基础代码如下:/** *...

css media 查询屏幕大小划分

2023年07月26日

在使用 css 媒体查询的时候,屏幕大小划分是一个很头疼的问题,参考了其它项目对于屏幕大小的划分,方案如下:@media (min-width: 576px) {}@media (min-width: 768px) {}@media (min-width: 992px) {}@media (min-width: 1200px) {}@media (min-width: 1400px) {}@med...