- 博客(23)
- 收藏
- 关注
RSS订阅原创 从组件到模板到脚手架开发，说说我的Vue组件开源之路
本文记录我从开源一个Vue组件出发，到模板以及脚手架开发，最终开源了一套脚手架工具的过程背景在流水式的前端开发的工作中，难免遇到需要依靠一些开源的库，但这些库有时又不能满足我的需求，差之毫厘谬以千里。于是我萌生了一个想法：为什么我不能开源一个项目、一个库、一个组件呢？需要解决的问题Vue组件开发支持全局注册开发流程npm发布版本控制发布流程webpack 搭...
2019-01-24 17:03:11
597
原创 h5移动端适配
移动端自适应+浏览器兼容使用postcss-px2rem原理：浏览器兼容posscss会将本地的css预处理文件进行打包加上各种浏览器的前缀以做到浏览器兼容px2rem使用该插件后达到的效果是：按照视觉稿的像素值写css样式，且能做到不同设备的样式自适应。其原理是通过将你写的px转换为rem，并指定根元素的font-size与屏幕的比例与remUnit和视觉稿的比例相同，具体操作如下...
2018-12-20 14:07:04
455
原创 React学习笔记-从Vue出发学React
React学习笔记1.前言2.环境搭建3.主要概念3.1 Hello WorldJSX1.前言本文记录了React学习的全过程以及个人理解，由于作者对Vue比较熟悉，会在文章中将陌生的React知识点用Vue中的相应内容做比较，以加深理解，这些比较的内容会以注脚的形式描述，供读者选择阅读。2.环境搭建全局安装react官方脚手架npm install -g create-react-ap...
2018-11-30 17:45:38
823
原创 TypeScript学习
typescript1.概述2.环境搭建3.体验typescript4.基础学习4.1.原始数据类型4.2.任意值4.3.类型推论4.4.联合类型4.5.接口1.概述本文记录了学习typescript的全过程2.环境搭建使用以下命令安装typescriptsudo npm install -g typescript安装完成后使用以下命令检查是否安装成功tsc 3.体验types...
2018-11-22 16:44:11
365
原创 前端知识沉淀--标签篇
前端知识沉淀--标签篇概述divaspaninputtextarea概述本文主要介绍了实际项目中可能遇到的标签处理问题div可编辑<div contenteidtable="true"></div>a- 清空默认样式a { text-decoration: none; // 去除a标签默认下划线}a:hover
2018-11-22 10:49:44
409
原创 CSS全面实现内容水平居中，垂直居中
CSS全面实现内容水平居中，垂直居中概述水平居中（内容）行级元素inline/inline-block块级元素(block)一行多个块级元素垂直居中行级元素(inline)/inline-block概述本文介绍了各种情况下实现水平居中，垂直居中的方式。参考链接水平居中（内容）行级元素inline/inline-block.center { text-align: center;}...
2018-11-22 10:16:24
305
原创 Weex学习之路（二）调试篇
写在前面：作为前端开发工作者，一款好的调试工具必不可缺。你可能已经习惯了chorme提供的简单好用的网页调试工具，但在weex中，调试是一个巨坑！！Weex调试踩坑之旅在weex中，调试是一件非常麻烦但事，好在weex官方文档中提供了一些方案1. weex-toolkit命令在上一篇文章中介绍了weex-toolkit这一脚手架工具，现在介绍以下该脚手架提供的一些命令。1.1 creat...
2018-11-01 20:52:41
1574
原创 Weex学习之路（一）
写在前面：本文建立在读者已安装node.js环境，并掌握vue.js的基础上。1.搭建开发环境1.1安装依赖全局安装weex-toolkit，类似于vue.js的vue-cli脚手架工具npm install -g weex-toolkit若提示没有权限，需在命令前添加sudo命令，获取管理员权限sudo npm install -g weex-toolit若安装失败可使用npm...
2018-11-01 11:49:13
334
原创 前端学习-个人认为值得一看的文章
vue中慎用style的scoped属性vue 开发命名规范手机端页面自适应解决方案—rem布局进阶版（附源码示例）不要再问我跨域的问题了【更新了网易内推码】互联网前端面试面经（网易/腾讯等）js私有变量JS继承的实现方式...
2018-09-13 16:01:46
257
原创 深入浅出理解JS原型链继承
引出js在ES6以前还没有class的概念，但却存在着面向对象的思想。在js中，可通过构造函数的形式来创建对象，并使用各种方式实现继承，其中原型链继承便是一种普遍的方法什么是原型链继承先来看一个例子function Parent () { this.type = 'obj'}function Child () { this.name = 'zs', this.age =...
2018-08-31 15:31:35
336
原创 点到即止，对HTTP协议的理解
HTTP协议是什么？http协议是超文本传输协议，用于在客户端与服务器间进行数据传输。HTTP协议位于计算机网络的哪一层？http协议是位于最顶层的应用层协议，在传输层的TCP/UDP，网络层的IP协议之上。其中在应用层和传输层之间有一层独立的安全套接层SSL。HTTP1.0,HTTP1.1的区别？HTTP的特点在于无状态，无连接。为了保持长连接，http1.0需要设置conn...
2018-08-28 16:45:13
457
原创 前端爬坑日记，你在初入vue项目开发过程中可能会掉进的坑
这篇文章是记录我在vue项目开发中遇到的各种巨坑，希望看了能对你有一些帮助，这篇文章会长期更新1.Vue中使用sass首先通过以下代码安装sass的依赖：npm i sass-loader node-sass - s然后在webepack.base.conf.js目录下配置以下代码：{ test: /\.sass$/, loaders: ['...
2018-07-19 17:49:42
637
原创 前端学习笔记Vue篇（3）
1.slot插槽内容分发在vue项目开发过程中经常遇到这样的情况：很多组件或者模块的结构相同，只不过是部分内容稍有不同。这种情况下，每次编写相似的代码不仅会增大工作量，还会让代码变得臃肿和冗余。slot便是一种用来解决这种情况的简洁方案，话不多说，上代码父组件：test-slot.vue<template> <div class="test-slot">...
2018-07-17 14:18:47
366
原创 前端学习笔记Vue篇（2）
1.Vue中数据双向绑定的实现原理首先我们要知道什么是数据的双向绑定双向绑定也就是我们平时所说的MVVM模式，即model,view,view-model假如你在js中定义了一个对象var cat = { name: 'Tom'} 假定我们通过某种方法使整个对象的数据和某个DOM节点关联起来，以达到以下目的：修改DOM节点的数据可以改变cat对象的数据，修改cat对象的数据可以改变DOM节点的...
2018-07-12 15:49:36
346
原创 正则表达式
正则表达式正则表达式提供一种字符匹配模式，用于匹配符合模式的字符串，对字符串进行筛选，替换等操作正则表达式中有三种常用的元素：修饰符，匹配符，方法，。正则均是以/开始，以/结尾的正则定义的方式为：var reg = new RegExp("/\D/")或var reg = /\D/以第二种方式居多，此处暂时不用考虑/\D/是什么意思，只需知道参数的位置和是否需要...
2018-07-11 17:06:54
422
原创 前端学习笔记js篇（3）
1.数组方法1.joinjoin将数组以传入的参数进行分割，但不改变原数组var arr = [1, 2, 3, 4, 5]console.log(arr.join('-'))console.log(arr)2.push和poppush将参数添加到数组的末尾，其返回值为push后的数组长度；而pop会删除数组的最后一项，其返回值为删除的元素var arr = [...
2018-07-10 11:50:22
345
原创 前端学习笔记Vue篇（1）
1.Vue常用的指令v-bindv-bind用于为html的属性绑定数据，如：<p :title="ptitle"></p>data () { return { ptitle: 'this is title' } },：为v-bind的简写，以上将data的ptitle绑定到了p标签的title属性上v-if和v-s...
2018-07-06 17:20:19
14451
原创 前端学习笔记css篇（1）
1.响应式布局常用的响应式布局方法：为不同分辨率配置不同的css文件/* 当分辨率大于720px时 */@media screen and (min-width: 720px) {} 2.CSS动画 css3的animation提供简单的动画效果，如设置透明度渐变：.header { width: 100px; height: 100px; backgr...
2018-07-06 16:09:05
275
原创 前端学习笔记js篇（2）
1. ==和===js中==运算会先将两边的数据类型进行转换，如: 1=='1'，会先把'1'转换成1,再进行比较，结果自然是true而===运算是将两边的数据进行完全比较，数据类型和数值必须完全相同。因此1==='1'，结果自然是false 被比较值 B Undefined Null Number String Boolean...
2018-07-06 15:50:03
249
原创 前端学习笔记js篇（1）
1.JS对象js对象包括 内置对象，宿主对象，本地对象。内置对象：为已实例化的对象，如Golbal,Math宿主对象：包括浏览器对象BOM（如window),文档对象模型DOM等本地对象：未实例化的对象，如常用的Object,Array,Function,Array等对象的声明方式1. 对象创建var obj = new Object()2.直接创建 var obj = {}2.JS函数函数的声明...
2018-07-05 15:45:41
566
1
原创 如何从零开始搭建一个vue-webpack项目
1.从Node.js官网下载node安装包进行安装。http://nodejs.cn/download/安装完成后在cmd中输入node -v 查看node.js版本号，npm -v 查看npm版本号；npm是node的一个包管理器2.安装vue-cli vue-cli是vue的一个脚手架工具，可以帮助你搭建一个完整的vue项目使用 npm install vue...
2018-06-04 11:13:05
1441
原创 如何在vue项目中使用less？
前提：用vue -cli脚手架生成vue项目，cmd进入到项目根目录1.用npm安装sass的依赖包（可使用cnpm淘宝镜像）npm install --save-dev sass-loader//sass-loader依赖于node-sassnpm install --save-dev node-sass2.在build目录下找到webpack.base.conf.js文件...
2018-04-02 11:06:28
3448
原创 js三元表达式学习笔记
三元表达式：(condition)?(expr1):(expr2)三元表达式是if else的等价写法，上述表达式等同于：if(condition){ expr1;}else{ expr2;}2018.12.20更新：三元表达式也可以描述复杂的条件关系,如:a ? (b ? c : d) : e其他表示：满足某个条件时执行某段语句的...
2018-03-23 19:20:27
841
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人