- 博客(34)
- 收藏
- 关注
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 vue使用webpack优化构建流程
初衷:如果我们的 Vue 项目比较大.或者说项目中引入了许多第三方库,那么在执行 npm run build 构建项目的时候会极其的慢.比如我现在的项目就每次打包就要 83s。下面提供一些方法用来提供优化打包速度:resolve.modules思路:webpack 的 resolve.modules 是用来配置模块库(即 node_modules)所在的位置。当 js 里出现 import ...
2019-11-20 17:14:41
273
原创 mac上开启本地服务器
Nginx是一个高性能的HTTP和反向代理服务器,同时也是一个 IMAP/POP3/SMTP 代理服务器。安装:搜索软件:brew search nginx安装软件:brew install nginx卸载软件:brew uninstall nginx升级brew:sudo brew update查看安装信息:sudo brew info nginx查看已经安装的软件:brew l...
2019-11-20 17:13:44
588
原创 MySQL 8.0+重置密码
关闭数据库1、在终端中输入:sudo /usr/local/mysql/support-files mysql.server stop2、在访达中找到安装好的mysql,关闭mysql运行。跳过验证// 进入数据库指令文件cd /usr/local/mysql/bin// 跳过权限认证sudo ./mysqld_safe --skip-grant-tables免密码进入数据...
2019-11-20 16:52:44
214
原创 解决多图片压缩上传和iOS端图片上传选择90度的问题
逻辑思路:1、监听input文件值的change事件2、获取文件列表3、使用FileReader()函数读取图片信息,并转为base64格式4、根据预设的阀值,判断是否压缩5、如果不压缩,将图片转为blob格式,使用FormData()函数,上传图片6、如果压缩图片,使用canvas重新绘制图片,根据需要,选择是否使用瓦片canvas7、使用Exif.js,获取图片方向信息,确定是否...
2019-11-20 16:47:41
250
原创 mac下无须密码登陆阿里云服务器
打开控制台:输入ssh-keygen -t rsa 命令,一路回车,该命令在我的home目录底下的 .ssh/ 这个目录里面产生所需要的两把 Keys ,分别是私钥 (id_rsa) 与公钥 (id_rsa.pub),我们需要复制公钥。注:ssh-keygen 生成、管理和转换认证密钥,包括RSA和 DSA 两种密钥密钥类型可以用 -t选项指定。读取密钥信息,并拷贝:cat /Users/l...
2019-06-08 15:06:02
416
原创 macz中提示:adb:commen not found
安装 Android Studio之后,输入 adb devices如果出现 adb:commen not found。原因:adb环境变量没有添加,需要手动添加。首先,需要找到安装sdk的位置,android studio =》 Preferences =》 android sdk,可以找到你安装的sdk位置open .bash_profile :输入一下代码,设置环境变量:expo...
2019-03-05 11:15:59
185
原创 react组件通讯的几种方式
在react使用过程中,不可避免的会使用到组件通讯,常见的几种情况如下:父组件到自组件;子组件到父组件;跨级组件;非嵌套组件;下面依次说下上面几种通讯常用的方法:1、父组件到子组件:通常父组件使用props向子组件传递,然后子组件自行处理。App.jsimport React,{ Component } from "react";import Sub from "./SubC...
2019-01-30 16:29:56
4728
1
原创 react_life_cycle
componentWillmount:组件初始化时调用,以后组件更新不再调用,此时可以更改staterender:渲染。创建虚拟DOM,进行Diff算法,更新DOM树。componentDidmount:组件渲染之后调用,只调用一次。componentWillReceiveprops(nextProps):组件初始化时不调用,只有接收新的props时才调用。shouldConponen...
2019-01-28 16:27:50
316
原创 react的中间件
概念:(1)Reducer:纯函数,只承担计算 State 的功能,不合适承担其他功能,也承担不了,因为理论上,纯函数不能进行读写操作。(2)View:与 State 一一对应,可以看作 State 的视觉层,也不合适承担其他功能。(3)Action:存放数据的对象,即消息的载体,只能被别人操作,自己不能进行任何操作。所以说,只有发送 Action 的这个步骤,即store.dispatc...
2019-01-25 10:34:08
1897
原创 mac上部署nginx实现前端跨域
使用安装工具homebrew(mac下的安装工具,如果未安装,请自行下载安装)打开终端,如果homebrew不是最新版本的,请执行一下命令brew update使用brew搜索安装软件是否存在:brew search nginx执行命令:brew info nginx,方便以后配置,结果如图:我们可以知道下nginx的稳定版的版本号,是否安装,目录,默认端口号等信息。正式安装:bre...
2019-01-23 15:46:41
1299
1
原创 JavaScript的继承
构造函数继承function Man(age){ this.age = age}var girl = new Man('25');使用new关键字生成实例,this就会绑定到实例上。过程:在内存中生成一个实例对象object,指定实例对象的_proto_到构造函数的prototype,运行构造函数,想当于:Man.call(object)检查返回值,如果返回值为...
2019-01-22 16:28:44
188
原创 容器组件和展示组件
redux 的 React 绑定库包含了 容器组件和展示组件相分离 的开发思想。明智的做法是只在最顶层组件(如路由操作)里使用 Redux。其余内部组件仅仅是展示性的,所有数据都通过 props 传入。不区分容器和展示组件的情况:// CommentList.jsclass CommentList extends React.Component { constructor() { ...
2019-01-22 14:56:31
2479
原创 Mac系统下加速百度云下载(附软件)
1、所需工具Ariz2GUI,提取码:75vzchrome插件,提取码:urpv2、载入chrome插件:打开开发者模式,然后将下载的插件拖入,即可。3、安装Ariz2GUI。4、然后打开网页版百度云盘,选中要下载的文件,可以看到在下载的下方会出现选项,如图:选中ARIZ2RPC即可在刚刚安装的软件进行下载。...
2019-01-14 15:14:23
8101
7
原创 小程序image组件自适应宽高比
先撸为敬 :1s后<image src="{{item}}" mode="widthFix"></image>aspectFill:aspectFill 保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。aspectFill同样保持图片的宽高比不会变形。但它让图片完全
2019-01-14 09:58:28
3243
原创 vue+webpack配置多环境打包
在新建好的项目中,一般执行npm run build就是打包了,但此时只能打包到一个环境,不同环境需要配置不同的地址,可以手动更改接口的地址,也可以自行配置命令而不需要每次打包进行地址切换,步骤如下:安装:npm install cross-env –save-dev首先在config.js中添加配置不同的打包环境变量:如图:对build中webpack.prod.conf.js做...
2019-01-11 14:41:17
1552
原创 postcss-pxtorem:移动端px自动转为rem
安装:npm install postcss-px2remvue2.x:webpack:npm install postcss-loadervar px2rem = require('postcss-px2rem');module.exports = { module: { loaders: [ { test: /\.css$/, ...
2019-01-10 17:52:13
17444
2
原创 小程序开发第三天:自定义底部TabBar栏
在components下新建一个文件夹tabbarConponent,在里面创建四个文件分别是tabbar.js、tabbar.json、tabbar.wxml和tabbar.wxss。wxml中:对底部导航栏进行基本布局<view wx:if="{{showOrHide}}" class="tabbar_box {{isIphoneX?'iphoneX-height':''}}" ...
2019-01-07 10:12:49
8247
4
原创 小程序开发第二天:wepy和原生小程序
仔细研究了下wepy和原生小程序的区别,总结了一下几点:wepy支持组件化开发<list :item="items"></list>import List from '../components/list';//声明页面中将要使用到的组件components = { panel: Panel, counter1: Counter, ...
2018-12-15 00:06:54
1283
2
原创 小程序开发第一天:wepy和Vant-weapp
公司新开了一个拼团小程序项目,强制要求必须在1月4号之前完成上线,然而,现在已经12月14。。。半个月一个小程序,只有原型,真的是完全从0到1,真的很无语
2018-12-14 23:10:45
5562
1
原创 redux-thunk:异步action
在react中action是一个普通的JavaScript对象。reducer是一个纯函数,只能用于改变state,接受旧的state和action,返回一个新的state,不可以在reducer中进行异步操作,如定时器,http请求等。每次action触发(dispatch)时,都会时reducer同步的对store进行更新。但是实际项目中会有很多都是要根据需求来触发action的,如htt...
2018-12-08 23:40:51
898
原创 React中的无状态组件和有状态组件
React中创建组件的方式ES5的写法:React.createClass( {} ),接受一个对象参数,切参数内必须含有render函数,通过render函数返回一个组件实例,如import React from 'react' import ReactDOM from 'react-dom' const SwitchButton = React.createClass({ ge...
2018-12-06 10:46:06
1611
转载 react-native-tab-navigation
原文地址安装npm install react-native-tab-navigator --save引入import TabNavigator from 'react-native-tab-navigator'如下面所示:import React, { Component } from 'react';import { Platform, StyleSheet, ...
2018-12-05 11:31:01
448
原创 react-native-parallax-scroll-view
安装npm install react-native-parallax-scroll-view使用import React, {Component} from 'react';import {View, Text,Image,StyleSheet} from 'react-native';import ParallaxScrollView from 'react-native-paral...
2018-11-30 23:48:43
831
原创 react-native-swiper
安装npm install react-native-swiper --save引入import React,{Component} from 'react';import { View,Text,StyleSheet,Alert } from 'react-native';import Swiper from 'react-native-swiper';render中:<S...
2018-11-30 22:30:28
539
原创 wepy项目中使用async awite
在项目根目录下安装 runtime 包:npm install wepy-async-function --save修改wepy.config.js:babel: { "presets": [ "env" ], "plugins": [ "transform-export-extensions", "syntax-export-extensions" ] }在app.wpy中使API pr...
2018-11-30 21:06:30
714
原创 mac系统下运行react-native run-android出现红屏的错误
如图所示:解决方法:在android/app/src/main/下 新建 assets 文件夹,然后在根目录下运行一下命令:react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundl...
2018-11-23 10:01:52
358
原创 react-native入门(一)
安装环境HomeBrew:Mac 系统的包管理器,用于安装 NodeJS 和一些其他必需的工具软件。在终端输入一下命令,回车:/usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”安装任意包:brew install packageName卸载任...
2018-11-22 22:40:48
114
原创 切换npm镜像
修改下载仓库为淘宝镜像1、npm config set registry https://registry.npm.taobao.org --global2、npm config set disturl https://npm.taobao.org/dist --global重置自己原来的镜像npm config set registry https://registry.npmjs.or...
2018-11-22 09:29:24
171
原创 Vue-Cli3初体验(二)
CLI服务 CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包,局部安装在每个 @vue/cli 创建的项目中。CLI 服务是构建于 webpack 和 webpack-dev-server 之上的。它包含了:加载其它 CLI 插件的核心服务;一个针对绝大部分应用优化过的内部的 webpack 配置;项目内部的 vue-cli-service ...
2018-11-19 17:40:26
235
原创 sass和gulp
什么是sass?CSS不是编程语言,但是利用它可以进行网页开发,但是没法用它进行编程。sass的出现弥补了它的不足,让css可以通过编程来实现。sass扩展了css3,增加了规则,变量,混入,选择器,继承等特性,可以生成风格良好的css样式表,易于管理和维护。sass官网:http://sass-lang.com/环境变量搭建和编译指令安装ruby sass依赖于rub
2018-11-19 17:05:52
234
原创 Vue-Cli3初体验(一)
前段时间看到一篇关于vue-cli3的文章,看到和老版本的vue-cli有很大的区别,就自己试试踩踩坑。vue cli是一个基于Vue.js进行快速开发的完整系统。它通过@vue/cli的方式搭建交互式的项目脚手架它通过@vue/cli + @vue/cli-service-global进行快速零配置原型开发一个运行时的依赖(@vue/cli-service),该依赖基于webpac...
2018-11-19 16:58:40
125
原创 DOM元素的各种尺寸offsetHeight/Width,clientHeight/clientWidth,offsetLeft/Top,
1、#box{height: 300px;width: 300px;background:red;margin: 100px 200px;border: 100px solid #000;padding: 100px;/margin: 0;/position: absolute;} 2、offsetHeight/Width:是指元素的实际宽高,即content的宽高 + padding值 + bo
2017-08-19 19:56:10
467
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人