Vison's Blog

--记录学习过程，激发学习欲望

从零开始搭建前端脚手架cli

前言 日常开发中，我们都只专注在业务上的开发，拿起一套开箱即用的模板项目就直接开搞了。很多时候都没有思考过， 平时我们使用的脚手架里面到底做了什么，并且如果是自己来搭一套脚手架，应该怎么去搭呢？ cli的搭建 在搭建脚手架cli之前，我们首先思考一下，一个cli，需要什么能力呢？答案是初始化能力，那么初始化的功能需要怎样去实现呢， 这里，我们先梳理一下思路。 搭建思路 首先考虑一下...

Posted by Vison on December 17, 2019

JS中深拷贝的几种方法

JS中深拷贝的几种方法 循环拷贝 deepClone (initialObj) { if (typeof initialObj !== 'object') { return initialObj } let obj = {} for (let key in initialObj) { if (typeof initialObj[key] === 'obje...

Posted by Vison on December 11, 2019

Vue + Element中后台单页应用性能优化

项目中存在问题 目前前端应用普遍采用客户端加载，所以js、css文件大小将直接影响到页面响应速度，下图是优化目标项目的analyze结构图以及体积过大的静态文件： 从图中可以看出目前项目存在以下问题： vendor.js、app.js等文件过大 最大的js有将近900k，影响浏览器加载速度 静态文件中存在三方静态资源包 文件...

Posted by Vison on July 17, 2019

Vue + Element中后台单页应用换肤实践

换肤需求及方案制定 Vue + Element管理后台项目需要用到换肤功能，指定多个主题色进行切换，项目中UI颜色两部分： Element 组件 自定义组件及页面 Element组件换肤 获取theme-chalk的css文件，根据主题色动态生成相关颜色，利用正则表达式替换后动态生成style。 由于根据Element-ui的版本号网络请求获取css比较耗时，https:/...

Posted by Vison on June 20, 2019

JS的单线程和事件循环机制

从单线程开始谈起 众所周知，JavaScript是一门单线程的非阻塞的脚本语言，这是由于它诞生时的用途所决定的：与浏览器交互。 单线程意味着，javascript代码在执行的任何时候，都只有一个主线程来处理所有的任务。 非阻塞则是当代码需要进行一项异步任务（无法立刻返回结果，需要花一定时间才能返回的任务，如I/O事件）的时候， 主线程会挂起（pending）这个任务，然后在异步任务返回结果...

Posted by Vison on January 6, 2019

前端面试题汇总

CSS 盒子模型？ 垂直居中？ 清除浮动？ 块级元素和行内元素？ CSS选择器及其权重？ px、em、rem？ CSS & LESS & SCSS HTTP 跨域请求？ JsonP跨域、iframe跨域...

Posted by Vison on July 29, 2018

Vue + Nuxt 实现SSR及其部署方案

最近在开发Vue实现服务端渲染的时候，采用了Nuxt.js实现SSR（服务端渲染）。 用过react.js的童鞋可能都或多或少接触过Next.js，Nuxt.js 也是类似是一个 Next.js的基于 Vue.js 的通用应用框架。 如果应用需要有SEO的要求的话，Nuxt.js是一个很好的解决方案。但是如果不需要的话，建议 还是客户端渲染，服务端渲染目前还是有一些问题需要解决。这在后面会...

Posted by Vison on July 5, 2018

Nginx学习笔记

最近在开发Vue实现服务端渲染的时候，需要使用Nginx验证一下其部署方案的可行性，果断本地 部署了一套验证一下，在此做一下记录 Nginx安装（MacOS） 安装（可以用 brew 安装） $ sudo brew install nginx 查看 nginx 版本 $ nginx -v 启动 nginx $ sudo nginx 查看 n...

Posted by Vison on July 5, 2018

npm使用

npm常用命令 npm init: 运行构建新项目的向导 npm install module_name: 在项目中安装一个模块 npm install -g module_name: 全局方式安装一个模块 npm install module_name –save: 在项目中安装一个模块，并把此模块添加到项目配置文件package.json中，作为项目依赖 ...

Posted by Vison on October 17, 2017

process对象

Posted by Vison on October 17, 2017

FEATURED TAGS
Android ReactNative React 开发模式 JavaScript npm Vue
ABOUT ME

开心敲代码，开心生活，
做一个积极乐观的程序员