- 博客(106)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 angualr创建npm并打包
在使用angular开发项目的时候，有些东西为了方便调用和单独管理，需要把部分组件通过npm封装进行调用，那如何使用创建组件并打包为npm可以调用的呢？步骤如下：一、创建厂库1. 打开终端命令面板，输入命令创建一个项目为createLibng new createLib2. 使用前端开发工具打开新建的 createLib 项目3. 开发厂库使用以下命令创建厂库，厂库在项目根目录下名字为projects的文件夹，在projects下有刚刚自己新建的仓库ng ..
2020-05-08 17:32:49
565
原创 如何设置文本溢出显示省略号
在前端开发中，单行省略号可以直接使用css进行设置，那如何对多行文本进行设置省略号呢？如果不考虑兼容性问题可以直接使用以下css设置：overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;display: -webkit-box;-webkit-line-clamp: 3;但是在开发过程中需...
2018-10-12 10:30:01
984
原创 position:fixed显示错位
在项目开发过程中遇到一个问题，使用layer显示弹出框时，弹出框里面的标签设置position:fixed显示位置是从弹出框位置进行定位，而非屏幕视口（viewport）的位置来定位。经过调查发现，原来layer弹出框使添加了layui-anim类，这样样式类中使用了transform进行动画的效果的设置。position:fixed定位错误原因：当使用了position:fixed...
2018-09-27 14:16:18
11004
原创 vue3使用import引入组件报Internal server error: Failed to resolve import “@/components/xxx“错误
使用vue3 + ts搭建项目，引入vue组件时报，[vite] Internal server error: Failed to resolve import "@/components/home/HomeSearch" from "src/views/HomeView.vue". Does the file exist?原因：直接引入vue组件但没有在vite.config.ts文件配置扩展。方案1、在vite.config.ts文件中添加扩展，保存后重新运行即可。引入组件添加.vue后缀，如图。
2024-04-15 18:42:16
1477
原创 Cannot find module ‘../views/xx.vue‘ or its corresponding type declarations.ts
解决方案：在项目根目录下的env.d.ts文件里面输入如下代码。原因：因为ts只能解析 .ts 文件，无法解析 .vue文件。
2024-04-10 19:40:42
376
原创 window.onresize监听浏览器变化内容被覆盖
在开发vue项目时，使用window.onresize监听浏览器的变化，发现自定组件使用内容显示正常，当判断传入参数的长度时，内容会被覆盖。原因：使用window.onresize监听浏览器变化，而onresize本身就是一个回调，当内容发生变化时，前一个就会被覆盖。 解决方案： 使用 window.addEventListener('resize', () => {}) 监听浏览器变化...
2022-06-28 17:48:30
1473
原创 el-table使用type=“expand“、fixed表中表内容显示错位
在使用elementUI的表格时，发现同时使用type="expand"表中表和fiexd列锁定这两个功能时，表中表部分内容会直接显示在最外层表格上面，拖动表格滚动条时也无法隐藏。如图 查了很多资料，网上说的this.$refs.planTableRef.doLayout()无法解决问题，为了解决这个问题，最终想到一个比较合理的解决方案......
2022-06-23 17:04:05
3356
原创 git提交代码设置某些文件不可上传
使用git管理代码时，如何设置git提交时忽略某些特殊文件，使这些文件不可以提交呢？可以通过项目根目录下的 .gitignore 文件来设置。1. 打开跟目录下的 .gitignore 文件，如果没有就新建这个文件2. 在.gitignore文件里面添加不需要上传的文件或文件夹，例如 node_modules、dist这时候...
2022-05-18 15:55:04
8322
原创 vue项目debugger调试看不到源码
在搭建vue项目时，在vue文件里面输入debugger后，在浏览器点击操作发现可以进入断点，但显示的是已经压缩好的代码，无法看到源码。在网上查了好多文件都说添加 devtool: "source-map"即可解决，实际情况是添加了没有效果。解决方案：1 打开vue.config.js文件，添加 devtool: "cheap-module-source-map", 然后重启项目。2. 在页面上点击即可进入断点位置，浏览器上显示的也是源码...
2022-03-30 15:05:45
10528
5
原创 vue如何debugger
vue官方提供了两种debugger的方式：1.使用Vue Devtools 插件，该方式需要安装翻墙插件才可以； 2 在vscode
2022-03-23 17:56:30
19918
1
原创 500 Internal Privoxy Error
使用google浏览器打开网页时报错误如下Privoxy encountered an error while processing your request:Could not load template file no-server-data or one of its included components.Please contact your proxy administrator.If you are the proxy administrator, please put the
2022-03-14 11:19:08
6763
2
原创 页面设置rem值，但是值不是正确的px
在开发手机端页面遇到一个奇异问题，设置了根节点字体大小为75px，标题的字体也设置0.4rem，理论上字体大小应该为30px，但是从浏览器却发现字体大小为39px。如图解决方案：添加 -webkit-text-size-adjust:none属性...
2021-09-14 17:30:26
531
原创 Duplicate keys detected: ‘***‘. This may cause an update error
在开发vue项目时遇到Duplicate keys detected: '13'. This may cause an update error错误，这个错不会影响页面显示，但是会一直在控制台上打印。如图错误原因：v-for循环时设置的key值不是唯一的。如图解决方案设置v-for循环的key是唯一的。如图...
2021-08-26 10:47:26
11289
2
原创 vue-router.esm.js:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to
在开发vue项目使用路由跳转当前页面发现控制台报错vue-router.esm.js:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/instDetail?instId=3" 错误。错误原因：使用this.$router.push跳转页面时，对应的query参数和当前地址栏上的参数一样导致解决方案： 判断地址栏上的in...
2021-08-18 11:21:57
6985
原创 vue如何跳转本页面
在使用vue开发项目时遇到一个需求，点击标题跳转当前页面。通过this.$router.push已经更改了url上面的参数，但是页面没有重新加载，这个要如何处理呢？可以通过使用watch监听地址栏上的参数变化实现页面数据更新。实现代码： watch: { $route: { // 监听路由的参数变化 handler () { // 数据变化更新数据 this.instId = this.$route.query.instId this.g.
2021-08-18 11:12:29
1691
原创 vue父组件传子组件数值，子组件值没有变
在使用vue开发项目时遇到一个这样的问题，由于项目多成封装，数据是从祖父组件传给孙子组件，中间隔了一个父组件，由于孙子组件不能直接修改值，所以定义了一个变量，从而导致祖父组件更新内容后，孙子组件内容没有发生变化。如图解决方法：在孙子组件中watch监听input输入变更的值祖父组件 <search-choose :filterObj="secondFilterArr[i]" v-if="secondFilterArr.length&g...
2021-08-06 15:49:27
3884
原创 We‘re sorry but ‘xxx‘ doesn‘t work properly without JavaScript enabled. Please enable
在使用vue开发前端项目时，本地接口联调是可以的，但是打包发布到dev上就会报出We're sorry but 'xxx'doesn't work properly without JavaScript enabled. Please enable it to continue.错。原因：nginx文件里面配置的proxy_pass路径有问题，修改为请求后台的接口的路径即可。...
2021-07-28 14:54:03
2954
原创 Module build failed: Error: Cannot find module ‘less‘
新搭建的一个项目，运行时报Module build failed: Error: Cannot find module 'less'错误原因：vue文件里面的style添加了lang="less"解决方案： 安装lessnpm install less
2021-07-28 14:47:57
1598
原创 vue设置多个路由文件
1. 在vue的router文件下创建report.js文件2. 在report文件里面设置路由内容3. 回到index.js文件，引入report文件，然后合并路由
2021-07-23 11:20:42
1980
原创 webpack设置@代替src
1. 打开webpack.config.js文件2. 在webpack.config.js文件找resolve，添加如下代码 '@': path.resolve(__dirname,'src'),
2021-03-26 16:36:05
706
原创 vue项目运行报Module not found: Error: Can‘t resolve ‘@/component/TaskCard‘错误
运行vue项目时报Module not found: Error: Can't resolve '@/component/TaskCard'错误原因：App.vue文件引入的路径报错解决方案：修改App.vue文件的引入路径 错误路径： 正确路径：注意：如果修改路径还报错，请删除node_modules文件夹后重新运行 npm install...
2021-03-26 14:29:56
70723
3
原创 vscode快速创建vue文件
1. 打开vscode软件，点击文件>首选项>用户片段2. 输入vue.json后回车3.在vue.json中输入 "Print to console": { "prefix": "vue", "body": [ "<template>", " <div></div>", "</template>", "", "<script>", "export default.
2021-03-25 18:21:39
3512
原创 npm run dev运行项目直接卡死，报UnhandledPromiseRejectionWarning: TypeError: loaderContext.getResolve is not a
在搭建vue项目启动项目遇到一个问题，页面直接卡死，重启了好多次都一样，页面报UnhandledPromiseRejectionWarning: TypeError: loaderContext.getResolve is not a function at createWebpackLessPlugin 错误。原因：安装的less-loader版本太高导致，降低less-loader的版本号即可步骤 ：1 在控制台面板运行npm uni less-loader 卸载 l...
2021-01-26 11:53:51
737
原创 { parser: “babylon“ } is deprecated； we now treat it as { parser: “babel“ }.
在搭建vue项目时启动报{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.错误原因：prettier版本导致的解决方案：方案1：找到node_modules\vue-loader\lib\template-compiler\index.js文件，把code = prettier.format(code, { semi: false, parser: 'babylon' })修改为cod.
2021-01-22 16:09:24
631
原创 Module build failed (from ./node_modules/sass-loader/lib/loader.js):
在使用angualr搭建项目，使用sass预编译器样式搭建项目，在app.commponent.sass文件编辑样式。控制台一直报预Module build failed (from ./node_modules/sass-loader/lib/loader.js):错误去查看app.components.sass文件发现样式没有写错刚开始以为是node-sass版本的问题，把node-sass先卸载然后再按照，后面发现还是报一样的问题。排除了node-sass的问题后突然想到会..
2020-05-18 16:56:32
7191
1
原创 angualr如何操作dom对象
在使用angualr开发项目操作不建议直接使用原生的document进行操作，可以使用ViewChild属性装饰器操作dom对象。操作案例：1. 在app.components.ts文件中引入 ViewChild, ElementRefimport { Component,ElementRef,ViewChild } from '@angular/core';2. 定义引用变量，然后写一个方法进行调用 @ViewChild('file') file: ElementRef..
2020-05-14 11:57:31
308
原创 ios在webview上使用fixed无效
使用ios提供的webview显示h5页面发现fixed定位的效果会随浏览器的滚动而隐藏，不会像普通浏览器那样可以进行定位。解决方案：把position:fixed 修改为position:sticky;position:sticky简介position:sticky =position:relative+position:fixed的结合，当元素在屏幕内，表现为r...
2019-12-03 12:07:10
1319
原创 git branch -r 显示不是最新的远程分支列表
在远程厂库新建一个分支，使用git pull 命令更新代码后再用git branch -r查询远程分支，试了好几次都没有查看到新建的远程分支。原因： git branch -r 命令不会每次都获取最新的远程厂库分支解决方法： 使用git fetch 命令更新分支，然后再使用git branch -r 即可查看到最新的远程分支...
2019-11-20 11:14:09
1221
原创 ionic框架导致多行省略号第一次显示不起作用
在使用ionic框架开发项目遇到一个坑，使用多行显示省略号第一次页面加载无效，然后进行页面跳转获取修改一个css样式，这时候多行显示省略号才会有效果。原因: 使用ionic提供<ion-avatar>加载图片导致。重现步骤：1. 没有修改前页面初始化显示列表数据，发现多行显示省略号效果不对2. 随便修改一个参数后发现多行显示省略号就生效了修改方法：1...
2019-11-05 15:14:54
308
原创 ERROR Error: [@ant-design/icons-angular]: the icon reload-o does not exist or is not registered.
在使用angular + ng-zorro 开发项目时，遇到core.js:14597 ERROR Error: [@ant-design/icons-angular]: the icon reload-o does not exist or is not registered.这个错误，由于项目问题只能使用angular7版本，对应的ng-zorro也是7版本的。问题： 最后发现使用...
2019-09-09 19:00:01
9693
4
原创 offsetTop无法获取到标签与body的距离
在项目开中使用offsetTop获取当前标签与body标签的距离，发现offsetTop获取的高度为0。通过查询offsetParent属性返回值：（1）.返回距离当前元素最近的采用定位祖先元素。（2）.如果祖先元素中没有采用定位的元素，则返回body元素。使用offsetTop获取的标签距离的父级元素使用了position进行定位，导致获取到的获取的实际距离不是从body到当前对...
2019-09-02 16:03:32
4479
原创 Property 'searchMes' is private and only accessible within class 'HomeComponent'.
在使用angular开发项目使用打包命令打包的时，遇到了Property 'searchMes' is private and only accessible within class 'HomeComponent'.这一类错误。原因： 定义变量的时候都使用了 private 导致，使用 ng buil --prod 命令打包的时候无法读取html页面使用private定义的变量解决：...
2019-08-30 16:05:26
3317
原创 "export 'ɵɵdefineInjectable' was not found in '@angular/core'
在使用angular的ng serve运行项目时，报WARNING in ./node_modules/@angular/cdk/esm5/overlay.es5.js 527:63-81"export 'ɵɵdefineInjectable' was not found in '@angular/core'错误，导致无法成功运行解决方案：npm install -S @an...
2019-07-30 15:45:08
7016
原创 emplate syntax error Component template should contain exactly one root element.
(Emitted value instead of an instance of Error) template syntax error Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain the...
2019-06-20 11:19:56
1048
原创 This dependency was not found:
在运行项目的时候报这个错误，经过查询发现<script>引入的 import { resolve } from 'dns' 的路径不正确，把路径修改正确就好了This dependency was not found:* dns in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-...
2019-03-25 10:02:11
4917
原创 canvas锯齿
zai使用canvas绘制图形的时候发现显示带一些锯齿，视觉效果非常不好可以通过使用在js中使用.translate(0.5, 0.5）清处锯齿代码：let canvas = document.createElement("canvas");let cirCtx = canvas.getContext("2d")cirCtx.translate(0.5, 0.5); //使用...
2019-02-20 16:27:02
1088
翻译 Autoprefixer为什么没有对border-radius添加前缀
在使用Autoprefixer进行前缀自动补充的时候，发现Autoprefixer没有对border-radius自动添加前缀，经过查询发现浏览器基本上已经支持border-radius属性，除了ie6-ie8、Opera10.1这几个版本不支持，其他浏览器已经都支持border-radius属性。border-radius支持浏览器：https://caniuse.com/#search=b...
2019-02-15 11:50:42
447
1
原创 object-fit的使用
object-fit 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框，常用于图片、视频填充问题。object-fit的css属性：object-fit: fill; object-fit: contain; object-fit: cover; object-fit: none; object-fit: scale-down; contain被替换的内...
2019-01-28 14:27:26
2436
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人