![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端工程化
文章平均质量分 50
good法乐
太阳强烈、水波温柔
展开
-
CSS模块化方案
CSS模块化模块化概念模块化是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程,有多种属性,分别反映其内部特性。 ---- 就是把一个大的功能拆解成小功能为什么需要模块化相对独立性 – 避免作用域污染通用性 – 可复用互换性 – 可按需加载,从而优化性能关注分离概念、不同的技术做不同的事情现有的 CSS 方案// app.css.button { width: 100px; height: 20px; background: 'red';}//原创 2022-04-03 17:19:21 · 3160 阅读 · 2 评论 -
关于vue回车事件的刷新页面问题解析
页面文本框在点击回车时会刷新页面,而且只有第一次会触发刷新点击回车按钮后不仅页面会刷新,并且路由多了一个问号http://localhost:8080/?#这是因为在当前页面元素中只有一个文本框时,点击回车时会自动提交表单;W3C 标准中有如下规定:When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request原创 2021-02-22 16:09:54 · 1320 阅读 · 3 评论 -
向JavaScript对象添加键/值对?
var obj = {key1: value1,key2: value2};1、使用点表示法:obj.key2 = “value2”;2、使用方括号符号:obj[“key2”] = “value2”; let ExpendObject = {} //扩展属性对象 for (let i in this.ExpendObjectData) { //方括号方法把数组中的值插入到对象 ExpendObject[ this.Exp原创 2020-11-16 11:20:40 · 315 阅读 · 0 评论 -
get请求下载文件
axios.get('/system/platform/feedbackManager/findBuyUserFedbackPage', { responseType: 'blob', params: data }).then(res => { let url = window.URL.createObjectURL(new Blob([res.data])); let link = documen.原创 2020-11-09 15:31:30 · 1480 阅读 · 0 评论 -
vue项目PC端如何适配不同分辨率屏幕
配置前言项目构建:基于vue-cli3构建,使用postcss-px2rem px2rem-loader进行rem适配实现原理:每次打包,webpack通过使用插件postcss-px2rem,帮我们自动将px单位转换成rem单位前方有坑:UI框架部分组件使用JavaScript将css作为内联样式直接写在html标签内,打包适配时不会读取相关css,所以要配置相关样式,在style中需要" !important "进行样式覆盖。第一步,安装postcss-px2rem及px2rem-loader原创 2020-10-19 11:16:38 · 8368 阅读 · 9 评论 -
使用伪类选择器修改radio的默认背景色
//使用伪类覆盖单选框的样式 .information_bootom { opacity: 0.8; .readio_top { margin-bottom: 1.85vh; margin-top: 1.85vh; font-size: 16px; font-family: Mi...原创 2020-10-15 15:41:52 · 858 阅读 · 1 评论 -
Nprogress的配置与使用
github地址:nprogressNprogress安装npm install --save nprogress在项目中引入在main.js中引入要使用的nprogress//导入进度条插件\js与cssimport Nprogress from 'nprogress'import 'nprogress/nprogress.css'基本用法Nprogress.start()...原创 2019-12-31 15:05:32 · 6776 阅读 · 0 评论 -
Vue 脚手架与element-ui
1、Vue 脚手架的基本用法Vue 脚手架用于快速生成 Vue 项目基础架构,其官网地址https://cli.vuejs.org/zh/使用步骤1. 安装 3.x 版本的 Vue 脚手架:npm install -g @vue/cli基于3.x版本的脚手架创建vue项目// 1. 基于 交互式命令行 的方式,创建 新版 vue 项目 vue create my-project/...原创 2019-12-21 22:17:04 · 379 阅读 · 0 评论 -
Vue 单文件组件
1、传统组件的问题和解决方案1、问题1. 全局定义的组件必须保证组件的名称不重复2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \3. 不支持 CSS 意味着当 HTML 和 JavaScript 组件化时,CSS 明显被遗漏4. 没有构建步骤限制,只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器(如:Babel)2、解决方案针对...原创 2019-12-21 22:02:36 · 154 阅读 · 0 评论 -
webpack
1、webpack概述webpack 提供了友好的模块化支持,以及代码压缩混淆、处理 js兼容问题、性能优化等强大的功能,从而让程序员把工作的重心放到具体的功能实现上,提高了开发效率和项目的可维护性目前绝大多数企业中的前端项目,都是基于 webpack 进行打包构建的。2、 webpack 的基本使用1、在项目中安装和配置 webpack① 运行 npm install webpa...原创 2019-12-21 21:47:34 · 103 阅读 · 0 评论 -
ES6模块化-使用export/import
Node.js 中通过 babel 体验 ES6 模块化ES6 模块化的基本语法1. 默认导出 与 默认导入默认导出语法 export default 默认导出的成员默认导入语法 import 接收名称 from ‘模块标识符’2. 按需导出 与 按需导入按需导出语法 export let s1 = 10按需导入语法 import { s1 } from ‘模块标识符’3....原创 2019-12-21 20:55:46 · 328 阅读 · 0 评论