- 博客(34)
- 收藏
- 关注
RSS订阅
原创 vue使用webpack优化构建流程
初衷：如果我们的 Vue 项目比较大．或者说项目中引入了许多第三方库，那么在执行 npm run build 构建项目的时候会极其的慢．比如我现在的项目就每次打包就要 83s。下面提供一些方法用来提供优化打包速度：resolve.modules思路：webpack 的 resolve.modules 是用来配置模块库（即 node_modules）所在的位置。当 js 里出现 import ...
2019-11-20 17:14:41
267
原创 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
573
原创 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
204
原创 解决多图片压缩上传和iOS端图片上传选择90度的问题
逻辑思路：1、监听input文件值的change事件2、获取文件列表3、使用FileReader()函数读取图片信息，并转为base64格式4、根据预设的阀值，判断是否压缩5、如果不压缩，将图片转为blob格式，使用FormData()函数，上传图片6、如果压缩图片，使用canvas重新绘制图片，根据需要，选择是否使用瓦片canvas7、使用Exif.js，获取图片方向信息，确定是否...
2019-11-20 16:47:41
218
原创 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
392
原创 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
163
原创 react组件通讯的几种方式
在react使用过程中，不可避免的会使用到组件通讯，常见的几种情况如下：父组件到自组件；子组件到父组件；跨级组件；非嵌套组件；下面依次说下上面几种通讯常用的方法：1、父组件到子组件：通常父组件使用props向子组件传递，然后子组件自行处理。App.jsimport React,{ Component } from "react";import Sub from "./SubC...
2019-01-30 16:29:56
4697
1
原创 react_life_cycle
componentWillmount：组件初始化时调用，以后组件更新不再调用，此时可以更改staterender：渲染。创建虚拟DOM，进行Diff算法，更新DOM树。componentDidmount：组件渲染之后调用，只调用一次。componentWillReceiveprops（nextProps）：组件初始化时不调用，只有接收新的props时才调用。shouldConponen...
2019-01-28 16:27:50
306
原创 react的中间件
概念：（1）Reducer：纯函数，只承担计算 State 的功能，不合适承担其他功能，也承担不了，因为理论上，纯函数不能进行读写操作。（2）View：与 State 一一对应，可以看作 State 的视觉层，也不合适承担其他功能。（3）Action：存放数据的对象，即消息的载体，只能被别人操作，自己不能进行任何操作。所以说，只有发送 Action 的这个步骤，即store.dispatc...
2019-01-25 10:34:08
1864
原创 mac上部署nginx实现前端跨域
使用安装工具homebrew(mac下的安装工具，如果未安装，请自行下载安装）打开终端，如果homebrew不是最新版本的，请执行一下命令brew update使用brew搜索安装软件是否存在：brew search nginx执行命令：brew info nginx，方便以后配置，结果如图：我们可以知道下nginx的稳定版的版本号，是否安装，目录，默认端口号等信息。正式安装：bre...
2019-01-23 15:46:41
1250
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
181
原创 容器组件和展示组件
redux 的 React 绑定库包含了 容器组件和展示组件相分离 的开发思想。明智的做法是只在最顶层组件（如路由操作）里使用 Redux。其余内部组件仅仅是展示性的，所有数据都通过 props 传入。不区分容器和展示组件的情况：// CommentList.jsclass CommentList extends React.Component { constructor() { ...
2019-01-22 14:56:31
2443
原创 Mac系统下加速百度云下载（附软件）
1、所需工具Ariz2GUI，提取码：75vzchrome插件，提取码：urpv2、载入chrome插件：打开开发者模式，然后将下载的插件拖入，即可。3、安装Ariz2GUI。4、然后打开网页版百度云盘，选中要下载的文件，可以看到在下载的下方会出现选项，如图：选中ARIZ2RPC即可在刚刚安装的软件进行下载。...
2019-01-14 15:14:23
8028
7
原创 小程序image组件自适应宽高比
先撸为敬 ：1s后<image src="{{item}}" mode="widthFix"></image>aspectFill：aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。aspectFill同样保持图片的宽高比不会变形。但它让图片完全
2019-01-14 09:58:28
3183
原创 vue+webpack配置多环境打包
在新建好的项目中，一般执行npm run build就是打包了，但此时只能打包到一个环境，不同环境需要配置不同的地址，可以手动更改接口的地址，也可以自行配置命令而不需要每次打包进行地址切换，步骤如下：安装：npm install cross-env –save-dev首先在config.js中添加配置不同的打包环境变量：如图：对build中webpack.prod.conf.js做...
2019-01-11 14:41:17
1528
原创 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
17384
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
8206
4
原创 小程序开发第二天：wepy和原生小程序
仔细研究了下wepy和原生小程序的区别，总结了一下几点：wepy支持组件化开发<list :item="items"></list>import List from '../components/list';//声明页面中将要使用到的组件components = { panel: Panel, counter1: Counter, ...
2018-12-15 00:06:54
1260
2
原创 小程序开发第一天：wepy和Vant-weapp
公司新开了一个拼团小程序项目，强制要求必须在1月4号之前完成上线，然而，现在已经12月14。。。半个月一个小程序，只有原型，真的是完全从0到1，真的很无语
2018-12-14 23:10:45
5536
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
884
原创 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
1586
转载 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
434
原创 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
809
原创 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
513
原创 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
700
原创 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
350
原创 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
95
原创 切换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
155
原创 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
219
原创 sass和gulp
什么是sass？CSS不是编程语言，但是利用它可以进行网页开发，但是没法用它进行编程。sass的出现弥补了它的不足，让css可以通过编程来实现。sass扩展了css3，增加了规则，变量，混入，选择器，继承等特性，可以生成风格良好的css样式表，易于管理和维护。sass官网:http://sass-lang.com/环境变量搭建和编译指令安装ruby sass依赖于rub
2018-11-19 17:05:52
215
原创 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
117
原创 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
441
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人