Vison's Blog

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

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

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

JS中深拷贝的几种方法

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

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

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

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

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

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

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

前端面试题汇总

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

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

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

Nginx学习笔记

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

npm使用

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

process对象