web前端
Sunnymeta
褪一分浮躁,握一份真诚
展开
-
webpack配置报错configuration.devtool should match pattern “^(inline-|hidden-|eval-)?(nosources-)?(cheap-
webpack5 配置报错webpack配置报错configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-将devtools配置成:eval-cheap-module-source-map 完美解决,我也不知道什么原因传送门:https://webpack.js.org/configuration/devtool/...原创 2021-02-27 10:35:34 · 4431 阅读 · 4 评论 -
Error: Cannot find module ‘webpack-cli/bin/config-yargs‘ 报错解决
Error: Cannot find module ‘webpack-cli/bin/config-yargs’ 报错解决报错原因:webpack-cli 和 webpack-dev-server 版本不一致导致。解决方法:安装webpack-cli 和 webpack-dev-server 版本一致,都是3版本,完美解决原创 2021-02-27 09:20:19 · 418 阅读 · 0 评论 -
浏览器400错误
400错误是我们经常遇到的一个错误状态代码,400错去的原因通常是由于提交的数据类型和后台需要数据类型导致的。例如:后台需要的String,而这时就会报400错误原创 2021-02-24 16:25:03 · 2051 阅读 · 0 评论 -
vue样式透传
vue 通过scoped可以将样式隔离在组件内,从而组件之间的样式互相不影响,但是当我们需要在当前组件改变其他组件样式时,就不适用了。这时我们可以使用**样式透传**,意思就是将该样式透过scoped。scss/sass 的vue样式透传语法:本组件选择器 ::v-deep 其他组件选择器...原创 2021-02-24 15:29:13 · 455 阅读 · 0 评论 -
js数组字符串项(String)转数值(Number)
想要的效果:[‘123’,‘465’] =》[123,456]const arrString = ['123','465']const arrNumber = arrString.map(number) // [123,456]原创 2021-02-22 15:28:23 · 1072 阅读 · 1 评论 -
element 日期时间组件,限制日期时间选择范围,不能选择早于当前的时间
使用picker-options属性,直接上代码<el-date-picker v-model="form.date" type="datetime" placeholder="选择时间" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="{ disabledDate: (time) => {原创 2020-12-23 20:34:10 · 7406 阅读 · 0 评论 -
前端技术选型报告
一、 技术栈VueJs+ElementUI+WebSocket/stopmJs+百度地图API+nodeJs/MockJs运行平台:现代浏览器(Chrome、Firefox、Edge以及大部分国产浏览器的极速模式)二、 框架选型Vue全家桶(vue+vue-router+axios)主要特性:1、 渐进式MVVM框架2、 组件化编程,方便复用3、 虚拟DOM技术,页面性能好4、 API简洁明了5、 社区丰富强大Vue vs React1、 都支持平台级的大型复杂应用,生态都很丰富2原创 2020-12-16 21:11:38 · 1848 阅读 · 1 评论 -
vue代理接口配置
vue在开发的时候代理接口配置在vue.config.js中module.exports={··· devServer:{ ··· porxy:{ '/api': { // 调用的接口前缀 target: "http://192.168.x.xxx:6180", // 代理的ip+port changeOrigin: true, // 是否允许跨域 secure: false, // 是否是https请求 path原创 2020-12-11 13:47:13 · 489 阅读 · 0 评论 -
Nginx部署vue项目(vue+nginx)代理转发
安装nginx下载解压就可以了配置代理nginx/conf/nginx.confserver { listen 8088; #访问的端口 server_name localhost; #ip,服务器名 #charset koi8-r; #access_log logs/host.access.log main; root F:\szpf\coding\shenzhen-oa-website-mas原创 2020-12-09 20:25:57 · 3273 阅读 · 0 评论 -
vuex 中出现[vuex] module namespace not found in mapActions(): money找不到的报错
使用辅助函数解释小仓库模块的state。vuex 中出现[vuex] module namespace not found in mapActions(): money找不到的报错要在小仓库模块中加入namespaced:true,如下原创 2020-12-09 09:47:22 · 2647 阅读 · 0 评论 -
vue路由自动注册
记录一下vue路由自动注册的一种方式根据src/views文件夹的路径自动注册路由,文件结构如下:src|--view|----page1 // 页面一|------components // 页面一的组件|------index.vue // 页面一的入口组件|----page2 // 页面2|------components // 页面2的组件|------index.vue // 页面2的入口组件|----index.vue // 公共的布局组件router/index.js原创 2020-12-08 17:44:59 · 1207 阅读 · 0 评论 -
vue编写全局过滤器
在src目录下创建plugin文件夹,新建一个filters.js专门存放过滤器。filters.js/** * 过滤字符串中html标签 * @param {String} val */export const srciptHtml = (val)=>{ return val.replace(/<\/?.+?>/g,"");}在main.js引入important * as filters from '../plugin/filters'Object原创 2020-12-08 11:37:13 · 151 阅读 · 0 评论 -
element-ui 表格展示html格式内容
<el-table-column prop="content" label="内容" align="center"> <template slot-scope="scope"> <div v-html='scope.row.content'></div> </template></el-table-column>原创 2020-12-07 21:38:01 · 2409 阅读 · 0 评论 -
vue组件库开发(npm包发布)
公共组件主要解决了多个应用直接组件的公用问题。这里使用npm构建我们的组件库。最终目录使用vue-cli 搭建一个项目vue create pubilc-compenent 将生成的项目的src文件夹改成examples (组件示例)新建vue配置文件,更改入口地址,确保改名后的examples能运行。新建packages文件夹,存放我们的组件编写第一个组件,参考element-ui结构datePicker.vue<template> <div>这是一原创 2020-11-07 20:20:20 · 1390 阅读 · 0 评论 -
vue如何进行插件的编写
vue的插件,我们通常用来封装一些使用频率很高的全局资源,如:全局属性/方法、全局混入mixins、全局组件等。其实还是解决一个问题,更方便的复用。定义一个插件我们在src/plugin下新建一个index.js,定义的方法和属性一定是在install方法内。index.jsexport default { install(Vue){ // 定义全局属性 Vue.prototype.$myPlugin = '全局属性'; // 定义全局方法原创 2020-08-06 10:27:06 · 453 阅读 · 0 评论 -
vue如何编写自定义指令directive
vue已经给我们内置了很多很好用的指令了(v-mode 、v-show)等等,但是有时候当这些指令不能满足我们需求的时候,我们还可以使用vue的自定义指令功能编写我们的指令,这是一个很强大的功能。需要说明的是:尽管自定义指令这个功能很强大,但是其是对普通的DOM底层进行了直接的操作,会消耗一定的性能,所以我们在使用的时候一定要权衡利弊。全局定义我们可以使用vue的接口Vue.directive()去定义一个自定义的指令。// 第一个参数为指令的名称,第二参数则是一个对象,包含了指令的钩子函数Vue原创 2020-08-05 15:44:30 · 441 阅读 · 0 评论 -
vue混入的使用mixins
关于vue的混入,官方给出是说明是这样的,这是一种非常灵活的方式,用来分发vue组件中可复用的功能。混入对象可以包含所有的组件选项。什么意思?使用场景在这里我们可以看到,混入唯一的功能还是解决代码的复用问题,其实很容易理解。就是将我们组件中多次用到的功能(可以包括组件的所有选项)抽离处理,做成公共的功能,然后在需要使用的组件使用mixins进行引用。如果多oop思想有深入理解的同学,可以参照oop思想帮助理解,和oop有一定的相似。其中最典型也是最常用的场景就是:要求界面显示风格不一样,但是里面的原创 2020-08-05 09:49:19 · 484 阅读 · 0 评论 -
vue动态组件详解
1、 什么是动态组件动态组件是指:在一个挂载点使用多个组件,并进行动态切换。可能对于新手来说,这句话有些难理解,什么是挂载点?可以简单的理解为页面的一个位置。最常见的就是:tab的切换功能。在vue要实现这个功能通常用两种方式。一是使用<component>元素的 is 的特性,二是使用 v-if 。方式一:<template> <div class="hello"> <h3>使用component 的 is特性</h3>原创 2020-08-03 17:34:19 · 16975 阅读 · 5 评论 -
vue插槽的使用-slot
vue的官方文档中介绍插槽是说:slot是一套内容分发的Api。那我们怎么理解solt呢?1、作用插槽可以让用户去扩展组件,增强了组件的扩展性,使得组建的复用更加强大。2、使用场景在组件化开发中,我们说,通常会把一段复用的代码单独写成一个组件,但是有时仅仅是这样不能满足需求,这时候可以用到插槽。通过父组件向子组件分发内容。插槽可以让调用者(父组件)实现结构和样式的自定义。3、插槽的使用3.1、匿名插槽子组件:<!-- --><template> <div原创 2020-08-03 14:31:52 · 215 阅读 · 0 评论 -
v-clock解决vue初始化闪动问题
使用vue开发的,在初始化的渲染时候,有时会shan出现煽动一下,这是由于刚下载好js文件,还没有完全渲染引起的,通常使用脚手架开发是不会有这个问题的,但是有时我们使用非脚手架开发就会有这个问题。原创 2020-07-31 15:57:49 · 1832 阅读 · 0 评论 -
nodej使用Express+Ejs+Redis实现留言板功能
使用Express+Ejs+Redis实现留言板功能1、包含功能有:注册用户用户登录用户认证在线留言代码地址:https://github.com/mySoumns/epress-ejsp-redis-message2、效果2.1 留言板列表2.2 注册功能2.3 登录功能2.4 留言功能...原创 2020-07-30 17:35:06 · 331 阅读 · 1 评论 -
使用nodejs的Express框架实现一个简单的HTTP服务器
express在node自带的http模块基础上,致力在http请求和响应上创建一个web程序。下面我们来看一下如何通过express实现一个简单的http服务器。原创 2020-07-23 08:56:57 · 799 阅读 · 0 评论 -
使用NodeJs实现简单HTTP服务器,并返回简单的html页面
通过nodejs的异步回调实现简单的http服务器,并实现一下功能:异步获取JSON文件(使用fs模块)异步获取HTML模板(fs模块)把JSON文件的内容装置到HTML模板里返回html页面返回给用户效果:原创 2020-07-22 16:16:34 · 5308 阅读 · 1 评论 -
wabpack 配置babel报错问题解决
当我们运行 npn run dev 时babel报错,这是因为babel-loader和babel对应的版本需要一致。ERROR in ./src/js/index.jsModule build failed (from ./node_modules/_babel-loader@8.1.0@babel-loader/lib/index.js):Error: Cannot find module '@babel/core'Require stack:- E:\web\webpack\04study\原创 2020-07-08 16:35:49 · 594 阅读 · 0 评论 -
webpack路径的别名配置
如果还不知道webpack的同学,可以先自行去了一些webpack,传送门webpack详细入门整理我们在使用模块化开发的时候都是使用import或者require去导入我们的模块,但是当我们项目较大,模块较多的时候,我们用相对路径导入是一件麻烦的事情。那有没有一种更简便的方法去匹配路径呢?这时我们可以使用webpack的别名配置功能。1、在我们的webpack.config.js中:配置配置我们resolve.alias// 引入nodejs 的path模块,path.resolve用来处理绝对路原创 2020-07-08 14:52:44 · 2538 阅读 · 0 评论 -
webpack详细入门整理,webpackp配置(从零开始)
本来想着整理一篇关于webpack的详细笔记和教程,从零开始的,因为网上看到的都是一上来就用webpack构建了项目,而对于很多同学来说这里肯定有很多的疑惑,比如怎么来的配置文件等等,我就想着整理一篇从0开始,从单文件开始打包的详细过程吧。转载 2020-07-08 09:07:53 · 652 阅读 · 0 评论 -
vue生命周期详解和使用场景整理
我们从vue的原理上来理解一下vue的生命周期,以及使用场景(使用场景应该试很多新手同学比较懵的地方),建议有条件的同学可以看一下vue源码,更能深入理解。不看源码的同学也没有关系,我们从业务场景切入,尽量讲清楚它的用法。原创 2020-07-06 11:14:13 · 3549 阅读 · 2 评论 -
CSS滤镜—使整个网页变成灰色
为追思疫情中逝世的同袍们,将4.4日定为了全国哀悼日,这一天,全世界都是“灰”的。当然我们感觉最深应该就是这一天你打开任何网站、软件,都是灰灰的一片。收到几个人的提问:“老师,这些软件、网站全灰的是怎么实现的,难道要全站都改样式?图片也要重新ps一份吗?”,一直还没来得及回答,今天在这里一起给大家回答这个为题。答案是:否怎样使整站变灰?对于web网站、小程序、webapp以及混合app来说,...原创 2020-04-08 14:40:28 · 2149 阅读 · 0 评论 -
nodejs理解
nodejs是运行在服务端的javascript,是一个基于Chrome JavaScript 运行时建立的一个平台。是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。nodejs使得js 也可以编写了后端代码,nodejs在处理高并发,I/O密集的场景有很大的优势原创 2019-11-23 15:44:57 · 506 阅读 · 0 评论 -
前端工程自动化构建(一)— gulp
目录 **一、gulp简介和安装 二、开始使用gulp 三、gulp常用Api 四、gulp常用插件** 五、附demo源码一、gulp简介和安装gulp是一个自动化构建工具,基于 node 强大的流(stream)能力,拥有丰富和精简的API和插件。gulp 将开发流程中让人痛苦或耗时的任务自动化,从而减少你所浪费的时间、创造更大价值。废话不多说,让我们开始领略gulp的强大之...原创 2019-11-23 15:28:55 · 209 阅读 · 0 评论 -
CSS清除浮动的方法和理解
看了一些小伙伴的页面,常常因为使用了浮动而没有进行浮动的清除,造成了页面布局的混乱。今天来谈谈浮动的四种方法及其原理。当你掌握了原理之后,你就会发现,清除浮动的方法本质都是一样的,这时你就可以根据自己的场景和需求,很灵活的发展适合的浮动方法了,不需要再死记硬背了!!好了,废话不多说了!!下面一起来看看四种常见的清除浮动的方法。一、为什么要清除浮动?在讲清除浮动方法之前,我们来看看为什么要清除...原创 2019-09-20 14:46:34 · 204 阅读 · 0 评论 -
使用脚手架vue-cli创建vue项目
vue-cli是vue项目开发是脚手架工具,那么什么脚手架?脚手架引自工地里边方便房屋建造和装修的支架。在编程里边脚手架可以看做是一个项目模板,帮我们自动化的搭建好了开发环境,搞定了我们目录结构、本地调试、代码部署、热加载以及单元测试等工作,有了脚手架我们可以更方便的建造更高的楼。使用vue-cil创建项目第一步:安装nodejs在nodejs官方网站nodejs.org,下载LTS版本的n...原创 2019-09-17 15:50:48 · 149 阅读 · 0 评论 -
使用vs2017将ts转换成js
TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准。与js最大的区别就是ts添加了可选的静态类型和基于类的面向对象编程。TypeScript在浏览器中无法直接使用,因此我们需要吧ts编译成常规的JavaScript。下面跟大家分享的是怎么在vs2017中将ts编译为js。1、新增TypeScript配置文件。在项目的根目录中,新增一个typesc...原创 2019-09-12 17:29:33 · 3872 阅读 · 0 评论 -
JQuery对象和DOM对象之间的转换
任何一个HTML标签都可以是一个DOM对象,而JQuery对象是由JQuery包装后产生的对象。JQuery对象无法使用任何的DOM对象方法。同样,DOM对象也不能使用任何的JQuery方法。-JQuery对象和DOM对象可以通过以下方法进行相互转换:在说转换前,建议有一个较好的变量风格的约定,JQuery对象使用$符号开头,例如:var $test = $("#test");一、JQu...原创 2019-08-20 11:31:53 · 175 阅读 · 0 评论