- 博客(40)
- 收藏
- 关注
RSS订阅原创 vue3中keep-alive使用include不生效
Vue3的setup语法糖，导致无法自定义组件name，使用keep-alive是需要name的，所以include不生效。解决这个问题通常有两种方式。
2023-02-07 18:03:57
3524
5
原创 vscode添加标签自动补全
安装扩展程序 Auto Rename Tag通过 File>Preferences>Settings 路径打开 settings.json 文件，添加如下配置 "emmet.triggerExpansionOnTab": true, "files.associations": { "*.vue": "html" }
2022-05-18 15:29:53
1979
原创 vscode自动生成头部注释koroFileHeader
在扩展程序中安装koroFileHeader通过File>Preferences>Settings路径打开settings.json文件在settings.json中添加配置 "fileheader.customMade": { "Author": "xxxxxx", //编辑人 "Date": "Do not edit", //时间 "LastEditTime": "Do not edit", "LastEditors": "xxxxx", .
2022-05-18 15:27:24
153
原创 typescript报错Cannot find name ‘__dirname‘
vite.config.ts中报错 Cannot find name ‘__dirname’解决方案将 “node” 添加到 tsconfig.json 文件中 compilerOptions.types{ "compilerOptions": { ... "types": [ "node" ] ... }}安装@types/nodenpm install @types/node --save-dev...
2022-05-11 11:49:26
2896
2
原创 vscode中配置自定义模板
1. 通过此路径 File>Preferences>User Snippets>New Snippets 可新增模板2. 配置的vue3模板，输入vue3可获取此模板{ "Print to console": { "prefix": "vue3", "body": [ "<template>", "<section></section>", "</template>",
2022-05-10 18:01:48
460
原创 vite中的server.proxy代理
在server中配置proxy server: { host: true, port: VITE_PORT as unknown as number, https: false, proxy: { '/dev': 'http://10.63.80.113:8000' } }配置之后，相当于将实际请求路径替换为 http://10.63.80.113:8000/dev即将proxy对象中的键值加在键名之前vite中的server-proxy官方文档...
2022-03-02 10:34:59
4557
1
原创 Vue中使用normalize重置css样式
1、normalize 优点（1）Normalize.css只是一个很小的css文件，但它在磨人的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset 、Normalize.css是一种现代的、为HTML5准备的优质替代方案。总之，Normalize.css是一种CSS reset的替代方案。（2）作用：保护有用的浏览器样式而不是去掉他们为大部分HTML元素提供一般化的样式修复浏览器自身的bug并保证各浏览器的一致性优化css可用性用注释和详细的文档来解释代码No
2022-02-21 18:17:29
1096
原创 Node多版本管理(nvm)
一、nvm官方文档https://github.com/coreybutler/nvm-windows二、下载安装包nvm-setup.zip下载之后，直接安装即可。会默认识别已安装的node版本三、nvm相关的指令node -v // 查看node版本nvm -h //查看nvm的指令nvm list //查看本地已经安装的node版本列表nvm list available //查看可以安装的node版本nvm install latest //安装最新版本的node
2021-07-09 19:19:08
519
原创 js计算循环耗时-console.time / console.timeEnd
1、定义和用法console.time()方法是作为计算器的起始方法。该方法一般用于测试程序执行的时长。console.timeEnd()方法为计算器的结束方法，并将执行时长显示在控制台。如果一个页面有多个地方需要使用到计算器，可以添加标签参数来设置语法：console.time(label)label可随意命名，console.time和console.timeEnd中label需一致注意：console.time和console.timeEnd要一起使用2、代码示例1、执
2021-06-24 15:51:16
1409
原创 在已有vue项目中添加单元测试
1. 已有项目技术框架 //执行命令npm ls vue查看当前项目中vue版本 `-- [email protected] //执行命令vue -V查看vue-cli版本 @vue/cli 4.5.112. 安装jest vue add @vue/unit-jest执行此命令会自动安装单元测试需要的依赖以及添加相应的配置，执行完成后，在tests文件夹下，编写相应的测试文件即可。vue安装jest文档3. 若使用mocha进行单元测试 vue add @vue/unit-mochavue安装
2021-06-07 15:37:47
658
2
原创 vue中使用moment.js计算时间
1. 安装moment.js npm install moment --save2. 在main.js文件中注册为全局的方法 import moment from 'moment'Vue.prototype.$moment = moment3. 在页面上使用this.$moment().format('YYYY-MM-DD HH:mm:ss') //当前时间this.$moment().subtract(90, 'days').format('YYYY-MM-DD HH:mm:ss')
2021-06-03 15:47:35
967
原创 npm安装报错：源文本中存在无法识别的标记
执行命令npm install --save-dev @vue/test-utils报错如图解决方案：有@符号，需给依赖名加上单引号或双引号npm install --save-dev “@vue/test-utils”
2021-04-27 17:03:20
1628
原创 IE报错Error in v-on handler: “TypeError: 对象不支持此操作
IE11中点击el-menu报错Error in v-on handler: "TypeError: 对象不支持此操作解决方案新建一个js文件，在main.js中引入。注意此js引入需在elementui引入之前。js文件内容入下/* eslint-disable */(function(window) { try { new MouseEvent('test'); return false; // No need to polyfill } ca
2021-04-27 14:01:08
6542
1
原创 基本数据类型与引用数据类型、深拷贝与浅拷贝
一、基本数据类型1. Number 数字类型包括整数和浮点数数值类型转换Number() 将非数值转换为数值类型parseInt() 将数字取整parseFloat() 转换为浮点数toFixed() 方法可把 Number 四舍五入为指定小数位数的数字var num = 4.12345;console.log(num.toFixed()) // 4ES 6 增加了以下两个 Number 对象的方法：Number.isInteger(): 用来判断给定的参数是否
2021-04-21 09:16:51
199
原创 position定位属性：五大类型
一. static 定位默认值，即没有定位，存在于文档流中，占空间设置top, bottom, left, right、z-index不起作用二. fixed 定位：固定定位元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动脱离文档流，不占空间Fixed定位的元素和其他元素重叠三. relative 定位：相对定位相对定位元素的定位是相对其自身正常位置占空间，未脱离文档流相对定位元素经常被用来作为绝对定位元素的容器块四. absolute 定位：绝对定位
2021-04-19 17:41:09
587
1
原创 css设置文本两端对齐
一. 设置text-align: justify，此属性对最后一行文字无效<div class="father-box"> <div class="child-box"> 测试text-align：justify;是否能使文字两端对齐 </div></div><style lang="scss" scoped>.father-box { width: 500px; height: 200px; backgrou
2021-04-16 14:45:50
116
原创 块级或行内元素垂直居中
一、让块级元素垂直居中1.已知或未知元素宽高，利用flex布局，在需居中元素的父元素上设置display：flex; justify-content: center; align-items: center;代码示例：<div class="father-box"> <p class="child-box">父元素display：flex; justify-content: center; align-items: center;</p></div>
2021-04-16 14:12:55
2374
原创 vue-cli2分环境打包
1. 借助cross-env配置环境变量，安装cross-env npm install cross-env –save-dev 2. 在config文件下新建testProduction.env.js文件，内容如下'use strict'module.exports = { NODE_ENV: '"testProduction"', ENV_CONFIG: '"testProduction"'}3. 在config文件下新建prod.env.js文件，内容如下 'use stri
2021-03-24 17:05:03
529
2
原创 elementui中el-row的el-col排列混乱
问题: el-row中el-col排列混乱解决方案：将el-row中元素改为flex布局设置flex-wrap: wrap，避免el-row中元素span之和超过24时挤在一行.el-row{ display:flex; flex-wrap: wrap;}
2021-02-18 15:17:10
12082
4
原创 vsCode配置vue模板
步骤一：打开vue.json文件打开路径：File（文件） / Preferences （首选项） / User Snippets（用户代码片段）弹出一个框，输入vue，打开vue.json文件默认显示如下内容：步骤二：配置vue模板{ "Print to console": { "prefix": "vue", "body": [ "<template>", "\t<section>&
2021-01-29 10:44:56
483
原创 vue中使用window.onresize无效
在父、子组件中同时使用了window.onresize，子组件中window.onresize无效。子组件代码如下：出现问题为console的lineHeigt为2，但实际在vue中lineHeigt仍为0data(){ return { lineHeigt: 0 }},mounted() { let _this = this; window.onresize = function() { _this.getLineHeight(); }}，methods: { getLin
2020-12-03 13:58:20
5400
1
原创 vue-cli2添加compression-webpack-plugin压缩代码
npm run build命令打包报错如下：代码如下productionGzip: true,productionGzipExtensions: ['js', 'css'],if (config.build.productionGzip) { const CompressionWebpackPlugin = require('compression-webpack-plugin') webpackConfig.plugins.push( new CompressionWebpa
2020-10-28 16:56:10
1371
原创 git命令及问题
一、git相关命令1、切换到已有分支a. git pullb. git checkout 分支名如：git checkout develop2、新建分支并切换到该分支：git checkout -b 分支名如新建并切换到新分支int: git checkout -b int3、将本地修改推送到远程a. 暂存修改：git add .b.将修改保存到本地： git commit -m “修改说明”c. 拉取远程代码：git pull若有冲突：应先解决冲突，再执行上面的a、b、c三
2020-10-09 11:10:26
173
原创 在2.5.4版本elementui中引入2.13版本的datePicker组件
1、引入datepicker组件在components中创建ElDatePicker文件，将elementui2.13版本的date-picker文件中src文件复制到ElDatePicker文件下，新建utils文件，复制elementui2.13中src/utils文件中date-util.js、date.js文件，修改对应的引用组件代码地址https://github.com/zjh20110094/date-picker2、全局注册ElDatePicker组件，注意要写在Vue.use(E
2020-09-14 14:31:25
880
原创 vue兄弟组件之间传值eventBus.js
一、原理 1. 创建一个Vue实例eventBus作为媒介。 2. 在相互通信的兄弟组件中都引入eventBus，让各兄弟组件共用一个事件机制。 3. 通过eventBus.$emit(事件名，参数)传递数据，eventBus.$on(事件名，参数=> {})接收据二、实例代码A组件往B组件传递数据data1.src/utils文件下创建eventBus.js，内容如下：import Vue from "vue";export default new Vue();2.在A，B组
2020-09-10 15:00:22
908
转载 vue刷新页面
1.location.reload()2.vue路由跳转//router.go(n):参数是一个整数，意思是在 history 记录中向前或者后退多少步，//类似 window.history.go(n)this.$router.go(0)注：前两种方式都是强制刷新页面，会出现短暂的闪烁，用户体验不好,推荐第三种方式3.使用provide / inject ——推荐3.1 原理通过控制router-view 的显示与隐藏，来重渲染路由区域，达到页面刷新的效果，show -> flas
2020-09-09 09:55:18
146
原创 vue-cli3打包后清除浏览器缓存
浏览器缓存原因导致vue 打包后的文件不能即使更新最新代码，缓存里面内容未清除。解决方案：在打包的文件名中添加一个版本号，以便浏览器能区分
2020-09-04 10:12:35
3521
8
原创 vue复制粘贴
vue-clipboard2文档：https://www.npmjs.com/package/vue-clipboard21. 安装vue-clipboard2 npm install --save vue-clipboard22. 在main.js中添加import VueClipboard from 'vue-clipboard2'VueClipboard.config.autoSetContainer = true;Vue.use(VueClipboard)3. 在组件中使用 .
2020-08-03 15:49:23
149
原创 兼容IE浏览器
一、color颜色属性1. 支持颜色名称、十六进制、rgb、rgbabody {color: red;} //颜色名称body {color: #aaaeds;} //十六进制body {color: rgb(255,0,51);} //rgbbody {color: rgba(255,0,0,0.7);} //最后一位0.7为透明度2. IE浏览器不支持格式body{background: #27506c99;}...
2020-07-30 11:22:59
255
原创 vue父组件中使用ref调用子组件中的方法
多个组件绑定同一个ref名，this.$refs[refName]拿到的值为数组,需循环调用子组件中的方法1. 如图，多个组件绑定同一个ref名2. 通过this.$refs拿到的dom对象为数组，需循环调用子组件中的方法this.$refs拿到的dom对象为数组循环调用子组件中的方法this.$refs.identityFormItem.forEach(el => el.clearValidate());...
2020-07-29 10:59:55
5786
原创 elementui中Notification组件添加点击事件
1. 官方文档2. 代码handleClick() { let telNo = "1111", message = "22222", _this = this; //函数作用域问题 this.$notify({ title: "通知消息", position: "bottom-right", dangerouslyUseHTMLString: true, message: `<p style="cursor: pointer;">号码
2020-07-22 18:18:39
6879
原创 js中switch/case语句
switch 语句用于基于不同条件执行不同动作。1. 语法switch(表达式 || 值) { case value1: 代码块 break; case value2: 代码块 break; default: 默认代码块} 传入一个表达式或一个值从上往下执行，把表达式的值与每个 case 的值进行对比如果存在匹配，则执行关联代码，不匹配会break最后一个case或default
2020-07-22 17:28:58
37908
原创 elementUi中table表格自定义表头
通过设置 Scoped slot 来自定义表头<el-table-column> <template slot="header" slot-scope="scope"> <span>自定义表头</span> </template></el-table-column>
2020-07-22 15:22:40
2734
原创 vue自定义组件v-model双向绑定
一、model官方文档类型：{ prop?: string, event?: string }详细：允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。Example： Vue.component('my-checkbox
2020-07-09 18:37:36
1849
原创 格式化数字，逢千位数加逗号
方法一：js方法实现function formatNumber(str) {var baseLen = 3;if(str.indexOf(’.’) !== -1) {baseLen += str.length - str.indexOf(’.’);}if(str.length &lt;= baseLen){return str;} else {return formatNum...
2019-03-13 23:39:55
740
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人