![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 81
Angela-
来自外太空的前端程序猿~
展开
-
pnpm项目运行启动以及如何迁移到内网
3个重要部分,缺一不可.pnpm-stroe文件夹项目源码,不能有node_modules文件夹pnpm i 执行完 生成的 pnpm-lock.yaml 文件。原创 2023-06-20 11:19:28 · 2774 阅读 · 6 评论 -
国际电话组件封装使用以及vuephonenumberinput属性解读
phone-number-input组件描述:国际电话输入组件。适用场景:电话号码输入框。propspropstypedefaultexplainvalueString‘’组件绑定的值,默认为空errorBooleanfalse值为true时展示校验失败的外观no-exampleBooleanfalse是否展示输入示例disabledBooleanfalse是否禁用clearableBooleanfalse是否可清空.原创 2021-09-01 11:19:37 · 3873 阅读 · 2 评论 -
封装附件预览组件 图片 pdf预览(vue+elementui)
附件预览组件目录previewpropseventusage效果图组件源码目录preview组件描述:附件预览组件。适用场景:根据文件流前端预览。propspropstypedefaultexplainpreviewDownLoadBooleantrue是否启用内部下载接口,默认启用propObject{配置字段prewKey: ‘url’,prewKey:预览接口发送的keyname: ‘name’,name:文件名原创 2021-07-28 16:30:01 · 1990 阅读 · 3 评论 -
控制台输出图片&控制台设置字体样式
首先准备一张图片 复制其地址var e = "%c";var n = "color:green;font-weight:bolder;font-size:16px;padding:16px 0px 18px 55px;background:url('http://bpic.588ku.com/element_origin_min_pic/20/07/17/ba9f3d3e97237ae10302a1f699efcbdc.jpg') no-repeat;background-size:50px 50p原创 2020-12-14 11:07:55 · 368 阅读 · 0 评论 -
vue+cesium cesium数据量太大 导致浏览器卡顿 解决办法
如题 博主在开发过程中遇到了问题就是 当数据量过大时 浏览器特别卡情景: 每秒实时渲染数据效果:当前数据没有渲染完就开始渲染下一秒的数据了如何将巨大的数据 在一秒内快速渲染到页面上呢?解决方案 : 不要把任何的cesium对象 放在data中监听, 因为在data中的变量 , vue会劫持数据 , 导致迟缓。解决方式:1.将viewer 挂在到window对象下window.viewer = viewer以后每次使用都window.viewer来获取viewer对象 2.将任何的原创 2020-10-20 15:44:59 · 9770 阅读 · 10 评论 -
VUE+ElementUI构建管理后台项目经验与技巧必看!
以下是整个功能的全部代码哟——第一部分:vue-cli脚手架的搭建一、安装vue-cli脚手架构建工具vue-cli 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目:安装:$ cnpm install -g @vue/cli //g表示全局安装安装完成之后输入 vue -V(注意这里是大写的“V”),如下图,如果出现相应的版本号,则说明安装成原创 2020-09-09 15:17:46 · 1909 阅读 · 0 评论 -
vue cli4 快速搭建项目
1.前提是先要安装node2.全局安装vue npm i vue -g3.全局安装vue-clivue npm i vue-cli -g4.生成vue项目 vue init webpack projectname ps:项目名称不支持大写字母5.根据自己需要配置各项:5.完成的提示6.启动项目 npm run dev...原创 2020-09-04 14:08:29 · 2172 阅读 · 0 评论 -
Vue packages version mismatch: 版本始终不对的解决方案
Vue packages version mismatch:- vue@2.4.4- vue-template-compiler@2.5.13This may cause things to work incorrectly. Make sure to use the same version for both.If you are using vue-loader@>=10.0, simply update vue-template-compiler.If you a原创 2020-09-04 14:02:15 · 3964 阅读 · 0 评论 -
js数组方法汇总ES5、ES6
arr.push() 从后面添加元素,添加一个或多个,返回值为添加完后的数组长度 let arr = [1,2,3,4,5] console.log(arr.push(6,7)) // 7 console.log(arr) // [1,2,3,4,5,6,7] arr.pop() 从后面删除元素,只能是一个,返回值是删除的元素 let arr = [1,2,3,4,5] console.log(arr.pop()) // 5 console.log(arr) // [1.原创 2020-09-03 09:58:08 · 1580 阅读 · 0 评论 -
js基础知识点
//值类型Q:值类型的数据包含哪些?number boolean string undefinedvar a = 10var b = aa = 11console.log(b) //10//引用类型Q:引用类型的数据包含哪些?object array functionvar obj1 = {x:100}var obj2 = obj1obj1.x = 200console.log(obj2.x) //200总结:***1.值类型的数据是按值传递的***2.引用类原创 2020-08-27 18:04:58 · 2897 阅读 · 0 评论 -
字符串去转移符转成json对象
var str = "{\"CollectionCount\":\"1\",\"...//正则匹配去除转义符str = str.replace(/[\\]/g, ''); //转成json对象JSON.parse(str)原创 2020-04-16 10:36:49 · 3680 阅读 · 0 评论 -
layui select动态赋值的两种方式(兼容ie8)及报错处理
亲测可用//方式一:兼容性好,兼容ie8//方式二:代码简单,但是不兼容ie8 谷歌没问题 报错处理select渲染不成功,如果报错,请看是否有以下问题... ...原创 2020-04-02 18:19:29 · 2931 阅读 · 0 评论 -
vue中如何使用layui
vue中使用layui只能下载官方的包,然后引用js/css文件。 1.下载layui包[> https://www.layui.com/](https://www.layui.com/)原创 2020-01-16 14:00:35 · 11114 阅读 · 10 评论 -
vue全局组件自动注册
组件的目录结构:子组件的name必须写自动全局注册:1.要新建个global文件夹,里面的js文件是对各个子组件的导入导出操作。2.components下新建index.js文件index.js对global下各个导出的组件进行全局自动注册操作。3.main.js入口文件引用components文件夹到此就注册完毕了使用:刚才说到子组件name必写,页面中使用时对应的子...原创 2019-11-14 11:10:08 · 3536 阅读 · 0 评论 -
封装elementUI-按钮组组件
<template> <div class="button-group"> <ul v-for="(item,index) in button_group_list" :key="index"> <li v-for='(button,i) in item' :key="i"> <!-- 文件上传 --&g...原创 2019-11-14 10:19:17 · 4942 阅读 · 0 评论 -
封装elementUI-树组件
封装树组件,父子级不关联,并为树组件添加右键功能。源码如下...原创 2019-11-08 18:16:09 · 2788 阅读 · 1 评论 -
封装elementUI-表格组件
```javascript<template> <el-table :data="data" :border='border' :stripe='stripe' :height='height' :fit ='fit' :formatter_Prop='formatter_Prop' :formatter_Dat...原创 2019-11-08 18:04:31 · 2181 阅读 · 0 评论 -
封装elementUI-分页器-注册全局组件
本文将介绍如何封装elementui,具体的实现过程,以及如何使用封装过的组件。封装elementUI组件一共3个步骤1.写子组件:也就是对elementUI组件进行封装2.注册组件:本文是将封装过的组件进行全局注册3.使用组件...**全局注册封装的组件main.js:**import pagination from '@/components/pagination/pagination.vue'Vue.component('pagination',pagination) ...原创 2019-11-04 17:36:41 · 3108 阅读 · 0 评论 -
程序员的一天
时间:2019/11/1地点:北京海淀背景:职场萌新。7:00闹钟响起,拿起手机刷微博看看时事新闻,又爆出来什么猛料了。譬如娱乐圈内谁谁结婚啦,谁谁生娃啦,热搜只是话题,更有趣的在评论中~完毕,起床洗漱,抱着等待多日的多肉植物出发上班。8:20到公司打卡,打卡完毕去楼下吃早饭。不吃不知道,一吃吓一跳,早饭太好吃了叭!9:00上班时间,就是这样… …程序员...原创 2019-11-01 11:34:31 · 4675 阅读 · 6 评论 -
webpack构建vue项目
众所周知,vue运行及打包命令:npm run dev 、npm run build.vue脚手架工程,每次只能运行一个服务,如果有两个工程,需要两套vue脚手架,同理,有10套工程就要10套vue脚手架。楼主工作中遇到的情况就是如此,由于项目的需要,产品的不同模块对应后端不同的打包地址,因此,前端就需要将不同的页面进行打包,进而衍生出多个vue工程。请看下图...原创 2019-10-28 10:55:24 · 2934 阅读 · 0 评论 -
小数转化成百分数(不限制保留位数)
toPercent(point) { //point为将要转化的小数 if(point == 0...原创 2019-10-25 16:16:03 · 3399 阅读 · 0 评论 -
手写webpack (持续更新)
本文目的:手写webpack的配置文件,打包个性化的项目。参考文献:webpack官方文档1.首先我们创建一个目录,初始化 npm,然后 在本地安装 webpack,接着安装 webpack-cli(此工具用于在命令行中运行 webpack):mkdir webpack-demo && cd webpack-demonpm init -ynpm install webpa...原创 2019-10-12 11:54:46 · 2236 阅读 · 0 评论 -
vscode实用快捷键查找和替换
vscode是一款功能十分强大的编辑器,且带有许多插件,利用插件可以让开发速度提升几倍甚至几十倍。vscode快捷键:查找:单文件查找:ctrl + F替换:单文件内替换一处:crtl + shift + 1单文件内替换全部:ctrl + alt + enter也可以用鼠标点击替换,如图查找文件夹下所有文件中是否包含某个关键字:ctrl + shift + F替换全局查找检索到...原创 2019-10-12 09:11:10 · 80423 阅读 · 8 评论 -
js导出功能的实现(兼容IE浏览器)
1.场景点击按钮 导出一个excel,我们先来看效果,如图:2.导出功能的实现按钮如下 <el-button size="mini" type="text" @click="handlClickExport"> <icon name="daochu" class="icon" scale="2.625"></icon> ...原创 2019-08-05 16:56:33 · 3116 阅读 · 0 评论 -
vue动画-自定义组件
在开发时,有时候一些组件满足不了目前的需求,这时候就需要自己开发组件了,然后使用自己开发的组件(插件)到项目中,组件的引用方式有两种,一种是import,另一种是vue.use(),element-ui在引用时就要import ElementUI from 'element-ui'vue.use(ElementUI);而引用axios时只需要import axios from 'axio...原创 2019-08-05 13:04:53 · 4475 阅读 · 0 评论 -
typescript基本数据类型
ts共有7种基本数据类型分别为: Boolean Number String Array Enum Any Void对各种数据类型的声明以及注意事项都浓缩在如下代码块,为了方便您可以可自行粘贴运行:如果您还不会编译ts文件请点击这里看我的另一篇文章《typescript安装及如何编译运行》/** * ts基本数据类型 * Boolean * Number *...原创 2019-08-02 17:06:37 · 4296 阅读 · 0 评论 -
typescript安装及如何编译运行
typescript安装及编译运行首先确保你的电脑里已经有了node,如果没有的话请先安装node,点击此链接地址安装node页面如下,选择适合自己电脑的版本进行安装即可。已经安装node了那么请跳过此部分介绍,往下看。检查Node.js 安装是否成功:快捷键 win+R 打开运行面板,输入命令 cmd ,打开命令窗口 输入命令:node -v 查看Node.js版本号,如果看到版本...原创 2019-08-02 16:51:12 · 17335 阅读 · 5 评论 -
关于VUE打包后index.html文件中的静态资源路径配置
问题:vue 使用 npm 命令:npm run build 打包后生成dist文件夹,其中的index.html文件引用的静态资源:css文件和js文件没有引号,如图:解决:修改配置文件:build文件夹下的webpack.prod.conf.js文件,将removeAttributeQuotes: true修改为false,removeAttributeQuotes: false如...原创 2019-09-20 10:23:06 · 11667 阅读 · 0 评论 -
css滚动条样式重写(兼容ie和谷歌)
博主在工作中遇到修改滚动条样式的情况,需求如下:1.重写滚动条样式,兼容IE,谷歌。2.鼠标移入元素显示滚动条,鼠标移出隐藏滚动条。注意:1.互不干扰:首先说明的是谷歌的css滚动条样式的写法与IE完全不同,IE浏览器只识别IE下的滚动条的写法,谷歌浏览器也不会识别到IE下的滚动条的写法。不会出现同一行css在不同的浏览器显示效果不同的情况,所以就放心大胆的写吧~~~2.IE限制:IE浏...原创 2019-09-23 14:58:36 · 7623 阅读 · 0 评论 -
svn----属性Properties(项目优化)
Properties用途:情景:一个公共的css样式,需要各个工程引用,但是原有的工程中并没有此样式,也就是svnCheckout不到此公共样式,想做到各个工程的公共样式同步更新,一个公共样式改变各个工程只需要更新代码即可。那么如何把svn外部的文件外联到项目中的指定位置呢,如图:我想在css文件夹下除了ownCss文件夹再并列的外联publicCss文件夹,步骤:1.复制publicC...原创 2019-09-25 16:29:48 · 5182 阅读 · 0 评论 -
前端的实习经历
博主来自辽宁沈阳一个普通的本科院校,计算机科学与技术专业,想在北京发展,所以在北京找了前端工程师实习岗位的工作。刚开始实习的...原创 2019-09-27 10:34:15 · 12839 阅读 · 8 评论 -
前端有用的文章
在这里记录一下我认为的好文:vue-cli webpack配置分析:https://segmentfault.com/a/1190000008644830原创 2019-09-27 16:55:00 · 4932 阅读 · 0 评论 -
一行代码实现数组去重js简单
数组去重方法有很多,只列出最实用的方法。有一数组arr需要去重,方法如下:var arr = [100,23,46,46,23,2,5,2,4,7,5,6,6,7,19];1. 利用ES6的setvar newArr = Array.from(new Set(arr));//不改变原数组2. 利用ES6的[…]var resultarr = [...new Set(arr)]; /...原创 2019-10-08 11:07:52 · 3459 阅读 · 0 评论 -
如何修改elementui源码?
修改elementUI源码一定要先从git上拉到elementUI的源文件,不能修改本地项目中的文件。1.拉取如图所示的项目 https://github.com/ElemeFE/element.gitcd elementnpm install原创 2019-10-10 17:53:24 · 4568 阅读 · 1 评论 -
vue-router中query和params
vue传参有两种方式:标签式和编程式编程式传参有query和params两种,下面说说这两种方式如何实现传递参数,以及如何接收参数。目录1.query传参2.params传参1.query传参//js路由文件路由写法 {path:"recipe",component:Recipe},//用query传参不需要参数:rname//a.vue文件传递参数rname...原创 2019-02-22 13:02:56 · 3677 阅读 · 0 评论