前端开发
文章平均质量分 80
白驹过隙时光荏苒
这个作者很懒,什么都没留下…
展开
-
模拟 Vite
模拟 Vite原创 2022-08-22 16:04:06 · 458 阅读 · 0 评论 -
Vite介绍
Vite介绍原创 2022-08-22 15:57:27 · 314 阅读 · 0 评论 -
Vue.js 3.x 响应式系统原理
Vue.js 3.x 响应式系统原理原创 2022-08-22 15:54:57 · 269 阅读 · 0 评论 -
Vue3.x Composition API - ToDoList 案例
Vue3.x Composition API - ToDoList 案例原创 2022-08-22 15:52:20 · 230 阅读 · 0 评论 -
Vue3.x Composition API
本文主要围绕 Composition API 来讲解如何使用,分别是以下几个 API 函数, 通过学习,可以让你可以更快上手 Composition API ,掌握 Vue.js 3.x 的新特性。原创 2022-08-22 15:49:52 · 151 阅读 · 0 评论 -
Vue 3.x 介绍
Vue 3.x 介绍原创 2022-08-22 15:47:17 · 470 阅读 · 0 评论 -
封装 Vue.js 组件库
Study Notes封装 Vue.js 组件库组件库介绍开源组件库Element-UIIViewVantCDD(组件设计文档)自下而上从组件级别开始,到页面级别结束CDD 的好处组件在最大程度上被重用并行开发可视化测试处理组件边界情况vue 中处理组件边界情况的 API$root当前组件树的根 Vue 实例。如果当前实例没有父实例,此实例将会是其自己。$parent父实例,如果当前实例有的话。$children当前实例的直接子组件。需要注意 $chil原创 2021-01-27 09:54:04 · 777 阅读 · 1 评论 -
静态站点生成(SSG)——Gridsome
Study NotesGridsome静态站点生成(SSG)GitHub 仓库官网介绍Gridsome 是什么Gridsome 是由 Vue.js 驱动的 Jamstack 框架,用于构建默认情况下快速生成的静态生成的网站和应用。Gridsome 是 Vue 提供支持的静态站点生成器,用于为任何无头 CMS,本地文件或 API 构建可用于 CDN 的网站使用 Vue.js,webpack 和 Node.js 等现代工具构建网站。通过 npm 进行热重载并访问任何软件包,并使原创 2021-01-27 09:50:10 · 2900 阅读 · 0 评论 -
搭建自己的 SSR
Study NotesVue SSR 介绍SSR 官方文档什么是服务器端渲染 (SSR)?官方文档Vue SSR(Vue.js Server-Side Rendering) 是 Vue.js 官方提供的一个服务端渲染(同构应用)解决方案使用它可以构建同构应用还是基于原有的 Vue.js 技术栈:::tip 官方介绍Vue.js 是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM。然而,也可以将同一个组件渲染为服务器端的 HTML原创 2021-01-27 09:40:29 · 4993 阅读 · 1 评论 -
Nuxt.js
Study NotesNuxt.js介绍Nuxt.js 是什么?Nuxt.js 是一个基于 Vue.js 的通用应用框架。通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI 渲染。我们的目标是创建一个灵活的应用框架,你可以基于它初始化新项目的基础结构代码,或者在已有 Node.js 项目中使用 Nuxt.js。Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。除此之外,我们还提供了一种命令叫:nuxt generate ,为基于 V原创 2021-01-27 09:27:29 · 10231 阅读 · 0 评论 -
服务端渲染(SSR)
Study Notes服务端渲染(SSR)概述随着前端技术栈和工具链的迭代成熟,前端工程化、模块化也已成为了当下的主流技术方案,在这波前端技术浪潮中,涌现了诸如 React、Vue、Angular 等基于客户端渲染的前端框架,这类框架所构建的单页应用(SPA)具有用户体验好、渲染性能好、可维护性高等优点。但也也有一些很大的缺陷,其中主要涉及到以下两点:首屏加载时间过长与传统服务端渲染直接获取服务端渲染好的 HTML 不同,单页应用使用 JavaScript 在客户端生成 HTML 来呈现内容,原创 2021-01-27 09:18:55 · 918 阅读 · 0 评论 -
Vuex 模拟实现
Study NotesVuex 模拟实现实现思路实现 install 方法Vuex 是 Vue 的一个插件,所以和模拟 VueRouter 类似,先实现 Vue 插件约定的 install 方法实现 Store 类实现构造函数,接收 optionsstate 的响应化处理getter 的实现commit、dispatch 方法installlet _Vue = null;function install(Vue) { _Vue = Vue; // 混入原创 2021-01-27 09:14:18 · 256 阅读 · 0 评论 -
Vuex案例-购物车
Study Notes案例-购物车购物车 Demo,带你理解并使用 vuex 状态管理目录结构效果展示功能介绍首页获取并展示商品列表添加商品到购物车展示购物车中商品总数购物车更新购物车中的商品数据更新商品选中状态计算选中商品数量、合计商品价格全选、单选删除购物车中的商品本地缓存 vuex 状态功能开发Vuex 中创建两个模块,分别用来记录商品列表和购物车的状态,store 的结构:└───store ├───modules │ └原创 2021-01-27 09:09:59 · 1983 阅读 · 0 评论 -
Vuex基本使用
Study NotesVuexVuex 是什么?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension ,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。Vuex 是专门为 Vue.js 设计的状态管理库它采用集中式的方式存储需要共享的数据从使用角度,它就是一个 JavaScrip转载 2021-01-27 09:06:21 · 206 阅读 · 0 评论 -
Vue状态管理
Vue状态管理组件内的状态管理流程Vue 最核心的两个功能:数据驱动和组件化。组件化开发给我们带来了:更快的开发效率更好的可维护性每个组件都有自己的状态、视图和行为等组成部分。new Vue({ // state data() { return { count: 0, }; }, // view template: `<div>{{ count }}</div>`, // actions methods:原创 2021-01-27 08:57:58 · 405 阅读 · 0 评论 -
nodejs读取xlsx格式文件
nodejs读取xlsx格式文件安装npm i node-xlsx -D// 或者yarn add node-xlsx -D使用读取表格数据,并生成json对象/** * @author Wuner * @date 2020/8/13 21:08 * @description */let xlsx = require('node-xlsx');const fs = require('fs')const path = require('path')// 解析得到文档中的所有原创 2020-08-22 13:30:11 · 2243 阅读 · 0 评论 -
常用的ECMAScript 6以后的新特性
Study Noteslet 与块级作用域let 语句声明一个块级作用域的本地变量,并且可选的将其初始化为一个值。描述let 允许你声明一个作用域被限制在 块级中的变量、语句或者表达式。与 var 关键字不同的是, var 声明的变量只能是全局或者整个函数块的。 var 和 let 的不同之处在于后者是在编译时才初始化(见下面)。作用域规则let 声明的变量只在其声明的块或子块中可用,这一点,与 var 相似。二者之间最主要的区别在于 var 声明的变量的作用域是整个封闭函数。functi原创 2020-08-09 02:52:32 · 3201 阅读 · 0 评论 -
函数式编程与 JS 异步编程、手写 Promise
函数是一等公民(First-class Function)特性可将函数赋值给变量,即函数可存储在变量中函数可作为参数函数可作为返回值说明在 JavaScript 中函数就是一个普通的对象 (可以通过 new Function() ),我们可以把函数存储到变量/数组中,它还可以作为另一个函数的参数和返回值,甚至我们可以在程序运行的时候通过 new Function(‘alert(1)’) 来构造一个新的函数。demo// 可将函数赋值给变量,即函数可存储在变量中const foo原创 2020-08-09 02:46:40 · 3327 阅读 · 1 评论 -
Android聊天软件开发(基于网易云IM即时通讯)——发送视频消息(六)
这次我们需要接入视频播放器的jar包//视频播放 api('com.shuyu:GSYVideoPlayer:6.0.1') { exclude group: 'com.android.support:appcompat-v7:27.0.0' } api('com.shuyu:gsyVideoPlayer-java:6.0.1') { ...原创 2019-06-14 11:50:08 · 10443 阅读 · 2 评论 -
Android聊天软件开发(基于网易云IM即时通讯)——发送图片消息(五)
最近工作太忙,都没有时间写博客了。废话不多说,直接上代码。在activity_send_message.xml添加发送图片的按钮<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" andr.........原创 2019-06-11 15:35:33 · 9750 阅读 · 0 评论 -
Android聊天软件开发(基于网易云IM即时通讯)——发送文本消息(四)
发送界面activity_send_message.xml<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" a...原创 2019-05-14 15:56:34 · 6722 阅读 · 2 评论 -
Android聊天软件开发(基于网易云IM即时通讯)——添加好友(三)
这里先搭建viewpage+BottomNavigationView+Fragment的底部导航栏activity_tabhost.xml<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" ...原创 2019-04-16 18:41:09 · 8629 阅读 · 1 评论 -
Android聊天软件开发(基于网易云IM即时通讯)——注册账号(二)
OKhttp封装IRequestpackage heath.com.chat.OKhttp;import java.util.Map;public interface IRequest { public static final String POST = "POST"; public static final String GET = "GET"; pu...原创 2019-04-15 18:50:06 · 7336 阅读 · 8 评论 -
Android聊天软件开发(基于网易云IM即时通讯)——环境搭建(一)
去网易云注册账号并登陆https://app.yunxin.163.com/index?clueFrom=nim&from=nim#/create添加依赖ndk { //设置支持的SO库架构 abiFilters "armeabi-v7a", "x86","arm64-v8a","x86_64"}implementation fileTree(d...原创 2019-04-15 12:06:50 · 11534 阅读 · 14 评论 -
Android仿微信拍摄、录制视频,以及视频播放(基于JCameraView和GSYVideoPlayer)
本项目使用Androidstudio开发工具引入权限<uses-permission android:name="android.permission.FLASHLIGHT" /><uses-feature android:name="android.hardware.camera" /><uses-feature android:name="andro...原创 2019-04-12 15:34:42 · 8186 阅读 · 8 评论 -
Android上传单文件和多文件(后台使用MultipartFile)
android代码:package heath.com.microchat.utils;import android.util.Log;import org.apache.http.HttpEntity;import org.apache.http.HttpResponse;import org.apache.http.HttpStatus;import org.apach...原创 2019-01-21 14:27:59 · 15643 阅读 · 1 评论 -
Vue.js 源码剖析-组件化
Vue.js 源码剖析-组件化组件化可以让我们方便的把页面拆分成多个可重用的组件组件是独立的,系统内可重用,组件之间可以嵌套有了组件可以像搭积木一样开发网页例如,你可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航链接、博文之类的组件。下面我们将从源码的角度来分析 Vue 组件内部如何工作组件实例的创建过程是从上而下(先创建父组件再创建子组件)组件实例的挂载过程是从下而上(先挂载子组件再挂载父组件)组件定义注册 Vue.component()入口原创 2020-08-16 10:39:08 · 1292 阅读 · 0 评论 -
Vue.js 源码剖析-模板编译
Study NotesVue.js 源码剖析-模板编译Vue 模板编译为什么需要模板编译Vue 2.x 使用 VNode 描述视图以及各种交互,用户自己编写 VNode 比较复杂模板编译的目的将模板(template)字符串转换为渲染函数(render)用户只需要编写类似 HTML 的代码 - Vue 模板,通过编译器将模板转换为返回 VNode 的 render 函数.vue 文件在 webpack 构建的过程中会被转换成 render 函数沙盒工具官方提供 Vue 2原创 2020-08-15 08:37:29 · 1685 阅读 · 0 评论 -
Vue2.x 源码剖析之虚拟 DOM
Study NotesVue.js 源码剖析-虚拟 DOM什么是虚拟 DOM虚拟 DOM(Virtual DOM) 是使用 JavaScript 对象来描述 DOM,虚拟 DOM 的本质就是 JavaScript 对象,使用 JavaScript 对象来描述 DOM 的结构。应用的各种状态变化首先作用于虚拟 DOM,最终映射到 DOM。Vue.js 中的虚拟 DOM 借鉴了 Snabbdom,并添加了一些 Vue.js 中的特性,例如:指令和组件机制。Vue 1.x 中细粒度监测数据的变化,每一个属原创 2020-08-10 14:50:49 · 4356 阅读 · 0 评论 -
Vue2.x 源码剖析之响应式原理
Vue.js 源码剖析-响应式原理响应式处理的入口src/core/instance/init.jsinitState(vm) vm 状态的初始化初始化了 _data、_props、methods 等src/core/instance/state.js/* @flow */import ...;const sharedPropertyDefinition = {...};export function proxy(target: Object, sourceKey: str原创 2020-08-10 14:47:32 · 4606 阅读 · 0 评论 -
带你了解虚拟 DOM(Virtual DOM)—— Snabbdom 的使用以及源码解析
Study Notes虚拟 DOM(Virtual DOM)什么是 Virtual DOMVirtual DOM(虚拟 DOM),是由普通的 JS 对象来描述 DOM 对象,因为不是真实的 DOM 对象,所以叫 Virtual DOM真实 DOM 成员let element = document.querySelector('#app')let s = ''for (var key in element) {s += key + ','}console.log(s)// 打印结果原创 2020-08-10 14:43:54 · 5027 阅读 · 1 评论 -
带你了解响应式原理,以及Vue 响应式原理模拟实现
Study Notes深入响应式原理数据响应式、双向绑定、数据驱动数据响应式数据模型仅仅是普通的 JavaScript 对象,而当我们修改数据时,视图会进行更新,避免了繁琐的 DOM 操作,提高开发效率双向绑定数据改变,视图改变;视图改变,数据也随之改变我们可以使用 v-model 在表单元素上创建双向数据绑定数据驱动是 Vue 最独特的特性之一开发过程中仅需要关注数据本身,不需要关心数据是如何渲染到视图Vue2.x 响应式原理当你把一个普通的 JavaScript原创 2020-08-10 14:28:32 · 4679 阅读 · 0 评论 -
模拟 VueRouter 的实现(简易版)
Study Notes模拟 VueRouter前置的知识:插件slot 插槽混入render 函数运行时和完整版的 VueVue Router 的核心代码// 注册插件// Vue.use() 内部调用传入对象的 install 方法Vue.use(VueRouter);// 创建路由对象const router = new VueRouter({ routes: [{ name: 'home', path: '/', component: homeComponent }]原创 2020-08-10 14:20:08 · 3881 阅读 · 0 评论 -
带你了解规范化-eslint、stylelint、prettier、git hooks
Study Notes规范化标准规范化是我们践行前端工程化中重要的一部分为什么要有规范化标准软件开发需要多人协同不同开发者具有不同的编码习惯和喜好不同的喜好增加项目维护成本每个项目或者团队需要明确统一的标准哪里需要规范化标准代码、文档、甚至是提交日志开发过程中人为编写的成果物代码标准化规范最为重要常见的规范化实现方式ESLint 工具使用定制 ESLint 校验规则ESLint 对 TypeScript 的支持ESLint 结合自动化工具或者 Webpack基于原创 2020-08-10 14:05:32 · 5496 阅读 · 0 评论 -
Rollup的简单使用
Rollup概述Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码,例如 library 或应用程序。Rollup 对代码模块使用新的标准化格式,这些标准都包含在 JavaScript 的 ES6 版本中,而不是以前的特殊解决方案,如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数,而你的项目不必携带其他未使用的代码。ES6 模块最终还是要由浏览器原生实现,但当前 Rollup 可以使你提前体验。原创 2020-08-10 13:54:34 · 4372 阅读 · 0 评论 -
带你从零开始使用Webpack构建 Vue 项目
Study NotesWebpack 构建 Vue 项目安装 webpack 和 webpack-clinpm i webpack webpack-cli -D配置入口起点创建一个webpack.config.js文件module.exports = { entry: './src/main.js',};配置 outputwebpack.config.jsconst path = require('path');module.exports = { entry: './s原创 2020-08-10 13:49:31 · 3961 阅读 · 0 评论 -
带你从零开始了解webpack
入口起点(entry points)在 webpack 配置中有多种方式定义 entry 属性单个入口(简写)语法用法:entry: string|Array<string>webpack.config.jsconst config = { entry: './src/index.js',};module.exports = config;entry 属性的单个入口语法,是下面的简写:const config = { entry: { main: './sr原创 2020-08-10 13:43:12 · 2801 阅读 · 0 评论 -
ES Module的基本使用
ES ModuleES Module 基本特性ESM 自动采用严格模式,忽略 ‘use strict’每个 ES Module 都是运行在单独的私有作用域中ESM 是通过 CORS 的方式请求外部 JS 模块的ESM 的 script 标签会延迟执行脚本(浏览器页面渲染后执行)export在创建 JavaScript 模块时,export 语句用于从模块中导出实时绑定的函数、对象或原始值,以便其他程序可以通过 import 语句使用它们。被导出的绑定值依然可以在本地进行修改。在使用 imp原创 2020-08-10 01:27:58 · 4184 阅读 · 0 评论 -
使用 Gulp和Grunt分别完成项目的自动化构建
使用 Gulp 完成项目的自动化构建使用gulpfile.js 使用 module.exports 导出了 build、dev、clean,所以我们可以通过 gulp 调用这三个任务gulp buildgulp devgulp clean详解 gulpfile.js处理 html 文件我们需要安装gulp-htmlmin、swig两个插件首先我们使用 swig 编译 html,并将数据对象中的变量注入模板,设置不缓存页面;后续我们将使用gulp-htmlmin,对 html 文件进行压缩原创 2020-08-09 13:02:59 · 3753 阅读 · 0 评论 -
使用 NodeJS 搭建一个小型脚手架工具
使用 NodeJS 搭建一个小型脚手架工具脚手架目录结构└───template/..........................模板目录 ├───src/...........................src目录 │ └───assets/...................资源目录 │ └───css/..................样式文件目录 │ └───fonts/................字体资源目录原创 2020-08-09 12:59:33 · 3891 阅读 · 0 评论