前端开发
前端小李
这个作者很懒,什么都没留下…
展开
-
vue中自定义插件
简述再写插件之前,首先我们要弄清楚什么是插件?插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制,一般有下面几种:添加全局方法或者属性。添加全局资源:指令 / 过滤器 / 过渡等通过全局混入来添加一些组件选项添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。一个库,提供自己的 API,同时提供上面提到的一个或多个功能。Vue 插件是对 Vue 全局功能的扩展,他可以给 Vue 添加全局方法、属性、组件、过滤器、指令等等。相信用过vue的伙伴都原创 2022-04-10 18:22:00 · 5367 阅读 · 0 评论 -
vue 3.x项目中使用富文本编辑器 ----------wangeditor
官网wangeditor下载wangeditor插件npm install wangeditor --save在要使用的组件中引入使用<template> <div class="home"> <div id="richText" style="height: 400px;background-color: #fff;" ></div> <button @click="getMsg">获取富文本内容</b原创 2022-04-10 17:06:34 · 2353 阅读 · 2 评论 -
webpack 打包 html js
1.创建项目安装webpack 依赖新建一个demo文件,cmd进去(首先要安装 Node.js, Node.js 自带了软件包管理器 npm)依次执行,npm init -y,生成package.json文件npm install webpack -g 全局安装webpacknpm install webpack --save-dev 项目中安装成功以后构建如下的文件建构,index.html:one.js:main.js:3.打包html,js。打包html需要使原创 2020-08-10 16:23:01 · 676 阅读 · 0 评论 -
微信小程序引入vant UI
1.在小程序项目根目录上初始化npmnpm init 2.执行官方要求的命令:npm install --production3.启用npm4.执行VantUI提供的安装命令npm i vant-weapp -S --production成功之后显示,并且可以看到多了一个:miniprogram_npm 目录(这里就是安装好的VantUI相关控件):5.使用VantUI控件,首先进行导入:appjson中添加"usingComponents": { "van-butto原创 2020-05-19 17:30:22 · 2939 阅读 · 0 评论 -
nginx+ssl配置https网络协议
配置https server 443 server { listen 443 ssl; server_name 你的域名; //控制时候访问目录所有文件 root html/regiest; index index.html; ssl_certificate cert/申请的ssl.p...原创 2020-03-31 10:07:43 · 192 阅读 · 0 评论 -
react 使用element -ui问题Can't resolve 'react-hot-loader'
请安装react-hot-loader最新版本npm install react-hot-loader@next原创 2019-12-05 13:59:04 · 1132 阅读 · 0 评论 -
移动端rem适配
;(function (designWidth, maxWidth) { var doc = document, win = window; var docEl = doc.documentElement; var tid; var rootItem, rootStyle; function refreshRem() { v...原创 2019-11-13 17:59:54 · 200 阅读 · 0 评论 -
Nodejs把接收图片base64格式保存为文件存储到服务器上
app.post('/upload', function(req, res){ //接收前台POST过来的base64 var imgData = req.body.imgData; //过滤data:URL var base64Data = imgData.replace(/^data:image\/\w+;base64,/, ""); var dataBuffer = new ...原创 2019-11-11 09:42:54 · 1407 阅读 · 0 评论 -
JS正则(RegExp对象)判断手机号是否合法(表单验证)
function test(){ // 获取手机号内容 let phone = document.getElementById('phone')//DOM let value = phone.value//文本框值 // 判断手机号是否合法 const flag = /^[1][3,4,5,7,8,9][0-9]{9}$/ if(...原创 2019-11-09 10:06:00 · 747 阅读 · 0 评论 -
js 时间戳转换成几分钟前,几小时前,几天前
直接上代码formatMsgTime (timespan) { var dateTime = new Date(timespan); var year = dateTime.getFullYear(); var month = dateTime.getMonth() + 1; var day = dateTime.getDate(); var hour = dateTim...原创 2019-10-22 15:42:15 · 952 阅读 · 0 评论 -
安卓APP应用在各大应用市场上架方法整理
想要把APP上架到应用市场都要先注册开发者账号才可以。这里的方法包括注册帐号和后期上架及一些需要注意的问题。注意:首次提交应用绝对不能随便删除,否则后面再提交会显示应用APP冲突,会要求走应用认领流程,那个时候就会相当麻烦啦。1、腾讯应用宝腾讯开放平台地址:http://open.qq.com注册开发者帐号地址:https://ssl.zc.qq.com/v3/index-chs.html...转载 2019-05-31 12:35:51 · 956 阅读 · 0 评论 -
vue路由过渡动画效果
template:<template> <div id="app"> <transition :name="transitionName"> <router-view class="Router" /> </transition> </div></template>...原创 2019-05-31 10:50:05 · 768 阅读 · 0 评论 -
vue打包后唱出隐藏变省略号失效问题。
源代码overflow: hidden; white-space: nowrap; text-overflow: ellipsis;解决代码 overflow: hidden; white-space: nowrap; text-overflow: ellipsis; /*! autoprefixer: off */ -webk...原创 2019-05-31 08:54:36 · 195 阅读 · 0 评论 -
nodeJS 使用富文本编辑器
最近看了下主流的富文本编辑器。个人认为,就考虑功能的全面性与植入成本而言,Ueditor 是个不错的选择。而 Neditor 是基于 Ueditor的,就只是样式更现代化的 Ueditor。1. 首先当然是要从 Ueditor 官网下载 Ueditor发行包的下载地址: http://ueditor.baidu.com/website/download.html可以看到官网并没有 node....原创 2019-06-12 09:51:58 · 2202 阅读 · 1 评论 -
nodejs允许任何域名跨域
直接上代码哈app.all("*",function(req,res,next){ //设置允许跨域的域名,*代表允许任意域名跨域 res.header("Access-Control-Allow-Origin","*"); //允许的header类型 res.header("Access-Control-Allow-Headers","content-type"...原创 2019-05-31 08:50:46 · 821 阅读 · 0 评论 -
react 跨域请求
1、安装http-proxy-middlewarenpm install http-proxy-middleware2、在src目录下创建setupProxy.js,加入以下代码const proxy = require('http-proxy-middleware')module.exports = function (app) { app.use(proxy('/api', {...原创 2019-05-23 17:33:36 · 588 阅读 · 0 评论 -
简单得js滚动加载
//滚动加载数据$(window).scroll(function(){ var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).height(); var windowHeight = $(this).height(); if(scrollTop + windowHeight == ...原创 2019-08-31 15:18:01 · 195 阅读 · 0 评论 -
搭建react脚手架
全局安装react脚手架 npm install -g create-react-app执行命令create-react-app reactApp运行脚手架npm satrt原创 2019-05-23 09:52:14 · 131 阅读 · 0 评论 -
js判断移动端或pc端
if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { alert('移动端')} else {alert('pc端')}原创 2019-06-24 15:45:32 · 1036 阅读 · 0 评论 -
js批量导入 下载导入模板
1.首先在项目中存放模板2.js下载此模板<input type="submit" class="btn btn-query" id="download" value="下载导入模板" onClick="download();"/>function download() { var url = "./assets/"; var fileName = "model";...原创 2019-07-03 10:15:18 · 1553 阅读 · 0 评论 -
js 导出XLS表
啥都不说直接上代码<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /...原创 2019-07-10 09:40:34 · 231 阅读 · 0 评论 -
react 创建组件的两种方式的 区别
1. 使用function构造函数创建的组件内部没有state私有数据,只有一个props来 接收外界传递过来的数据;2.使用class关键字创建的组件,内部除了有this.props这个只读属性外还有一个专门用于存放自己私有数据的this.state属性,这个state是可读可写的.3. 使用function创建的组件叫做无状态组件,使用class创建的组件叫做有状态组件4.有状态和无状态...原创 2019-07-22 17:10:26 · 255 阅读 · 0 评论 -
webpack前端自动话构建工具
原创 2019-08-14 16:32:47 · 121 阅读 · 0 评论 -
vue监听手机物理健
在index.html页面中引入mui.js<script type='text/javascript' src='./static/mui.min.js'></script>添加js代码mui.init({ keyEventBind: { backbutton: true //关闭back按键监听 }});// //首页返回键...原创 2019-09-17 15:50:18 · 245 阅读 · 0 评论 -
前端开发学习线路
1、学习线路类前端学习路线1 —(阿里云大学)前端学习路线2 —(黑马程序员)前端学习路线3 —(尚硅谷) —课程大纲前端学习路线4 —(尚学堂) —课程大纲前端学习路线5 —(千峰)—(学习路线图)前端学习路线6 —(极客学院)前端学习路线7 —(谷粒学院)自动化构建工具webpack2、框架视频AngularJS视频React视频微信小程序项目实战mpVue视频教程...转载 2019-09-19 11:02:29 · 467 阅读 · 1 评论 -
vue中引入bootstrap
原文链接:https://blog.csdn.net/wild46c…想要在vue中引入bootstrap,引入的时候需要按照如下的步骤进行。1、引入jquery2、引入bootstrap阅读本文前,应该能够搭建环境,使用vue-cli进行项目的创建,可以参考文章:http://blog.csdn.net/wild46ca…好,下面上货。1、首先按照上面文章中的内容,新建一个vue工...转载 2019-02-16 10:22:16 · 1642 阅读 · 1 评论 -
windows下mongodb安装
1.下载地址:http://www.mongodb.org/downloads2.解压缩到自己想要安装的目录,比如d:\mongodb3.创建文件夹d:\mongodb\data\db、d:\mongodb\data\log,分别用来安装db和日志文件,在log文件夹下创建一个日志文件MongoDB.log,即d:\mongodb\data\log\MongoDB.log4.运行cmd.ex...原创 2019-05-13 16:43:40 · 94 阅读 · 0 评论 -
vue rem 适配移动端
1.下载lib-flexiblenpm i lib-flexible --save2.在main.js中引入lib-flexibleimport 'lib-flexible/flexible'3.安装px2rem-loadernpm install px2rem-loader4.配置px2rem-loader在build文件中找到util.js,将px2rem-loader添加...原创 2019-04-29 15:57:43 · 299 阅读 · 0 评论 -
vue-router 守卫
1、全局前置守卫可以使用 router.beforeEach 注册一个全局前置守卫:const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // ...})当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等...原创 2019-02-28 15:05:48 · 119 阅读 · 0 评论 -
vue 开发App监听手机 返回键返回上级路由以及退出
vue 开发App监听手机 返回键返回上级路由以及退出一、mui进行手机物理键的监听首先安装 vue-awesome-muinpm i vue-awesome-mui二、在main.js注册vue-awesome-muiimport Mui from "vue-awesome-mui"Vue.use(Mui)三、在index.html中监听手机返回键 <script>...原创 2019-02-19 00:24:19 · 2403 阅读 · 7 评论 -
vue开发 Element UI 的使用
1、npm安装elementuinpm i element-ui -S2、引入 Element在 main.js 中写入以下内容:import Vue from 'vue';import { Button } from 'element-ui';Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };Vue.use(But...原创 2019-02-23 17:53:10 · 302 阅读 · 0 评论 -
vue开发APP切换页面动画过度效果
实现问题1.如何判断切换路由时是前进还是后退2.每次切换时向左向右切换动画如何实现实现原理1.我们需要给各个页面定义层级,在切换路由时判断用户是进入哪一层页面,如果用户进入更高层级那么做前进动画,如果用户退到低层级那么做后退动画.import VueRouter from 'vue-router'import Home from '../components/home/home'im...原创 2019-02-17 23:18:52 · 1844 阅读 · 0 评论 -
豆瓣API接口
1、获取正在热映的电影:接口:https://api.douban.com/v2/movie/in_theaters访问参数:start : 数据的开始项count:单页条数city:城市如:获取 广州热映电影 第一页 10条数据:https://api.douban.com/v2/movie/in_theaters?city=广州&start=0&count=10...转载 2019-02-27 16:02:17 · 4107 阅读 · 0 评论 -
在vue中引入Echarts
一.初始化Vue的项目这里使用vue-cli中webpack-simple这个模板初始化项目, 在命令行中以此输入vue init webpack-simple echarts01cd echarts01npm install npm run dev二.引入Echart包1. 通过以下命令安装Echartsnpm install echarts --save2. 引入Echa...原创 2019-02-16 10:22:04 · 559 阅读 · 0 评论 -
vux的使用操作
vux的使用最近有个基于微信端的项目,使用vue框架。由于时间紧,组件要求多,特尝试使用vux组件框架进行尝试。官方demo:https://vux.li/demos/v2/?x-page=github#/demo;用vue_cli安装好项目后。进入项目目录&lt;1&gt;. 在项目里安装vuxnpm install vux --save&lt;2&gt;. 安装vux-loade...原创 2019-02-16 10:22:32 · 533 阅读 · 0 评论 -
客户端Vue框架和Angular框架的异同点
Angular1,MVVM(Model)(View)(View-model)2,模块化(Module)控制器(Contoller)依赖注入:3,双向数据绑定:界面的操作能实时反映到数据,数据的变更能实时展现到界面。4,指令(ng-click ng-model ng-href ng-src ng-if…)5,服务Service($compile $filter $interval $tim...转载 2018-12-11 19:49:26 · 772 阅读 · 0 评论 -
nodejs和vuejs常用指令
node常用的命令npm - v 检查是否安装成功npm init 会引导你创建一个package.json文件npm install express 安装expressnpm install xxx --save 安装依赖npm show express 显示模块详情node xxx.js 运行node项目vue常用的命令vue init webpack xxx 创建一个vue项...原创 2018-12-08 14:06:59 · 682 阅读 · 0 评论 -
typeof 的取值类型范围 以及 typeof和 instanceof 的区别
**typeof的取值范围**typeof运算符用来检测给定变量的数据类型,返回一个用来表示表达式的数据类型的字符串。 可能的返回值有:“number”、“string”、“boolean”、“object”、“function” 和 “undefined”。** typeof和 instanceof 的区别**相同点:J...翻译 2018-10-23 18:05:29 · 224 阅读 · 0 评论 -
如何防止脚本对前端的影响?
防止脚本对前端的影响一:如何禁止TextBox输入html标签和脚本? /// <summary> /// 删除Html标签 /// </summary> /// <param name="text"></param> /// <returns></returns> pu转载 2018-09-27 22:23:30 · 403 阅读 · 0 评论 -
Vue UI组件库
Vue 是一个轻巧、高性能、可组件化的MVVM库,API简洁明了,上手快。从Vue推出以来,得到众多Web开发者的认可。在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正式使用。开发团队在使用Vue.js框架和UI组件库以后,开发效率大大提高,自己写的代码也少了,很多界面效果组件已经封装好了。在选择Vue UI组件库的过程中,通过GitHub上根据star数量、文档丰...原创 2019-02-25 09:39:34 · 301 阅读 · 0 评论