- 博客(211)
- 资源 (9)
- 收藏
- 关注
RSS订阅
原创 安装vue-cli2和3以及创建vue2和vue3项目的步骤及区别
安装vue-cli2和3以及创建vue2和vue3项目的步骤及区别，干货！！！
2023-01-30 10:52:19
3602
原创 js blob流和base64，以及file和base64的相互转换
首先，file文件转换为base64，得到base64格式图片var reader = new FileReader();reader.readAsDataURL(this.files[0]);reader.onload = function(){ console.log(reader.result); //获取到base64格式图片};base64转换为blob流funct...
2019-07-04 10:12:20
29782
6
原创 vue-router的实现原理hash/history、导航守卫、导航解析流程
vue-router的实现原理hash/history、导航守卫、完整的导航解析流程
2023-06-08 18:54:04
1540
原创 从浏览器输入地址到页面渲染都经历了哪些过程
作为前端开发工作者，要对浏览器请求URL到渲染非的了解，在这里，我们就来详细的看看页面渲染出来到底经历了哪些过程。
2023-06-07 16:29:04
1529
原创 http缓存详解
浏览器缓存包括HTTP 缓存、cookie、localstorage 、sessionStorageHTTP 缓存通过设置请求和响应的header参数，来实现HTTP 缓存HTTP 缓存分为强制缓存和协商缓存强制缓存：不向服务器发送请求，直接从缓存中读取资源协商缓存：在使用本地缓存前，先向服务器发送请求，服务器会根据请求的request header的一些参数判断是否读取缓存，是，则返回304状态，并带上新的response header通知浏览器从缓存中读取资源。
2023-06-07 10:44:30
1234
原创 vue不同环境打包配置不同 vue环境变量配置
（即每个环境对应变量的变量值都是一样的时候，则可以将变量定义在公用的.env文件中，而对应每个环境的 .env.xxx文件中则不需要再重复定义此变量）.在.env.xxx 文件中只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量会通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。vue-cli-service build --mode test :命令中的test对应的是 .env.xxx 文件的后缀名，如果也找不到.env.test文件，则打包报错。
2023-03-15 16:33:29
4402
1
原创 webpack基本使用
基本打包命令开发环境指令：webpack ./src/index.js -o ./build/built.js --mode=development webpack以./src/index.js为入口文件开始打包，打包后输出到./build/built.js生产环境指令：webpack ./src/index.js -o ./build/built.js --mode=production webpack以./src/index.js为入口文件开始打包，打包后输出到./build/built.j
2021-12-30 10:25:47
740
原创 Vue 中 scoped 样式穿透
在vue中有公共样式，有第三方样式，直接在mian.js中引入，在组件中scoped写的样式，需要在组件中局部修改公共样式，而又不想去除scoped属性造成组件之间的样式污染。有哪些方法呢？办法一：使用::v-deep操作符或者/deep//deep/ .el-form-item__label { float: none;}::v-deep .el-form-item__label { float: none;}办法二：使用>>>外层 >>>
2021-11-23 16:07:59
884
原创 移动端适配flexible.js
1、什么是flexible.js是一个终端设备适配的解决方案。是一个用来适配移动端的javascript框架。根据宽度的不同设置不同的字体大小，样式间距都使用rem作为单位，不同屏幕大小适配不同的样式。2、flexible.js 做的三件事动态改写标签给元素添加data-dpr属性，并且动态改写data-dpr的值给元素添加font-size属性，并且动态改写font-size的值如果没有设置viewport，会动态生成<meta name="viewport" content="
2021-11-19 11:30:51
1763
原创 VSCode自动将px转化为rem的插件cssrem
在做移动端适配的时候，经常需要将设计图上的px单位转化为rem，那么怎么能快速计算呢？这里我说下我常用的编译器VScode 它里面有个插件叫cssrem，用它就可以在我们输入px值后自动转换rem安装插件在vsCode中搜索，cssrem,点击安装修改配置参数打开文件->首选项->设置搜索cssrem,设置root font size修改完参数后我们只要输入px值插件就会自动算出rem值，效果如下图：...
2021-11-18 11:07:25
7416
1
原创 在vue中引入less，报错TypeError: loaderContext.getResolve is not a function
在vue中引入less步骤下载依赖npm install less less-loader --save-dev引入安装完成后打开 build目录，修改 webpack.base.conf.js 中的相关配置：在 module.exports 中找到 module 中的 rules 数组module.exports = { ... ... module: { rules: [ {...}, {...}, { test: /\.le
2021-11-17 11:19:41
732
原创 vue移动端项目解决点击事件3秒延迟问题-fastclick.js
从点击屏幕上的元素到触发元素的click事件，移动浏览器会有大约 300 毫秒的等待时间。vue中引用fastclick.jsnpm install fastclickimport Fastclick from "fastclick"Fastclick.attach(document.body)
2021-11-16 17:36:36
1520
原创 在vue中引入打印插件PrintJs
插件文件引入import printJS from "@/plugin/print-js";样例UI用的是ElementUI<el-row class="btnInfo"> <el-button class="submitBtn" type="primary" @click="beforePrint"> 批量打印预览 </el-button></el-row><el-dialog title="打印预览" :vis
2021-11-16 14:48:54
1164
1
原创 IE上input文本框聚焦后重新赋值，光标移动到最左端
直接上方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
2021-04-21 18:20:09
880
原创 在vue项目中千分位展示输入金额，获取金额千分位，金额大写的方法
实现效果：在用户输入完成input失焦的时候，input文本框中显示的是千分位格式的金额；在用户再次聚焦的input文本框时，文本框中展示的是正常的金额值，用户可以修改金额，失焦的时候再次千分位展示。思路：用两个变量，一个变量负责展示，一个变量存储实际的值，保证在任何情况下，实际值不受影响，展示按需求去展示main.js中引入公共方法import validate from '@/utils/validate';Vue.prototype.$validate = validateVue
2021-04-21 18:08:25
6468
原创 父子组件与缓存
最近遇到一个很恶心的问题，就是路由乱跳，用的elementUI的顶导航和侧导航，陆续出现导航折叠问题，获取导航路径为空问题，最后，把结构拿出来整理，发现又是一个小问题引起的大bug…路由结构[{ path: '/login', name: '/login', component: login }, { path: '/', name: 'layout', component: () => import ('@/views/layout/index.vue'
2020-12-05 19:12:14
807
原创 vue中通过Export2Excel导成excel详细步骤
在vue项目中有导出Excel表格的需求，并且需要自适应宽度在前端项目中导出Excel表格，Vue.js确实可以实现，亲测具体实现步骤为:
2020-11-18 18:44:31
875
原创 elementUI的Table分页多选框
目的：实现进入页面显示默认的选中项，在用户重新选择后，将选择的和取消选择的数据提交给后台；这里涉及到一个分页的问题，表格是可分页的表格，所以要存储用户的选项1.element-ui的table表格的多选框默认选中data(){ return{ tableData:[],//table数据 }},watch:{ tableData(val){ this.$nextTick(()=>{ this.tableData.forEach(row => {
2020-11-18 18:23:46
2675
原创 Vue.js中v-for和v-if用计算属性代替
近期用到elementUI里的table表格，但是循环渲染列的时候，想根据条件渲染列，无值不渲染，所以用到了v-if和v-for直接上案例需求是，有一个tableData，是一个对象数组，包含了key6,key7,key8…key26的值，但是有的值为null，就是列表的某项全部无值，展示的时候，key6,…的名称是keyInd相对应的中文<el-table-column :prop="'key'+(index+6)" :label="item" v-for="(item,index) in
2020-09-07 17:37:01
1602
Export2Excel.js导出excel
2020-11-18
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人